Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Chinen
August 29, 2022

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

Chinen

August 29, 2022
Tweet

More Decks by Chinen

Other Decks in Programming

Transcript

  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情報発信中!