はてなブックマーク

下記ページのざっくりとした翻訳。 webpack.js.org General Stay Up to Date（最新に保つ） Loaders Bootstrap Resolving Dlls Smaller = Faster Worker Pool Persistent cache（永続キャッシュ） Development Incremental Builds Compile in Memory stats.toJson speed Devtool Avoid Production Specific Tooling（production 固有のツールを避ける） Minimal Entry Chunk Avoid Extra Optimization Steps（余分な最適化手順を避ける） Output Without Path Info Node.js Version TypeScript

前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケーションではAPI通信など非同期処理が必ずと言っていいほど入ってくると思います。 たとえば fetch() を使って何かデータを取ってくる Action creator を定義したいとします。 const fetchSomeThing = (url) => { return fetch(url) .then(res => res.json()) .then(json => { return { type: 'FETCH_DATA', payload: { response: json } } }); }; fetchSomeThin

配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理解を深めつつ、いくつかのサンプルを作ってみたいと思います。 Array.prototype.reduce() の概要 構文 原則、初期値はつけた方が良い サンプル集 配列をオブジェクトにする 配列をインデックス付きのオブジェクトにする 配列内の要素から不要な値を削除する 二次元配列を一次元配列にする 多次元配列を一次元配列にする（再帰） 条件にマッチする要素から値を出す 配列内の重複している値を除外する filter() + map() の代わりに使う テンプレートリテラルのタグ関数で文字列の組み立てに使う まとめ 参考 Ar

WEB+DB PRESS VOL.110 の特集「設計も、実装も、ここから始まる！名前付け大全」を読んだメモです。 第1章 「良い名前」とは何か なぜ名前付けが重要なのか 悪い名前の問題 理解が困難 勘違いが起こる 変更が難しい 読みにくい なぜ名前はあるのか 第2章 名前付けの理論 良い名前とは 適切な名前とは 名前の意味と挙動の不一致 3つパターン シンプルさを保つ：適切な名前の基準の一つ 正しい書き方 第3章名前付けの実践 パターン1. 名前の意味と挙動がずれている パターン2. 名前の意味と挙動がずれている パターン3. 名前の意味が広すぎる ケーススタディ1：安易な単語を選ぶ check は真偽がどちらかよく分からない ケーススタディ2：重要な単語を不用意に使ってしまう スコープなしで重要な単語を使ってしまう 役割が抜けている ケーススタディ3：実装変更により、既存の名前の意味が

下記ページの要点をまとめます。 webpack.js.org また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp tree shakingとは 実際に試してみる tree shaking を有効にする 関数をexport するファイルを作る 関数を import するファイルを作る tree shaking 無効にしてビルドした場合 tree shaking 有効にしてビルドした場合 ここまでのまとめ Production モードでも不要なコードが含まれてしまう 副作用（side effect）とは 副作用がないことをwebpackに伝える package.json に sideEffects プロパティを指定 検証 まとめ 参考 tree shakingとは Tree Shaking は デッドコード（使われていない不要なコード）を除去す

これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数（input） 第二引数（init） 戻り値 基本的なリクエスト＆レスポンスの取得 fetch() から返されるPromiseは404でもrejectされない Response オブジェクト プロパティ メソッド Response オブジェクトが得られるタイミング まとめ 参考 Fetch API概要 そもそもFetch（フェッチ）とはなんなんでしょうか？ フェッチとは、取りに行く、取ってくる、持ってくる、連れてくる、来させる、呼び出す、引き出す、惹きつける、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT

以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。 kde.hateblo.jp ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。 Promiseとは Promiseの勘所 絶対に必要な基礎知識 Promise.resolve() は渡す引数によって返されるPromiseオブジェクトが変わる then() は 非同期で行われるPromise.resolve() とほぼ同じ役割 Promiseオブジェクトを渡した例 Promiseでの逐次（直列）処理 Array.prototype.reduce() と組み合わせて見やすく書く Promise.race() を使ったタイムアウト処理 まとめ 参考 Promiseとは PromiseはES2015から導入された非同期処理を扱

やりたいこと 手順 1. 新しいリポジトリを作成 2. 現在のremote url を確認 3. remote url を変更 4. 新しいリポジトリにpush 参考 やりたいこと リモートリポジトリを変更した際に、そのままでは push や pull ができないので remote url を変更したい。 ※ ホスティングサービスはGitHub ※ ssh接続の設定は完了しており、ローカルリポジトリとリモートリポジトリの同期がとれている状態とする 手順 1. 新しいリポジトリを作成 GitHub上で「New repository」をクリックして作成する 2. 現在のremote url を確認 git remote -v 3. remote url を変更 新しいリポジトリのURLに変更する。 git remote set-url origin {new-url} 正しく変更できているか確

