$30 off During Our Annual Pro Sale. View Details »

フロントエンドから見た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 まぁし(知念)


    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