React復習がてら要点をまとめていく。 Single source of truth Reactでの状態（state）管理は、一つのソースで行わないといけない。これがSingle source of truthと言われるものである。 あるlocal stateを持ったコンポーネントを複数読み込んでその親もstat…

React復習がてら要点をまとめていく。 外部ファイルの配列形式のデータを読み込んできて、画面に表示する例。 要点整理 Conditional renderingをするときは、returnするブロックを別メソッドで分けておくとやりやすい。 読み込むデータに対してgetter, sette…

React復習がてら要点をまとめていく。 環境構築 Starter Kit create-react-appをグローバルでインストールして、スターターファイルを立ち上げる。 create-react-app counter-app ちなみに、スターター系は公式ドキュメントStarter Kits – Reactにもまとめら…

モジュールでの型宣言とimport ES Moduleで他ファイルに型宣言したものを読み込ませることができる。 // Interfaces.ts export interface Person { name: string; age?: number; } enum Job { WebDev, WebDesigner, PM } export default Job; // index.ts im…

デフォルト引数の活用 次のようなファンクションを定義する。 const sayWord = (word: string): string => { console.log(word); return word; }; sayWord('hoge'); sayWord(); TSでは引数と返り値に対してこのような型指定の形式を取る。 するとVanillaJSの…

JavaScriptの型付けは動的に行われているので、暗黙の型変換や型の認識（Truthy / Falsy）などが行われてしまう。 そこで必要なのが、JavaScriptのスーパーセット（Superset）であるTypeScriptによる静的型付けである。 ParcelによるTypeScript実行環境の構…

グローバル変数のファイル間共有 jQueryなどのライブラリをJSファイル側で毎回読みこむのが面倒であるときに有効なのが、 webpack.common.js に webpack モジュールからプラグインを読み込ませる方法だ。 webpack.common.js const webpack = require('webpac…

Tree shaking 使用していないdead codeを読み込むことはファイルサイズの増大につながり、適切ではないであろう。 Webpackにおいて、例えばライブラリやファンクションを読み込んでいるのに一切使っていない場合は、 デフォルトのproductionモードでは、dist…

WebpackなどのフロントエンドDevOps的な分野は、なかなか面倒なイメージで今まで避けてきた部分だったので、改めてゼロからしっかりと学んでみる。 Webpack学習の問題点 初学者にとっていきなり理解するのは難しい。実践が必要 無関係なこともブラックボック…