下記ページのざっくりとした翻訳。 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.t…
下記ページをざっくりとまとめます。 webpack.js.org 概要 問題点 cross-envの使い方
下記ページをざっくりとまとめます。 webpack.js.org Basic Setup Loader Source Maps Using Third Party Libraries Importing Other Assets
下記ページをざっくりまとめます。 webpack.js.org Output Filenames Extracting Boilerplate Module Identifiers
下記ページをざっくりまとめます。 webpack.js.org Example Frameworks
下記ページの要点をまとめていきます。 webpack.js.org Entry Points Prevent Duplication（重複を防ぐ） Dynamic Imports（動的インポート） async function を使う Prefetching/Preloading modules Bundle Analysis（バンドル分析）
下記ページの要点をまとめていきます。 webpack.js.org 本番サイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて説明。 セットアップ npm scripts webpack.common.js で設定済みのプロパティに、webpack.prod.js ある…
下記ページの要点をまとめます。 webpack.js.org また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp tree shakingとは 実際に試してみる tree shaking を有効にする 関数をexport するファイルを作る 関数を import す…
webpack.js.org 上記ページの要点をまとめていきます 概要 HMRはどのように機能するか 1. アプリケーションにおいて 2. コンパイラにおいて 3. モジュール内において 4. ランタイム（実行）時において はじめかた HMRの使い方 HMRを有効にする webpack.confi…
下記ページの要点になります。 webpack.js.org 開発時に役立つ機能のガイドページになります。 コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。 development mode source maps を使う 開発ツールの選択 watch モードを使う webpack-dev…
下記ページの要点をまとめていきます。 webpack.js.org ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。 概要 準備 エントリーポイントとアウトプットの設定を修正 HtmlWebpackPlugin…
今回は下記ページの要点をまとめていきたいと思います。 webpack.js.org CSSを読み込む 補足 画像の読み込み フォントファイルを読み込む csvやxmlなどのデータファイルを読み込む グローバルなアセット
個人ではなんとなくコピペで使っていたwebpack。 会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。 volいくつまで続…
前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケー…
久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ（Single source of truth） 2. stateは読み込み専用（State is read-only） 3.…
ブラウザにデータを保存するという役割でいうと、localStorage と cookie が代表的かと思いますが、localStorage はクライアント側のみで使える機能で、サーバからは扱えません。 そのためクライアントとサーバ間のデータのやり取りではcookieを使うことで手…
2019年はプレイベートでサービスを作りたいので、Node.jsの勉強を始めました。 サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション（掲示板）の中で問題が発生しました。 その内容は…
これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。 しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴…
表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。 事象 原因 最初のコード html css js 怪しいところを探る 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする マウスイベントを扱う場合…
APIモックサーバというと、json-server や swagger などが有名ですが、ただ fetch をしたいということであれば、gist を使うのが一番お手軽かもしれないのでメモしておきます。 作り方 とても簡単です。 Githubアカウントがなければ作成して、https://gist.g…
前回に続き、Async Function（async/await）の使い方について学びます。 今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。 Async Functionとコールバック関数の問題 Promiseだけ使ったケース Async Functionとコール…
Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。 async/await とは 簡単なサンプル Promiseを使った例 Async Functionを使った例 Async Functionの定義方法 Async Function の役割 Async Functionは常にPromiseインスタ…
ちょっとした小ネタを思いついたので書いておきたいと思います。 JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白（スペース）が開発者ツール上で見えたりして気になったりしないでしょうか？ <a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a> ▼ Chr…
以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。 kde.hateblo.jp ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。 Promiseと…
これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数（input） 第二引数（init） 戻り値 基本的なリクエスト＆レスポンスの取得 fe…
ES2015から使えるスプレッド演算子（Spread Operator）について理解がまとまっていないので、きちんとまとめておきたいと思います。 構文 関数呼び出しでの例 配列リテラルでの例 配列のコピー Objectリテラルでの例 レスト構文 分割代入でプロパティをまと…
配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理…
今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。 テンプレートリテラルとは タグとは タグを使ってテンプレートリテラル内の変数を大文字にする例 生の文字列にアクセスする Strin…
先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。 スライドは下記になります。 CSS Grid Layout の基礎 from KojiKobayashi14 …
今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。 今回は少し特殊な例ですが、複数の Provider を使ってのコンポーネントの連携のやり方を紹介しつつ、サンプルを作りながらReact + Reduxの実装を振り返りたい…
