フロントエンドから見たWeb制作の変遷 / PHP Conference Okinawa 2022

1. フロントエンドから見た
 Web制作の変遷
 （2022年版）
 2022/8/27　まぁし（知念）

2. 知念 昌史 / まぁし@chocodogmagic
 TAMのフロントエンドエンジニア 兼 個人事業主
 • 沖縄でリモートワーク/元・美容師
 • Twitterスペースで平日9時からWeb情報発信中
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • ものづくりが好き
 ◦ イラスト、ゲーム、アプリ、漫画、小説 
 • ベテランポケモントレーナー（新作発売楽しみ）
 • スプラトゥーン3期待（2のウデマエS+）

3. これまでのWeb制作を振り返り

4. 注意：僕の観測範囲です
 ※東京の大手〜中堅規模の会社が委託するWeb制作
 数年のずれや自分の環境は違うという
 意見も貴重ですのでぜひ共有を！

5. PC/モバイルのみ〜 
 スマホサイト増加
 2008年iPhone発売
 2010
 2012
 レスポンシブウェブデザイン 
 HTML/CSS/jQuery 
 Pug(Jade)/EJS/Sass 
 Grunt / Gulp（タスクランナー） 
 徐々に素のHTML・CSSを書かなくなる 
 2013
 Angular(1系)
 /React/Vue.js
 jQuery
 VS
 JSライブラリ
 2015
 徐々にjQueryを
 使わなくなっていく
 ECMAScript 2015
 新しいJavaScript
 2016
 Next.js/Nuxt登場
 Angular(1系)が消える 
 Webアプリが増加
 PWA登場
 2018
 WordPressの
 立ち位置が変化
 Jamstack
 ヘッドレスCMS
 2019/2020
 大規模サービスの事例 
 React/Vue.js
 バージョンアップで
 高機能に

6. 2022年

7. 
 • HTML/CSS/jQuery → 新規ほぼ0だが 運用はまだある
 ------------------------------
 • Pug/EJS、Sass（Gulp）
 • JavaScript（ES6〜）
 ------------------------------
 • 今後はNext.js/Nuxt？
 • Jamstack
 WebサイトかWebアプリ（Webサービス）で2極化
 
 • React or Vue
 • Next.js or Nuxt
 • コンポーネント開発
 → 普通のHTML書かない
 → Gulp使わない
 → TypeScriptが基本
 Webサイト
 Webアプリ/Webサービス 
 Build必要
 Build必要
 Build必要
 パターンが別れる 黎明期が続く 制作パターン が固定化
8. お客さん（クライアント）のスキル変化
 • 2010年頃、制作はほぼ制作会社へ丸投げも多かった
 ◦ HTML無理・プログラムわからない 
 • 2015年頃、お客さんがHTMLを知っている・書ける
 ◦ HTMLならいける、Gulpは無理（PugやSassどうする問題 → 納品後は使えない） 
 • 2018年頃、お客さんの社内に開発メンバーがいる
 ◦ GulpなどタスクランナーもOK、開発環境ごと納品してほしい 
 ◦ タスクランナーの使い方をレクチャーしてほしいという需要 
 • 2020年頃、お客さんの開発チーム体制が整い始める
 ◦ デザイン・HTMLは内製・Gulpも使っている、ReactやVueはまだ扱えない 
 • 2022年は？
 ◦ Next.js/Nuxtで納品OKというところも少しずつ増えてきた。 
 ◦ gulpはいけるがReact/Vue.jsは無理という状況は2015年頃のgulpと似ている 

9. 海外の流行から2〜3年遅れで
 日本のエンジニア間で主流になる

10. さらに5年以内くらいの数年遅れで
 制作会社に依頼するような会社にも
 普及する

11. 時代に合わせた開発をしていきましょう

12. ありがとうございました！！！
 TAMで一緒に働く仲間を募集しています！
 Twitter まぁし@chocodogmagic
 フォローしてね！！
 PWA Night
 毎月第3水曜 イベント開催中！
 平日9:00〜
 Web情報発信中！