2019-01-01から1年間の記事一覧
これまでSVGに関しては、アイコンやロゴをpngやgifなどのビットマップ画像の代わりに少し使う程度で、アニメーションに関してもCSSアニメーションやJavaScriptのDOMアニメーションで事足りていました。 しかしSVGのことをちゃんと知ってマイクロインタラクシ…
前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。 カウンターアプリ ver.1 コード(ファイル名押下でコード展開) redux container compon…
前回の mapStateToProp に続いて mapDispatchToProps の公式ドキュメントについても google 翻訳の力を借りて目を通したので、残しておきます。 react-redux.js.org
React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google …
ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感(?)を感じたので、現実から逃げずにちゃんと勉強していくことにしました。 今回は 下記公式ドキュメントを元に Context API について理解したいと思います。 ja.reactjs.org Context …
WEB+DB PRESS VOL.110 の特集「設計も、実装も、ここから始まる!名前付け大全」を読んだメモです。 第1章 「良い名前」とは何か なぜ名前付けが重要なのか 悪い名前の問題 理解が困難 勘違いが起こる 変更が難しい 読みにくい なぜ名前はあるのか 第2章 名…
下記ページのざっくりとした翻訳。 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の勉強を始めました。 サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション(掲示板)の中で問題が発生しました。 その内容は…