明日からはじめるフロントエンド：序破急
2.4K Views
March 31, 24
スライド概要
この発表は、フロントエンドを広く理解するための活動に焦点を当てています。フレームワークやライブラリが多く、移り変わりが激しいこと、JavaScriptを触るべきか、TypeScriptから始めるべきか、HTML/CSSの理解が必要か、Reactや宣言的UI、仮想DOMなどの解決すべき点があります。フロントエンドを避けることはできないため、フロントエンドを効率的に扱うための手段としてフロントエンドに取り組む人を増やすことが目的です。フロントエンド理解に役立つ情報を提供し、フロントエンドに取り組む人を増やすことが目的です。
札幌のウェブエンジニア
関連スライド
各ページのテキスト
明日からはじめるフロントエンド：序破急 1
自己紹介 西村航 / n13u 2002年札幌生まれ、札幌育ちのフロントエンド 大好きエンジニア 本イベントの主催・Sapporo Engineer Base 運営 Next.jsはApp Router派 産湯はジャスマックプラザ湯香郷 by @miu_crescent 2
注意事項 リサーチ前提ですが、足りない部分もあるかもしれません 随所に個人の感想が含まれます 3
フロントエンドとは？ みなさん0yuさんの発表聞いてわかりましたね？ 4
Webフロントエンドの難（しそうな）点 フレームワークやライブラリが多く、移り変わりが激しい JavaScriptを触るべき？TypeScriptから始めるべき？HTML/CSSの理解は必要？ React？宣言的UI？仮想DOM？ これらを（できる限り）全て解決していきながら、フロントエンド に触れる人を一人でも増やしてみようという取り組みです 5
なぜフロントエンドをやるの？ 現在のフロントエンドは1989年に誕生したWWW(World Wide Web)に端を発し、DOM APIと JavaScript、XMLHttpRequestなどの登場によりHTML/CSS/JavaScriptの進化によって生まれ た領域です。 元を正すと全てはHTML/CSS/JavaScriptであるものの、それらを直接触ることが開発者体験を損 ねたり表現力が乏しかったり、サーバーサイドで動く実行環境がなかったり、パッケージマネージャ ーが必要だったりとできた経緯にはそれなりの理由があります。 それらの上に立ち、避けては通れないWeb技術をより効率的かつ効果的に扱うための手段としてフ ロントエンドがあると考えています（個人談） ちなみに、フロントエンド史を勝手にまとめていたりしています。古いWebを知ることで今のWebの ありがたみを知ろう。不必要なものは何もない。という考えに基づいて編纂しています。 フロントエンドをざっくり理解する Vol.1 | LTooL 6
序破急とは？ 日本の雅楽の舞楽から出た概念であり、序」が無拍子かつ低速度で展開され、太鼓の拍数のみを定め て自由に奏され、「破」から拍子が加わり、「急」で加速が入るという三部構成を指す 序破急 - Wikipedia 今回の発表は三部構成で進んでいきますが、その前に前置きを… 7
理解のための前置き フロントエンドという領域は明確な境界がなく、かなり広いのが現状です。 ざっくりあげるだけでも以下の関心事があります。 今回はフロントエンドの領域をJavaScriptを中心としたWeb技術に限定します。 JavaScript代替言語として複数言語が存在（TypeScript,ReScript,PureScript etc…） JavaScript実行環境が複数存在（Node.js,Deno,Bun,Cloudflare Workers） JavaScriptを解釈するJavaScriptエンジンが複数存在（V8,Hermes etc…） JavaScriptのUI構築のためのライブラリが複数存在（React,Vue,Svelte…） それらライブラリを利用しやすくするためにルーティングやキャッシュ管理、状態管理の 機能を含めたUIフレームワークが複数存在（Remix,Next.js,Gatsby.js,Qwik,Astro etc…） ライブラリ周辺にもフォーム管理や型バリデーション、状態管理ライブラリなど複数ライ ブラリが存在する JavaScript組み込み型も含めた日付管理手法が複数存在（Date、Temporal etc…） そして、これらの選択肢が独立的で１つ学んでも他に応用ができないのがフロントエンドを難しくして いる要因です 8
序破急で学ぶフロントエンドのゴール フロントエンドフレームワークがTypeScriptで扱えるようになること 今回はVueをスコープから外しています（明示（ 駆け出しのフロントエンドエンジニアくらいのレベル感の知識が身に付くこと ⚠️Vueも１つの立派なフロントエンドライブラリですが、今回は触れません。 9
前提知識 今回想定している対象は、他言語でプログラミング言語に触れたことがあり、なんとなく一通りコマ ンドの操作ができる人を対象にしています。 Webサーバーを利用したクライアントサーバーモデルの仕組みを理解している 他言語での四則演算、関数宣言、関数呼出の知識があること 他言語でパッケージ管理システム（Gralde,Maven）に触れたことがあるとnpmの理解はしやすいで す コマンドを使う作業が前提です CLI上での操作に慣れてない人はまずここから cd ls cp mv mkdir touch を触ることができればOK 「状態」という言葉の意味がわかる 初学者の人は、一旦アプリケーションが注目しているデータ＝状態くらいの認識でいてく ださい 途中で改めましょう 10
前提環境 エディタはVisual Studio Code Node.jsはインストール済 nvmを利用してインストールすることを推奨します パッケージマネージャー npmを使うのが最初は良いです 慣れてきたらyarnやpnpmを使いましょう npm,yarn,pnpmのそれぞれの違いがわかるようになってくる頃には理解が大きく進むは ずです 基本的にESModules前提です リンタやフォーマッターについて フロントエンドに長期的に携わりたい人は積極的に触れましょう ESLint + Prettier がベストプラクティス ESLintでさまざまなルールを追加し、Prettierで最後に上書き 11
序： HTML+CSS+JavaScriptに慣れ親しもう① HTMLがCSSとJavaScriptを読み込む仕組みを理解する index.html,index.js,style.cssを作成し、ローカルサーバーでファイルを読み込みサイトを開こう button をクリックするとアラートが出るWebサイトを作ってみよう getElementById + addEventListner の組み合わせを理解しよう script タグ, link タグを利用したファイル読み込みを理解することが目標です 読み込んだ順番にJavaScript もう１つはGoogle Chromeの開発者ツールを使ってWebサイト/Webアプリケーションをデバッグ するやり方を学びましょう 12
序： HTML+CSS+JavaScriptに慣れ親しもう①
index.html
<html>
<head>
<link rel="./style.css">
</head>
<body>
<main>
<h1>Hello, World!</h1>
</main>
<button id="greeting">Greeting</button>
</body>
<script src='./index.js'></script>
</html>
13
序： HTML+CSS+JavaScriptに慣れ親しもう①
index.js
var button = document.getElementById('greeting')
button.addEventListner('click', function(event) {
event.preventDefault();
window.alert('Hello!')
}
14
序： HTML+CSS+JavaScriptに慣れ親しもう① style.css main { width: 100%; background-color; #eeffee; } 15
序： HTML+CSS+JavaScriptに慣れ親しもう② HTML・CSS・JavaScriptだけでデータ保存機能の無いTODO アプリを作ってみよう ここからはNode.jsを使ってみましょう vite を使ってJavaScriptを書き、2024年3月現在のファイルベースのモジュールシステムを理解し ましょう vite は複数に分けて書いたJavaScriptファイルを１つにまとめるバンドラーです vite は開発者用のローカルWebサーバーも含まれています。プロジェクトのディレクト リ上で、 npm run dev コマンドを使い開発者用サーバーを立ち上げてみましょう import``export を利用したモジュールの切り分けに挑戦してみましょう 他のバンドラーを試すのは「急」以降がおすすめです npm create vite@latest --template vanilla でテンプレートからプロジェクトフォルダを作っ てくれます 作成されたフォルダの style.css , main.js , counter.js , index.html を見てみましょ う ブラウザ上で動くJavaScriptだけでデータを保存することは基本的にしません。 ⚠️ そのためTODOアプリはページをリロードし、JavaScriptを最初から読み込み直すと状態がリセットされます。 16
破: JSX+Reactで書くリアクティビティ＋宣言的UI ここからはReact+JSXを使っていきます。macOS標準のメモ帳アプリ的なものを作ってみるのがお すすめです ReactやJSXを本格的に扱いたい場合、npmとそのエコシステムを活用することが必要になってきま すが、ここの理解に時間を取られたく無い場合は、CLIを使いましょう npm create vite@latest --template react Reactが動くプロジェクトフォルダが 作られます 詳しく理解したい人は上記プロジェクト package.json の中身が理解できるようになる とGoodです！ React / JSX の説明については次のページへ👉 17
Reactとは？
宣言的にUIを記述し、リアクティビティプログラミングができるJavaScript製Web向けUIライブラリ
リアクティビティプログラミングとは：値の変更やイベント（クリックやホバーなど）に反応して画
面の更新やデータの読み書きを発生させる書き方のプログラム
宣言的とは：求めている結果をそのまま書くことで、実現できること
命令的に記述されたUI、最後の結果ではなく結果に至るまでの手順を記述する
const countPlusButton = getElementById("count-plus-button");
const countIndicator = getElementById("count-indicator");
countPlusButton.addEventListner('click', (event) => {
event.preventDefault()
const prevCount = parseInt(countIndicator.innerText);
countIndicator.innerText = prevCount + 1
})
宣言的に記述されたUI、最後の結果と目的となる動作を記述するだけでUIが表現される
function Counter() {
const [count,setCount] = useState(0)
return (
<p>{{ count }}</p>
<button onClick={() => { setCount(prev => prev + 1) }}>+</button>
)
}
コンポーネント指向で、1つの関数が状態を引数をとしてけ取りその結果となるUI（HTML）を返却
し、関数が関数を呼び出す形で画面が構成されます ui = f(state)
ui = layout(main(counter(countState))) みたいなこと
18
JSXとは？ JavaScript XML の略称で、JavaScript上でXMLを記述でき、あたかもHTMLを書いているように JavaScript上でHTMLの構造を記述できる記法です Reactでは、関数コンポーネントの糖衣構文（書きやすくした書き方）として独自定義したコンポー ネントの呼び出しをHTMLタグのように記述して呼び出せます function Title(props) { const {children} = props return <h1>{children}</h1> } function Layout() { return <main><Title>Hello</Title></main> } 19
破: JSX+Reactで書くリアクティビティ＋宣言的UI React v18現在以下のようなマインドで開発に取り組むと良いです 1ファイル=1関数=1コンポーネントを意識する（定数や特定用途のutil関数などをファイ ル内に含めるのは個人的にはOK派です） React Hooks は避けては通れません React Hooks=React useEffectを使わずに、useStateだけで機能を書くことに集中するのがおすすめです useEffectについては公式がアンチパターンを出しています そのエフェクトは不要かも 公式ドキュメントを読むのがおすすめですが、最初にこれを読むと挫折します。 useStateなどの詳しい仕組みを知りたかったらこれをみましょう。 パフォーマンスチューニングに興味がある人は上記ドキュメントの読み込み とuseMemoあたりの理解が必須です。 手を動かしたい人は公式チュートリアルがおすすめです 三目並べ 非同期処理はこの段階でなるべく行わないことをオススメします アプリケーション全体で状態管理をしたい場合は、無理せずにReact Contextを使いま しょう 状態管理ライブラリはより大きいアプリケーションでない限りは標準機能推 奨派です React Server Componentsについては一旦置いておいて良いです
20
破: JSX+Reactで書くリアクティビティ＋宣言的UI ここまでの知識を活かしてmacOS標準のメモ帳ライクなアプリケーションが書けるようになってきた ら十分です ESLintなどのリンターや、Vite以外のバンドラー、npm以外のパッケージマネージャー など少しずつ手を広げ始めるのがお勧めです Formの状態管理が面倒になってきたなと感じたら、ReactHookFormなどに触れてみるのをおすす めします 21
急: TypeScript+フレームワークを利用したアプリケ ーション開発に挑戦してみよう
この辺りからNext.jsなどのフレームワークを扱っていくのがおすすめです Next.jsの場合は npx create-next-app@latest でプロジェクトフォルダを作って、 まずはフォルダを眺めましょう また、公式ドキュメントは必読です。Building Your ApplicationのRouting、 Renderingはしっかり細部まで読み込みましょう。非同期通信を行うアプリケーション を書きたい方はData FetchingとCacheingは必読です（Next.jsはデフォルトでキャッシ ュが有効化されているためドキュメントを読まないと沼にハマります） TypeScriptも触り始めましょう TypeScriptは動的型付け言語であるJavaScriptだけでは足りない言語機能を補い、静的 型付けの仕組みを導入したスーパーセットです。 JavaScriptのコードは全てTypeScriptで動くことを想定して、TypeScriptは作られてい ます 実際にブラウザで動くプログラムはJavaScriptなため、TypeScript→JavaScriptにコン パイルする仕組みを持っています TypeScriptを学びたい人は サバイバルTypeScript を一通り読むのがおすすめです 作るもののゴールとしてはバックエンドが別にあるECサイトやホテルなどの予約システムを作ってみ るのがおすすめです 本当は予約システムとかもバックエンドで自作するとかなりレベルが高まる気がします。 特に昨今話題のNext.js App Routerのありがたみはサーバーサイドとの通信を前提とし ている部分が多いので… 22
急: TypeScript+フレームワークを利用したアプリケ ーション開発に挑戦してみよう ここまで来ればフロントエンドをどこまででも楽しめます 楽しみ方の一例 JavaScript実行環境を一通り試してみる ESLintのカスタマイズに精を出す 頑張って最後までアプリケーションを１つ作ってみる 他Webフレームワークと組み合わせて使ってみる またメンタルモデルの理解をこのあたりからすることをお勧めします CSRで動くSPA SSRで動くMPA/SPA ISRで動くMPA などなど… 23
序破急振り返り どうでしょうか？明日からフロントエンド始められそうですか？ 改めて振り返りですが全部「HTML/CSS/JavaScript」です。困った時は立ち返りましょう フロントエンド領域が広いですが、１歩１歩着実に進めればある程度の範囲はカバーできます 札幌でフロントエンドの輪を広げていきたいですね 24
ご清聴ありがとうございました！ 25