TypeScript
gulp
vue.js
webpack
pug

「Webサイト用」モダン開発環境の考察

社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。

なんとなくで読んでください。


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)でできる。


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


パフォーマンス施策


  • リクエストを減らす


    • webpackによる、ファイルのバンドル&画像のbase64エンコード



  • 体感的な速さの獲得


    • inline CSSを設定



  • CSS・JavaScriptの非同期読み込み、画像の遅延読み込み