ゼロから始めるフロントエンドモジュール開発についてあれこれ

Transcript

1. ゼロから始めるフロントエンドモジュー ル開発についてあれこれ SOSUKE YAMADA FREELANCER
2. 主な仕事 WEB系のバックエンドの製造 /設計をメインフィールドとして活動しています。主に Laravelを基本としたPHPでの Webサイトの構築に携わっています。案件によっては要件定義書の作成やプロジェクトマネージメントなども状 況に応じて行います 好きな言語 LISP 学生の頃に学びそれまでに学習していた C言語やJavaと言った言語とは根本的な発想が違っていたのが印象 的でした これからやりたいこと フロントエンドについての技術の深堀とマイクロサービスアーキテクトについて フロントエンドでの Node.jsやSPA,SSRと言った技術の根本的な動作原理についての理解を深めているところで す。その後マイクロサービスアーキテクトについての理解を深めていき、最終的には様々なアーキテクトを現場 のニーズに応じて取捨選択できるようになって行けたらと思います
3. モジュール開発 ってなんぞや？ 処理をモジュール単位で分割して管理し開発を行うこと ・jQueryしか知らん ・webpackって言葉は聞いたことはあるけど... ・npm run devしたらとりあえずapp.jsができてその中にコンパイルされたソース コードがあるんでしょ
4. モジュール開発 疑問 そもそもインタプリタ型言語のJavaScriptをなんで一々コンパイルするの? 別にファイルにjsファイル内で別のjsファイルを読み込ませなくても、html上でsrcタグ使っ て読み込ませたらいいよね jQueryがCDNで読み込まれてたらそれでいいだろ・・・
5. なんでモジュール開発をするの? MDN曰く 参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules JavaScript のプログラムはとても小さいものから始まりました。初期の用途は、必要に応じてウェブページにちょっとした対話的な機 能を追加する独立したスクリプト処理がほとんどであったため、大きなスクリプトは通常必要ありませんでした。 そして何年かが過ぎ、今や大量の JavaScript を持つ完全なアプリケーションをブラウザーで実行することはもちろん、JavaScript を 他のコンテキスト (例えば Node.js) で使うこともあります。 それゆえ近年は、JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるよう になってきました。
6. なんでモジュール開発をするの? まとめ ・ブラウザでのスクリプト処理が肥大化してきたため。(コード内での依存関係が発生, 名 前空間の煩雑化, 処理を複数の箇所で再利用したい) ・ブラウザー以外でJavaScriptを利用するケースが出てきたりもしている。(Node.jsなど)
7. モジュール開発するために 1. ソースをモジュール単位で分割して管理。モジュールを別のソース内で読み込みを 行うことができるようにすること(CommonJS, ES Modules, AMD) 2. モジュールの読み込みはブラウザ上では対応していないためモジュールハンドラー を利用してビルドする必要がある(webpack, Browserify, RequireJSなど)
8. コードの読み込み モジュールの読み込み方には複数の形式がある commonJS 読み込み: require(‘aaa’) モジュール定義: module.exports = function() {...} ES modules 読み込み: import aaa from ‘aaa’ モジュール定義: export default function() {...} ＊CDNを利用しており、CDNがモジュールと依存関係を持っている場合は commonJSを利用して読み込ませた方が良い。 (読み込みファイルの順番に前後関係を作れるため )
9. ビルド ・バンドルファイルの依存関係を解決し、ファイルのモジュールを1つのファイルに集約し てくれる ・コードの圧縮を行ってくれる ・Vue.jsやReact.jsなどで作成されてjsファイル以外のコードを解析しJavaScriptとして解 釈。jsファイルとしてビルドする ・コードを過去のECMAScriptトランスパイルすることができる
10. ビルド Webpackが好まれるのは？ モジュールを分割してビルドすることができる 利用箇所が限られるモジュールについては分割してビルドすることができる 例えばVue.jsやjQueryなどはコア機能として全ての画面で読み込ませるが動的処理に ついては各画面の分割したファイルを読み込ませて対応するなど ホットリロードに対応している ホットリロードとは起動したプログラムのソースコードを監視し変更が行われた時にリアルタイ ムで反映を行う (Webpackを利用しているStorybookはホットリロードにより起動する)
11. ご静聴ありがとうございました Thank You!!