久々にXAMPPを使うことがあり、PHPのバージョンを確認すると 5.5 だった。 公開するサーバのPHPバージョンは 7.1 だったので、バージョンアップすることにした際のメモ。 やりたいこと 手順 1. 新しいPHPをダウンロードする 2. XAMPP内のphpディレクトリをバックアップする 3. phpフォルダにダウンロードしたデータを入れる 4. php.iniを編集する 5. apacheのPHP設定を編集する 6. apacheの再起動後にPHPのバージョン確認 ハマったところ 参考 やりたいこと XAMPPのPHPのバージョンを 5.5 → 7.1以上にする。 手順 1. 新しいPHPをダウンロードする どうせならこの時の最新のPHPをダウンロードすることにした。 下記windows版PHPのダウンロードページにアクセスする。 http://windows.php.net/d

＜目次＞ ブラウザでのJavaScriptの処理の流れ イベント登録のタイミング async属性とdefer属性 async属性：非同期で読み込み開始し、読み込み完了後に実行 defer属性：非同期で読み込みDOM構築完了後に実行 注意 参考 ブラウザでのJavaScriptの処理の流れ サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。 ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。 windowオブジェクトは各ページまたはタブごとに生成されます。 windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。 Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり

＜目次＞ グローバルオブジェクトとは グローバルオブジェクトの役割 定数と関数 グローバル変数とグローバルプロパティ var演算子を伴う場合 var演算子を伴わない場合 両者の違い グローバルオブジェクトへのアクセス windowを明示しない方がわずかに処理が速い 参考 グローバルオブジェクトとは JavaScriptのコードはオブジェクトに格納されている必要があり、その格納するオブジェクトの最上位に位置する単一のオブジェクトがグローバルオブジェクトと呼ばれます。 すべてのJavaScriptの実装環境は必ず一つグローバルオブジェクトを持たなければなりません。 Webブラウザでの実装の場合「window」が、Node.jsの場合は「global」がグローバルオブジェクトとなります。 グローバルオブジェクトは明示して生成することができません。つまりnew演算子では作成できません。 グローバル

＜目次＞ thisとは何か thisの値の決められ方 グローバルコンテクスト内でのthis 関数内でのthis メソッド内でのthis 入れ子の関数でのthis コンストラクタ内でのthis call()メソッド、apply()メソッドでのthis アロー関数内でのthis thisの退避 まとめ 参考 thisとは何か JavaScriptでのthisは、関数内で使用されるキーワードで、関数が実行される際に値が設定されます。 このときに設定される値は関数を呼び出すオブジェクトへのリンクです。 別の言い方をすると、実行中の関数をプロパティ、もしくはメソッドとして保持するオブジェクトへの参照と言えますが、言葉だけでは説明しにくいのでコードを見てみます。 const taro = { age: 30, gender: '男性', getGender: function() { return t

＜目次＞ プロパティを参照して見つからない場合どのような処理が行われるのか プロトタイプチェーンを使うメリット prototypeプロパティ protoプロパティ protoプロパティは実際のコーディングで使用するのは要注意 プロトタイプチェーンは最初に見つけたプロパティを返す prototypeプロパティに新しいオブジェクトを定義するときの注意 constructorプロパティをつなげ直す方法 プロトタイプからプロパティを継承するインスタンスは常に最新の値を取得 prototypeプロパティを新しいオブジェクトに差し替えた場合、過去のインスタンスは更新しない プロトタイプ継承チェーン生成 参考 プロパティを参照して見つからない場合どのような処理が行われるのか オブジェクト内に存在しないプロパティを参照すると、すぐにundefinedを返さず、常にプロトタイプチェーンをたどって探します。

前回のtransitionに続き、animationについてもまとめておきます。 transitionよりも長くなりそうなので基本編と発展編に分けたいと思います。 まずは基本編から。 ＜目次＞ animationのできること 対応ブラウザ 各プロパティの概要・構文 animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation @keyframesの書き方 animationのイベント まとめ animationのできること transitionは変更前と変更後の2点を結ぶ機能なのに対して、animationでは