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

Webデザインとフロントエンド技術🔰勉強会 Tailwind CSS実践入門本勉強会 at 九州工業大学 pixiv Inc. Chiaki KUDO
/ @f_subal 2024.06.21

今日のねらい • 「なんとなく学校で習うHTMLの話と、世の中のちゃんとしたWebサービスとの間にギャップを感じる…」という不安を埋める • ある程度 Web 初心者向けの話もします ◦
が、業界の先端で起こっている話の入口まで連れていきます ◦ 直近の著書に関連するテーマもこの流れで扱います • 想定する視聴者像 ◦ 「HTML・CSS・JavaScript がそれぞれ何なのかは知ってる」ぐらい 2

…の前に、自己紹介 3

4 今のお仕事とか • 2016年4月ピクシブ株式会社に新卒入社 • 2018年から pixivFACTORY の開発 •
フロントエンドエンジニア → テックリード → エンジニアリングマネージャ → PdM • 2020年〜2022年デザインシステムの開発を兼任 ◦ 2022年に charcoal として OSS 化 ◦ デザインシステム初期メンバーで、OSS化プロジェクトを進行した人 • 2024年に『Tailwind CSS実践入門』を出版 @f_subal ピクシブ株式会社

7 • 名古屋大学情報文化学部→情報科学研究科 • 学部はもうない（情報学部になった） • いわゆる「理工系」の学部ではない ◦ 計算機科学っぽいことをやる人もいれば、情報社会論をやる人もいれ
ば、デザインと心理学みたいなことをやる人もいる（文理融合の）学部 ◦ 大学受験は文系で受けた ◦ 知的生産とか学習に関するツールとかに関心があった • 学生のころ

Web技術にどう入ったか • もとはWebデザインから入った ◦ 中学生の頃イラストサイトをやってたので、HTMLとAdobeの経験があった ◦ PhotoshopやIllustratorを駆使してWebサイトやバナーをつくるバイトをしてた • ちゃんとしたWebプログラミングの業務経験は学生時代はなかった
◦ 研究でちょっと Node.js + AngularJS を触ってたぐらい（2014年頃） 8

Webフロントエンドという分野について (初心者向けの説明) 9

「Webサイト」って現代すごく多様だよね • ペライチのサイト、ECサイト、SNS、はては複雑なデザインツールまで… ◦ 全部がWebサイト、全部がWebページ ◦ なんでこうなったのか • というか、これらがひと繋がりの分野とは思えない（という人もいるはず） ◦
ので、00年代ぐらい〜20年ぐらいにかけて何が起きたのか軽く説明します ▪ 自分が見てきた時代がその辺なので ▪ Web開発を始めたのは2010年代〜なので、前半の説明は怪しいかも ◦ これらが同じ「Webフロントエンド」という分野を成していることを理解してもらいます 10

00年代: HTML5以前、スマホ前夜 • PC前提のサイトが中心、大体PCのブラウザを考えてればよかった（はず） ◦ HTTPリクエストがあって、DBがあって、HTMLを文字列で組み立てて返す ◦ 一方ブラウザ同士の差異みたいな問題は今よりもひどかった • JavaScript
でリッチな UI を組み立てる文化は希薄だった時代 ◦ Googleマップとか、一部の特殊なサービスだけが JS を使い倒している ▪ それ以外のサイトはちょろっと動きをつけるため最小限使う感じ ◦ リッチなコンテンツ（動画やゲームなど）はFlashに頼るのがふつう ▪ ページの文書と、インタラクティブなコンテンツは別物という扱い • ガラケー向けのサイトもあったけど、スマホ向けサイトほど多くない ◦ どっちにしろJavaScriptを扱うようなものではなかった 11 ※私はこの時代現役ではないのであやしい、利用者目線での記憶しかない

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>

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 アプリケーションサーバーアプリケーションサーバーデータベースデータベース 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":"..." }

10年代中盤: 宣言的UIの出現 • HTMLは「サーバーが返す文書」だけじゃない「UIの基盤技術」となった • HTML + JavaScript でリッチな UI
を組み立てるライブラリ群が勃興する ◦ これがよく聞く React とか Vue.js といったやつ • UI = f(state) というパラダイム ◦ UIは「現在のアプリケーションの状態を受け取って、見た目を返す関数」 • 以前はそうではなかった ◦ 初期状態（HTML文字列）だけが UI=f(state) で、それを手続き的に書き換える処理を書くのが React 以前のフロントエンド ◦ 手続き的に書き換えるので、よく実態と乖離してた（しないように書くのは難易度が高かった） 15

