明日からはじめるフロントエンド：序破急 2.0.0
627 Views
April 27, 24
スライド概要
フロントエンドの世界に、フレームワークやライブラリの移り変わりが激しい、JavaScriptやTypeScriptから始めるべきか、HTML/CSSの理解が必要かなど様々な問題がある。しかしながら、これらを（できる限り）全て解決していき、開発者体験を効率的かつ効果的にすることで、フロントエンドに触れる人を一人でも増やしてみようというプレゼンテーションである。フロントエンドは、現在のWebを形成するために不可欠な技術であり、これまで様々な進化を遂げてきた。そして、それらを効果的かつ効率的に扱うためには、フロントエンドの世界を楽しく理解する必要がある。
おすすめタグ：Frontend,Web Development,JavaScript,TypeScript,React
札幌のウェブエンジニア
関連スライド
各ページのテキスト
明日からはじめるフロントエンド：序破急 2.0.0 1
自己紹介 西村航 / n13u 2002年札幌生まれ、札幌育ちのフロントエンド 大好きエンジニア Sapporo Engineer Base（やってました） Next.jsはApp Router派 宗派で言うとECMAScript教V8宗標準至上 派？ 2
今日は ゆるくやります…資料は一応20分もの 3
最近の話 10万円の車を買いました。4/28-29, 5/3-5/4で函館行きます。多分。 ブラウザを作ろうと思ってレキサーとパーサーのおべんつよしてます 気づいたらGWノヨテイガｳﾏｯﾃﾙ… 4
ESLintの eslint/create-config のcontribution やってます pnpm create @eslint/config でCLIからConfigファイルを作れます が、パッケージが古かったりするのでそこの修正やってます 5
注意事項 リサーチ前提ですが、足りない部分もあるかもしれません 随所に個人の感想が含まれます 6
フロントエンドとは？ 僕の中の定義だとこれ Webブラウザを実行環境あるいはOSと見立ててその制約環境下でアプリケーションやソフトウェ アの開発を行う領域 7
あれ…Node.jsとかDenoとかBunとかは…？ あくまでも個人的な感想だけど… その制約環境下でアプリケーションやソフトウェアの開発を行う の制約環境下という意味でいくと 当てはまる… けどDenoでバックエンドやCLIツールを作ると快適だよね〜みたいな話は別の話かな…？ というかNode.jsはそもそもバックエンドアプリケーション開発においてシングルスレッド＋ノンブ ロッキングI/Oが実現できるランタイムを作りたかったわけだし… 8
今日のお話… Webフロントエンドの世界に, Hello, World!するための指南をし ます（偉そう） 9
Webフロントエンドの難（しそうな）点 フレームワークやライブラリが多く、移り変わりが激しい JavaScriptを触るべき？TypeScriptから始めるべき？HTML/CSSの理解は必要？ React？宣言的UI？仮想DOM？ これらを（できる限り）全て解決していきながら、フロントエンド に触れる人を一人でも増やしてみようという取り組みです 10
なぜフロントエンドをやるの？ 現在のフロントエンドは1989年に誕生したWWWに端を発し、DOM APIとJavaScript、Ajax、 JSONなどさまざまなHTML/CSS/JavaScriptの進化によって生まれた領域です。とりわけ標準 化された技術の進歩とそれに適合してきたブラウザの進化がその背景にはあると考えています。 実行環境下は標準化かつ統一化されたHTML/CSS/JavaScriptのみという制約下で、それらに 直接触れることで開発者体験を損ねたり、表現力が乏しかったり、開発環境が不十分だったりと いう問題が生じします。れらの避けては通れない問題をより効率的かつ効果的に解決し、Web技 術を扱うための手段としてフロントエンドがあると考えています（個人談） ちなみに、フロントエンド史を勝手にまとめていたりしています。古いWebを知ることで今の Webのありがたみを知ろう。不必要なものは何もない。という考えに基づいて編纂しています。 フロントエンドをざっくり理解する Vol.1 | LTooL 11
序破急とは？ 日本の雅楽の舞楽から出た概念であり、序」が無拍子かつ低速度で展開され、太鼓の拍数のみを 定めて自由に奏され、「破」から拍子が加わり、「急」で加速が入るという三部構成を指す 序破急 - Wikipedia 今回の発表は三部構成で進んでいきますが、その前に前置きを… 12
フロントエンド情勢複雑怪奇なり フロントエンドという領域は明確な境界がなくかなり広いのが現状です。 ざっくりあげるだけでも以下の関心事があります。（これだけじゃないですが） 今回はフロントエンドの領域をJavaScriptを中心としたWeb技術に限定します。 JavaScript代替言語として複数言語が存在（TypeScript,ReScript,PureScript, CoffeeScript etc…） JavaScript実行環境が複数存在（Node.js,Deno,Bun,Cloudflare Workers） JavaScriptを解釈するJavaScriptエンジンが複数存在（V8,Hermes,JavaScriptCore,QuickJS etc…） JavaScriptのUI構築のためのライブラリが複数存在（React,Vue,Svelte…） それらライブラリを利用しやすくするためにルーティングやキャッシュ管理、状態管理の 機能を含めたUIフレームワークが複数存在（Remix,Next.js,Gatsby.js,Qwik,Astro etc…） ライブラリ周辺にもフォーム管理や型バリデーション、状態管理ライブラリなど複数ライ ブラリが存在する JavaScript組み込み型も含めた日付管理手法が複数存在（Date、Temporal etc…） そして、これらの選択肢が独立的で１つ学んでも他に応用ができないのがフロントエンドを難しく している要因です 13
序破急で学ぶフロントエンドのゴール フロントエンドフレームワークがTypeScriptで扱えるようになること 今回はVueをスコープから外しています（明示 駆け出しのフロントエンドエンジニアくらいのレベル感の知識が身に付くこと ⚠️Vueも１つの立派なフロントエンドUIライブラリですが、今回は触れません。 14
前提知識 今回想定している対象は、他言語でプログラミング言語に触れたことがあり、なんとなく一通り コマンドの操作ができる人を対象にしています。 Webサーバーを利用したクライアントサーバーモデルの仕組みを理解している 他言語での四則演算、関数宣言、関数呼出の知識があること 他言語でパッケージ管理システム（Gradle,Maven）に触れたことがあるとnpmの理解はしやすいで す コマンドを使う作業が前提です CLI上での操作に慣れてない人はまずここから cd ls cp mv mkdir touch を触ることができればOK 「状態」という言葉の意味がわかる 初学者の人は、一旦アプリケーションが注目しているデータ＝状態くらいの認識でいてく ださい 途中で改めましょう 15
前提環境 エディタはVisual Studio Code Node.jsはインストール済 nvmを利用してインストールすることを推奨します パッケージマネージャー npmを使うのが最初は良いです 慣れてきたらyarnやpnpmを使いましょう npm,yarn,pnpmのそれぞれの違いがわかるようになってくる頃には理解が大きく進むは ずです 基本的にESModules前提です リンタやフォーマッターについて フロントエンドに長期的に携わりたい人は積極的に触れましょう ESLint + Prettier がベストプラクティス ESLintでさまざまなルールを追加し、Prettierで最後に上書き 16
序： HTML+CSS+JavaScriptに慣れ親しもう① HTMLがCSSとJavaScriptを読み込む仕組みを理解する index.html,index.js,style.cssを作成し、ローカルサーバーでファイルを読み込みサイトを開こう button をクリックするとアラートが出るWebサイトを作ってみよう getElementById + addEventListner の組み合わせを理解しよう script タグ, link タグを利用したファイル読み込みを理解することが目標です 読み込んだ順番にJavaScript もう１つはGoogle Chromeの開発者ツールを使ってWebサイト/Webアプリケーションをデバッグ するやり方を学びましょう 17
序： 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>
18
序： HTML+CSS+JavaScriptに慣れ親しもう①
index.js
var button = document.getElementById('greeting')
button.addEventListner('click', function(event) {
event.preventDefault();
window.alert('Hello!')
}
19
序： HTML+CSS+JavaScriptに慣れ親しもう① style.css main { width: 100%; background-color; #eeffee; } 20
序： 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を最初から読み込み直すと状態がリセットされます。 21
破: JSX+Reactで書くリアクティビティ＋宣言的UI ここからはReact+JSXを使っていきます。macOS標準のメモ帳アプリ的なものを作ってみるのがお すすめです ReactやJSXを本格的に扱いたい場合、npmとそのエコシステムを活用することが必要になってきま すが、ここの理解に時間を取られたく無い場合は、CLIを使いましょう npm create vite@latest --template react Reactが動くプロジェクトフォルダが 作られます 詳しく理解したい人は上記プロジェクト package.json の中身が理解できるようになる とGoodです！ React / JSX の説明については次のページへ👉 22
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))) みたいなこと
23
JSXとは？ JavaScript XML の略称で、JavaScript上でXMLを記述でき、あたかもHTMLを書いているように JavaScript上でHTMLの構造を記述できる記法です HTMLではなく、XMLなので閉じタグが必要です。 <tagName /> と書くのはそれが所 以。 Reactでは、関数コンポーネントの糖衣構文（書きやすくした書き方）として独自定義したコンポー ネントの呼び出しをHTMLタグのように記述して呼び出せます function Title(props) { const {children} = props return <h1>{children}</h1> } function Layout() { return <main><Title>Hello</Title></main> } 24
破: JSX+Reactで書くリアクティビティ＋宣言的 UI① React v18現在以下のようなマインドで開発に取り組むと良いです 1ファイル=1関数=1コンポーネントを意識する（定数や特定用途のutil関数などをファイ ル内に含めるのは個人的にはOK派です） in source testing とかもありますが一旦無視 React Hooks は避けては通れません React Hooks=Reactのコンポーネントの持つ機能、コンポーネントの外へ アクセスするAPIみたいなもの 公式ドキュメントを読むのがおすすめですが、最初にこれを読むと挫折します。 useStateなどの詳しい仕組みを知りたかったらこれをみましょう。 パフォーマンスチューニングに興味がある人は上記ドキュメントの読み込み とuseMemoあたりの理解が必須です。 手を動かしたい人は公式チュートリアルがおすすめです 三目並べ 非同期処理はこの段階でなるべく行わないことをオススメします 25
破: JSX+Reactで書くリアクティビティ＋宣言的 UI② アプリケーション全体で状態管理をしたい場合は、無理せずにReact Contextを使いましょう 状態管理ライブラリはより大きいアプリケーションでない限りは標準機能推奨派です React Server Componentsについては一旦置いておいて良いです useEffectを使わずに、useStateだけで機能を書くことに集中するのがおすすめです useEffectについては公式がアンチパターンを出しています そのエフェクトは不要かも 26
閑話休題 そういえばReact 19 Beta出ましたね actionsによって非同期系の処理が楽になる？ useActionState とか useOptimistic とかちょい気になり use フックきましたね〜 RSC周りは徐々に動きそうですね ref がpropなりました！ Metaタグいる？ 27
破: JSX+Reactで書くリアクティビティ＋宣言的UI ここまでの知識を活かしてmacOS標準のメモ帳ライクなアプリケーションが書けるようになってきた ら十分です ESLintなどのリンターや、Vite以外のバンドラー、npm以外のパッケージマネージャー など少しずつ手を広げ始めるのがお勧めです Formの状態管理が面倒になってきたなと感じたら、ReactHookFormなどに触れてみるのをおすす めします 28
急: 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のありがたみはサーバーサイドとの通信を前提とし ている部分が多いので… 29
急: TypeScript+フレームワークを利用したアプリケ ーション開発に挑戦してみよう ここまで来ればフロントエンドをどこまででも楽しめます 楽しみ方の一例 JavaScript実行環境を一通り試してみる ESLintのカスタマイズに精を出す 頑張って最後までアプリケーションを１つ作ってみる 他Webフレームワークと組み合わせて使ってみる またメンタルモデルの理解をこのあたりからすることをお勧めします CSRで動くSPA SSRで動くMPA/SPA ISRで動くMPA などなど… 30
序破急振り返り どうでしょうか？明日からフロントエンド始められそうですか？ 改めて振り返りですが全部「HTML/CSS/JavaScript」です。困った時は立ち返りましょう フロントエンド領域が広いですが、１歩１歩着実に進めればある程度の範囲はカバーできます 札幌でフロントエンドの輪を広げていきたいですね 31
宣伝 札幌でフロントエンドの輪を広げていきたいですね… 32
フロントエンドカンファレンス北海道やります！ 8/23-8/24でやります！ 31件のプロポーザルがきております（目CountUp👀 ） 5/2にプロポーザルを出すためのもくもく会をやります！ 「集まってわいわいフロントエンドカンファレンス北海道2024にプロポーザルを出す会 | 検索」 33
ご清聴ありがとうございました！ 34