Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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の非同期読み込み、画像の遅延読み込み
otsukayuhi
ゆめみ所属のフロントエンドウェブデベロッパーです。藤子・F・不二雄先生を尊敬する、キーボードマニアでもあります。
https://otsukayuhi.app/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away