現代: 10年代後半〜20年代 • 「宣言的UI」を用いて「コンポーネント」を作る、というのが一般化した ◦ いまWebフロントエンドの仕事といった場合、これを指すことが多い ◦ デザイナも「コンポーネント」という概念をふつうに使うようになった • 宣言的UIを前提にしたエコシステムやフレームワークが成熟してきた
◦ React（UIコンポーネントを作る）を前提にした Next.js（Webサイトを作る）というフレームワークがある、みたいな関係 • 世の中には00年代以前の技術で作られたサイト、10年代の技術で作られたサイト、20年代の技術で作られたサイト…などが全部ある ◦ それらは全部ブラウザやHTMLやJSなどのWeb技術という基盤の上にある ◦ 連続的に進化しているが、地層のように積み重なっている 17

Webフロントエンドの仕事とは 18

19 • 注文フォームをつくる: フロントエンド • 注文を記録したり決済できるようにする: バックエンド • 「Webブラウザで起こること」に専門性を持つ開発者
◦ デザイナの設計を元にHTMLを書く ◦ UIのインタラクションを記述する ◦ データをサーバーに送ったり受け取った後の処理を記述するたとえばECサイトの場合 ※分業してるとは限らないが、一旦してる想定で話しますカートに入ってなかったり住所が未入力だと押せない条件が揃ったら押せる、マウスオーバーしたらいい感じにフォーカスが当たる押したらフォームの submitイベントが発火して注文情報をサーバーに送るうまく決済ができたら完了画面に移動してメッセージを出す

もう少し領域を広げるとどうなるか • バックエンドもやることでアプリケーション全体の開発に行く人 ◦ 会社によっては「Webアプリケーションエンジニア」みたいに、フロントエンドに特化しない形で採用するとこもある • デザインの領域に手を伸ばして社内のデザインシステムなどをつくる人 ◦ 「デザインエンジニア」と呼ばれたりもする
◦ Webアクセシビリティとかもこの領域 • ページの読み込み速度などに専門性を発揮する人 • エンジニアリングの知見を活かしつつ、プロダクトのマネジメントに行く人 20

自分がどの辺にいて、書いた本がどのへんを扱ってるか 21

23 • ここまで全くCSSの話をしてこなかったのでします • CSSはHTMLの見た目を記述する言語 • 簡単・自由に記述できるが、記述がサイト全体に影響するので統率をとるのが難しい •
スタイリングに統一感を出し、コーディングをしやすくし、誤ってバグった見た目にしないための試みはWeb登場以来ずっとあった CSSとWebデザイン

24 • デザインのルールをマークアップでそのまま記述すれば一貫性のある UI が書けるのでは？というのが Tailwind CSS •
これを「ユーティリティファースト」というアイデアで実現している • デザイナが使って良い色やフォントサイズを決めて、それを表すクラスだけを使うルールにすれば良い • デザインシステムを実現できるしくみデザインシステムと Tailwind CSS

25 • 拙著『Tailwind CSS実践入門』は特にデザインエンジニアになる人向けの本です • CSS設計の歴史、それでうまくいかない部分、Tailwind CSSの提唱するユーティリティファーストの考え方を紹介します
• ほかのタイプの人（普段 UI 実装してる人）も得るものはあると思う • が、最後まで読むと現代的なデザインシステムを作る話に辿り着く Tailwind CSS実践入門がやってること

26 • 今回は一口に「Web開発」「Webフロントエンド」と言っても色々あることを話してきました • 興味の持ち方は色々あると思いますが書籍でおすすめのものを並べておきます（フロントエンド関係ないものも含む） •
ライブラリ・フレームワークはドキュメントから入った方が良いことも多いです ◦ 自分がフレームワークの入門書書いておいてなんですがもっと勉強したい人は

Webデザインとフロントエンド技術🔰勉強会 Tailwind CSS実践入門本勉強会 at 九州工業大学 pixiv Inc. Chiaki KUDO
/ @f_subal 2024.06.22

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

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

fsubal

More Decks by fsubal

Featured

Transcript