社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。
なんとなくで読んでください。
Index
- 「Webサイト用」モダン開発環境
- パフォーマンス施策
「Webサイト用」モダン開発環境
Webサイト制作において必要な条件
モダンな技術を採用しつつ、今までの案件で使える
- SPAではなくWebサイトに対応
- HTMLファイルが各ページで存在している
-
head内の情報が直接書かれている
- きれいなHTML
- minifyされていない
- Nuxt.jsのgenerateみたいに、最適化されすぎていない
変えたいもの
- 脱Gulp
- Gulp -> npm scripts（タスクランナー）
- Gulp -> webpack（バンドラー、トランスパイラー）
- jQuery -> Vue.js & Vanilla.js
- ES2015+ -> TypeScript（Classベース）
- EJS -> Pug
脱Gulp（Gulpをやめる理由）
- Gulp関連の開発が停滞気味。
- Gulpパッケージは、npmパッケージに依存している場合が多いが、アップデートに対応してくれる保証はない。
- Gulpの知識は、スケールしない。
- まあ、JavaScriptの勉強になるかもだが。
Gulpの代わりになるもの
- npm scripts
- npmパッケージを直接使える。
- Node.js（Server Side JavaScript）の勉強になる。
- webpack
- 開発が活発
- ES Modulesが便利（ES Modulesは、今後ネイティブでも実装される）
- ビルドが優秀（Gulpではバンドルや依存解決は難しい）
jQuery -> Vue.js & Vanilla.js
jQueryは素晴らしい。
- jQueryのメリット
- セレクタが扱いやすい
- 便利なメソッドが盛りだくさん
- エコシステムが豊富
- 社内の知見がいっぱい
が、エンジニアとして、頼りすぎてはいけない。
「jQueryはいらない。エンジニア強度が下がるから」
jQueryでできることは、Vue.jsとVanilla.js（library）でできる。
- 脱jQueryのためのメモ
- どちらも使えるに越したことは無い
Vue.jsのメリット
- 仮想DOMによる描画の最適化
- 複雑になると、jQueryよりわかりやすい
- HTMLから処理が予想しやすい
- コンポーネントによる、効率的な開発
- オブジェクト指向、コンポーネント指向の勉強になる
- Vue.js devtoolが鬼便利
使い分けのお薦め
- 複雑な処理がないページ：Vanilla.js（jQuery.min.js 約87KBの節約）
- 複雑なページ：Vue.js
- JavaScriptが苦手な人（デザイナー等の非エンジニア）との共同開発：jQuery
- JavaScriptで勝負しない人：jQuery
ES2015+ -> TypeScript（Classベース）
- TypeScriptはJavaScriptのスーパーセットなので、別に書かなくても良い
- 静的型付けによる、チェックが便利
- Microsoftが開発しているため、VS Codeと相性が良い
- Classの機能が、ES2015+より豊富
- Googleの標準言語に採用される
EJS -> Pug
- タグの閉じ忘れがない
- EJSより見やすい
- JavaScriptが書きやすい
- コンポーネント指向で作りやすい
- Vue.jsとの相性が良い
- Github Star （2018.9.17時点）
- EJS: 2802
- Pug: 17,223
使い分けのお薦め
- シンプルなページ：Pug
- 複雑なページ：Pug
- 小中〜大規模なページ：Pug
- おれ、HTMLしか知らない：EJS