Webデザインと フロントエンド技術🔰勉強会

2024-06-21、九州工業大学 飯塚キャンパスの学生さん向けセミナーでお話したときの資料です。

Transcript

1. Webデザインと フロントエンド技術🔰勉強会 Tailwind CSS実践入門本勉強会 at 九州工業大学 pixiv Inc. Chiaki KUDO / @f_subal 2024.06.21
2. 今日のねらい • 「なんとなく学校で習うHTMLの話と、世の中のちゃ んとしたWebサービスとの間にギャップを感じる…」 という不安を埋める • ある程度 Web 初心者向けの話もします ◦ が、業界の先端で起こっている話の入口まで連れていきます ◦ 直近の著書に関連するテーマもこの流れで扱います • 想定する視聴者像 ◦ 「HTML・CSS・JavaScript がそれぞれ何なのかは知ってる」ぐらい 2
3. …の前に、自己紹介 3
4. 4 今のお仕事とか • 2016年4月 ピクシブ株式会社に新卒入社 • 2018年から pixivFACTORY の開発 • フロントエンドエンジニア → テックリード → エンジニアリングマネージャ → PdM • 2020年〜2022年デザインシステムの開発を兼任 ◦ 2022年に charcoal として OSS 化 ◦ デザインシステム初期メンバーで、OSS化プ ロジェクトを進行した人 • 2024年に『Tailwind CSS実践入門』を出版 @f_subal ピクシブ株式会社
7. 7 • 名古屋大学情報文化学部→情報科学研究科 • 学部はもうない（情報学部になった） • いわゆる「理工系」の学部ではない ◦ 計算機科学っぽいことをやる人もい れば、情報社会論をやる人もいれ ば、デザインと心理学みたいなこと をやる人もいる（文理融合の）学部 ◦ 大学受験は文系で受けた ◦ 知的生産とか学習に関するツールと かに関心があった • 学生のころ
8. Web技術にどう入ったか • もとはWebデザインから入った ◦ 中学生の頃イラストサイトをやってたので、HTMLとAdobeの経験があった ◦ PhotoshopやIllustratorを駆使してWebサイトやバナーをつくるバイトをし てた • ちゃんとしたWebプログラミングの業務経験は学生時代はなかった ◦ 研究でちょっと Node.js + AngularJS を触ってたぐらい（2014年頃） 8
9. Webフロントエンドという分野について (初心者向けの説明) 9
10. 「Webサイト」って現代すごく多様だよね • ペライチのサイト、ECサイト、SNS、はては複雑なデザインツールまで… ◦ 全部がWebサイト、全部がWebページ ◦ なんでこうなったのか • というか、これらがひと繋がりの分野とは思えない（という人もいるはず） ◦ ので、00年代ぐらい〜20年ぐらいにかけて何が起きたのか軽く説明します ▪ 自分が見てきた時代がその辺なので ▪ Web開発を始めたのは2010年代〜なので、前半の説明は怪しいかも ◦ これらが同じ「Webフロントエンド」という分野を成していることを理解 してもらいます 10
11. 00年代: HTML5以前、スマホ前夜 • PC前提のサイトが中心、大体PCのブラウザを考えてればよかった（はず） ◦ HTTPリクエストがあって、DBがあって、HTMLを文字列で組み立てて返す ◦ 一方ブラウザ同士の差異みたいな問題は今よりもひどかった • JavaScript でリッチな UI を組み立てる文化は希薄だった時代 ◦ Googleマップとか、一部の特殊なサービスだけが JS を使い倒している ▪ それ以外のサイトはちょろっと動きをつけるため最小限使う感じ ◦ リッチなコンテンツ（動画やゲームなど）はFlashに頼るのがふつう ▪ ページの文書と、インタラクティブなコンテンツは別物という扱い • ガラケー向けのサイトもあったけど、スマホ向けサイトほど多くない ◦ どっちにしろJavaScriptを扱うようなものではなかった 11 ※私はこの時代現役ではないのであやしい、利用者目線での記憶しかない
12. 12 ユーザー ユーザー アプリケーション サーバー アプリケーション サーバー データベース データベース GET /items/1 SELECT id, name FROM items WHERE id = 1; { "id": 1, "name": "My book" } <div class="item"> My book (id: 1) </div>
13. 00年代末〜10年代: HTML5とスマホの出現 • HTML5という仕様が提案され、HTMLでできることが大きく増えることになる ◦ ちなみに今はHTML5は廃止済（HTML Living Standard が標準仕様） • ジョブスがHTML5を支持し、iPhoneはFlashをサポートしないことになる ◦ ゲームや動画をWebサイトで提供する方法として Flash → HTML + JavaScript への移行が進んでいくことに • スマホの出現が Web にもたらした影響は結構デカかった ◦ 「WebサービスってWeb版とiPhone・Androidアプリ全部あるよね？」 ◦ PC前提の時代から、マルチクライアントの時代へ • 「Webページもアプリみたいな方法でつくりたい」という発想が生まれてくる ◦ Single Page Application を APIファーストで作るみたいな話の背景はこれ 13
14. 14 アプリケーション サーバー アプリケーション サーバー データベース データベース GET /api/items/1 SELECT id, name FROM items WHERE id = 1; { "id": 1, "name": "My book" } {"id": 1,"name":"..." } Web版 iOS版 Android版 ユーザー ユーザー ユーザー GET /api/items/1 {"id": 1,"name":"..." } GET /api/items/1 {"id": 1,"name":"..." }
15. 10年代中盤: 宣言的UIの出現 • HTMLは「サーバーが返す文書」だけじゃない「UIの基盤技術」となった • HTML + JavaScript でリッチな UI を組み立てるライブラリ群が勃興する ◦ これがよく聞く React とか Vue.js といったやつ • UI = f(state) というパラダイム ◦ UIは「現在のアプリケーションの状態を受け取って、見た目を返す関数」 • 以前はそうではなかった ◦ 初期状態（HTML文字列）だけが UI=f(state) で、それを手続き的に書き換 える処理を書くのが React 以前のフロントエンド ◦ 手続き的に書き換えるので、よく実態と乖離してた（しないように書くのは 難易度が高かった） 15
17. 現代: 10年代後半〜20年代 • 「宣言的UI」を用いて「コンポーネント」を作る、というのが一般化した ◦ いまWebフロントエンドの仕事といった場合、これを指すことが多い ◦ デザイナも「コンポーネント」という概念をふつうに使うようになった • 宣言的UIを前提にしたエコシステムやフレームワークが成熟してきた ◦ React（UIコンポーネントを作る）を前提にした Next.js（Webサイトを作 る）というフレームワークがある、みたいな関係 • 世の中には00年代以前の技術で作られたサイト、10年代の技術で作られたサイ ト、20年代の技術で作られたサイト…などが全部ある ◦ それらは全部ブラウザやHTMLやJSなどのWeb技術という基盤の上にある ◦ 連続的に進化しているが、地層のように積み重なっている 17
18. Webフロントエンドの仕事とは 18
19. 19 • 注文フォームをつくる: フロントエンド • 注文を記録したり決済できるようにする: バックエンド • 「Webブラウザで起こること」に専門性 を持つ開発者 ◦ デザイナの設計を元にHTMLを書く ◦ UIのインタラクションを記述する ◦ データをサーバーに送ったり受け 取った後の処理を記述する たとえばECサイトの 場合 ※分業してるとは限らないが、一旦してる想定で話します カートに入ってなかったり 住所が未入力だと押せない 条件が揃ったら押せる、 マウスオーバーしたらいい感 じにフォーカスが当たる 押したらフォームの submitイベントが発火して 注文情報をサーバーに送る うまく決済ができたら 完了画面に移動して メッセージを出す
20. もう少し領域を広げるとどうなるか • バックエンドもやることでアプリケーション全体の開発に行く人 ◦ 会社によっては「Webアプリケーションエンジニア」みたいに、 フロントエンドに特化しない形で採用するとこもある • デザインの領域に手を伸ばして社内のデザインシステムなどをつくる人 ◦ 「デザインエンジニア」と呼ばれたりもする ◦ Webアクセシビリティとかもこの領域 • ページの読み込み速度などに専門性を発揮する人 • エンジニアリングの知見を活かしつつ、プロダクトのマネジメントに行く人 20
21. 自分がどの辺にいて、 書いた本がどのへんを扱ってるか 21
23. 23 • ここまで全くCSSの話をしてこなかったの でします • CSSはHTMLの見た目を記述する言語 • 簡単・自由に記述できるが、記述がサイト 全体に影響するので統率をとるのが難しい • スタイリングに統一感を出し、コーディン グをしやすくし、誤ってバグった見た目に しないための試みはWeb登場以来ずっと あった CSSとWebデザイン
24. 24 • デザインのルールをマークアップでそのま ま記述すれば一貫性のある UI が書けるの では？というのが Tailwind CSS • これを「ユーティリティファースト」とい うアイデアで実現している • デザイナが使って良い色やフォントサイズ を決めて、それを表すクラスだけを使う ルールにすれば良い • デザインシステムを実現できるしくみ デザインシステムと Tailwind CSS
25. 25 • 拙著『Tailwind CSS実践入門』は特にデザ インエンジニアになる人向けの本です • CSS設計の歴史、それでうまくいかない部 分、Tailwind CSSの提唱するユーティリ ティファーストの考え方を紹介します • ほかのタイプの人（普段 UI 実装してる 人）も得るものはあると思う • が、最後まで読むと現代的なデザインシス テムを作る話に辿り着く Tailwind CSS実践 入門がやってること
26. 26 • 今回は一口に「Web開発」「Webフロント エンド」と言っても色々あることを話して きました • 興味の持ち方は色々あると思いますが書籍 でおすすめのものを並べておきます（フロ ントエンド関係ないものも含む） • ライブラリ・フレームワークはドキュメン トから入った方が良いことも多いです ◦ 自分がフレームワークの入門書書い ておいてなんですが もっと勉強したい人は
27. Webデザインと フロントエンド技術🔰勉強会 Tailwind CSS実践入門本勉強会 at 九州工業大学 pixiv Inc. Chiaki KUDO / @f_subal 2024.06.22