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

Transcript

1. フロントエンドから見た

   Web制作の変遷

   （2022年版）

   2022/8/27　まぁし（知念）

   

   View Slide

2. 知念 昌史 / まぁし@chocodogmagic

   TAMのフロントエンドエンジニア 兼 個人事業主

   ● 沖縄でリモートワーク/元・美容師

   ● Twitterスペースで平日9時からWeb情報発信中

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● ものづくりが好き

   ○ イラスト、ゲーム、アプリ、漫画、小説
   

   ● ベテランポケモントレーナー（新作発売楽しみ）

   ● スプラトゥーン3期待（2のウデマエS+）

   

   View Slide

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

   

   View Slide

4. 注意：僕の観測範囲です

   ※東京の大手〜中堅規模の会社が委託するWeb制作

   数年のずれや自分の環境は違うという

   意見も貴重ですのでぜひ共有を！

   

   View Slide

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

   バージョンアップで

   高機能に

   

   View Slide

6. 2022年

   

   View Slide

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必要

   パターンが別れる
   黎明期が続く
   制作パターン
   が固定化
   

   View Slide

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と似ている 

   

   View Slide

9. 海外の流行から2〜3年遅れで

   日本のエンジニア間で主流になる

   

   View Slide

10. さらに5年以内くらいの数年遅れで

    制作会社に依頼するような会社にも

    普及する

    

    View Slide

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

    

    View Slide

12. ありがとうございました！！！

    TAMで一緒に働く仲間を募集しています！

    Twitter まぁし@chocodogmagic

    フォローしてね！！

    PWA Night

    毎月第3水曜 イベント開催中！

    平日9:00〜

    Web情報発信中！

    

    View Slide