フロントエンド事情.pdf

Transcript

1. 最近のフロントエンド事情 株式会社 add more koji yamauchi
2. 本書の対象 • 運⽤などで、少しHTMLとCSSを書くことがある • コードを書くことはないが、コミュニケーションの上で前提知 識は少しある • 10年前くらいに業務でコードを書いていたが最近の事情をしら ない 1
3. 質問 モダンなフロントエンドコーディングっ て何を学べばいい︖ 2
4. 回答 正直なところ、わからない。 3
5. というのも、 • フロントエンド界隈の変化のスピードと周辺技術の多さなど、 混沌としている • どこをターゲットにするかにもよる （皆がモダンな技術にシフトできているとは限らないし、事情によって最適解が異なる） ͨͩɺը໘ʹը૾ ͱจࣈΛग़͍ͨ͠ ͚ͩͳͷʹʂʂ 4
6. ECMAScript jQuery Vue.js Nuxt.js Next.js React.js npm Node.js nvm nodenv nodebrew Volta Sass Less Stylus PostCSS PWA JavaScript TypeScript Astro TSX JSX BEM OOCSS Angular Jamstack Headless CMS पลٕज़΍બ୒ࢶ͕ ଟ͗͢Δʂ Webpack yarn 5 Vite Turbopack Pug StoryBook
7. なので、ここでは進むべき道を 仮に1本だけ選んで解説 ※ 仮定した道筋の話なので、これに合致しない案件は⼭程あります。 （というより、ほとんどが合致しない） 6
8. 20XX BEM 7
9. Զ͸͓લͷࣄ৘ʹ ؔ৺΋ͳ͍͠ɺӨڹ΋Ͷ͐ʂ スタイルクローズドの原則 コンポーネント前提の社会へ Atomic Design ݪࢠϨϕϧ·Ͱ คʑʹͯ͋͛͠ΔΘɻ Level1〜Level5まで粒度を 分割してデザイン .class_name1 → .f3aed59_class_name1 ⾃動でクラス命名変換 お互いが⼲渉しない 完全に分離したスコープでの スタイル定義に 8
10. ユーティリティファーストCSSの台頭 ηϚϯςΟοΫͳ)5.-͕Ϟμϯʁ ͋Μͳ΋ͷͰ΍͍ͬͯ͘ͷ͸ແཧ͡Όͳ͍ʁ ͦΕͰϝϯςφϯεੑ͕͋Δͬͯʁ ӕͰ͠ΐͦΕɻ 9
11. ͜͏ॻ͍ͪΌ͍ͳΑɻ 画⾯表⽰ これまでのHTML これからのHTML（ユーティリティファースト） 10
12. ӕͰ͠ΐʁ ͜ΜͳΜͷϝϯςφϯεͰ͖Δͷʁ ίʔυ΋ृ͗͢ͳ͍ʁ 11
13. ·͊ɺ܅ͷؾ࣋ͪ͸Θ͔ΔΑɻ ࣮ࡍʹࢼͯ͠ΈΔͱΘ͔Δ͚Ͳɺ Լهͷྑ͍͜ͱ͕͋ΔΑɻ ɾ$44໊Λߟ͑ͳͯ͘ྑ͘ͳΔ ɾ$44ͷංେԽΛආ͚ΕΔ ɾ҆શʹมߋͰ͖Δ ϝϯςφϯεੑͷ৺഑͸ɺ ϞμϯͳϑϩϯτΤϯυίʔσΟϯάͰ ͋Ε͹ίϯϙʔωϯτʹ෼ׂ͞Ε͍ͯͯ ࠶ར༻͞ΕΔ͠ɺ$44Ϋϥεͷࢦఆ͕ ৑௕ʹͳΔͷ͸ڐ༰Ͱ͖Δ͸ͣͩΑɻ ʢ3FBDUͱ͔7VFͱ͔ʣ 12
14. あのね。 皆がみんなJavaScriptごりごりの SPAつくりたいわけじゃないんだよ。 私達はふつーに、ただ⽂字と画像を並べて、 ちょっと装飾をつけたいだけなの。 ReactとかVueとか、装備が⼤きすぎるの。 13
15. そこで、 ですよ。 Astroは、コンテンツにフォーカスした⾼速なWebサイトを構築するための オールインワンWebフレームワークです。 l コンポーネントアイランド︓ ⾼速なウェブサイトを構築するための新しいウェブアーキテクチャー。 l サーバーファーストのAPI設計︓ ユーザーのデバイスから⾼コストのハイドレーションをなくします。 l デフォルトでゼロJS︓ サイトを遅くするJavaScriptランタイムオーバーヘッドはありません。 l エッジ対応︓ DenoやCloudflareのようなグローバルなエッジを含め、どこでもデプロイできます。 l カスタマイズ可能︓ Tailwind、MDX、その他100以上のインテグレーションから選択可能です。 l 特定のUIに依存しない︓ React、Preact、Svelte、Vue、Solid、Litなどをサポートします。 14
16. ΍ͬͺΓɺ૷උ͕େ͖͗͢Δؾ΋͢Δ͚Ͳɻɻ աڈͷ஌͔ࣝΒ͢Δͱɺग़ͯ͘Δ࿩͕ ͢΂ͯࠇຐज़ʹ͔͠ݟ͑ͳ͍ɻ ҰମɺͲͷΑ͏ʹ޲͖߹͑͹͍͍͔͠Βʁ 15
17. 基礎知識はMDNから モダンなフロントエンド技術を習得する場合にも 以前から⼤きく変わりない基礎知識がベースとして必要です。 まずは下記のページ、必要に応じて他の関連ページも参照しましょう。 l Web⼊⾨ https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web l HTML学習 https://developer.mozilla.org/ja/docs/Learn/HTML l CSS https://developer.mozilla.org/ja/docs/Learn/CSS l JavaScript https://developer.mozilla.org/ja/docs/Learn/JavaScript 16
18. きっと、避けては通れないGit 業務でコードを作成する場合は、Gitは避けて通れません。 Pro Gitを読みましょう。 https://git-scm.com/book/ja/v2 そして、GitはGUIではなくCUI（コマンド）を使いコマンドラインとも仲良くなりましょう。 様々な⽅法でGitを使うことができます。 公式のコマンドラインツールがあり、⽤途別のグラフィカルユーザーインターフェースも数多く 提供されています。 本書では、Gitのコマンドラインツールを使うことにします。 その理由は2つあります。まず、コマンドラインでのみ、 Gitのコマンド群を*全て*実⾏できるからです。GUIの⼤半は、実装する機能を限定することで複雑になることを回避しています。 コマン ドラインのほうを使えるようになれば、GUIのほうの使い⽅もおおむね把握できるでしょう。ただし、逆も真なり、とはいかないはずです。 2つめの理由として、どのGUIクライアントを使うかはあなたの好み次第、という点が挙げられます。⼀⽅、コマンドラインツールのほう は_全員_が同じものを使うことになります。 https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B- %E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3 GUIインターフェースや統合開発環境（IDE）で育ったプログラマーにとって、このような作業はかなり難しく感じられるはずです。要す るに、マウスでポイントしたりクリックするだけですべての作業を済ませられないのでしょうか︖ひと⾔で答えると「済ませられない」 です。GUIは素晴らしいインターフェースであり、簡単な操作であれば⼿っ取り早く、気楽に使えます。ファイルの移動や電⼦メールの読 み書き、プロジェクトの開発やデプロイはグラフィックス環境で⾏いたい作業でしょう。しかし、GUIだけで作業を進めるというのは、 使っている環境の持つ能⼒すべてを使いこなしていないということなのです。何度も実施する作業の⾃動化はできませんし、ツールが 持っているすべての⼒を使い切ることもできません。 David Thomas,Andrew Hunt. 達⼈プログラマー 熟達に向けたあなたの旅 第2版 (Japanese Edition) (p.196). Kindle 版. 17 Pro Gitから 達⼈プログラマーから
19. 基礎が整ったら使⽤技術の公式から学ぶ フレームワークやプログラム⾔語は多くの場合、公式サイトで詳細の情報 を発信しており、その場が⼀番の情報量であり、信頼性が⾼いものです。 公式サイトから学ぶ、コードを書いてみるを繰り返しましょう。 l TailwindCSS https://tailwindcss.com/ l Astro https://docs.astro.build/ja/getting-started/ 18
20. 道具の準備 モダンなフロントエンド技術には様々な道具が必要です。 Node.jsの導⼊⽅法からパッケージマネージャーまで、昨今では 様々な選択肢がありますが、まずは第⼀歩として下記があると良 いでしょう。 l Homebrew（macOSの場合のみ） l Git macOSはhomebrewから、WindowsはGit for Windows l Visual Studio Code（エディタ） l Volta（Node.jsの導⼊） l パッケージマネージャーはひとまずnpm 19