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

Rails アプリを10年以上継続していくためのフロントエンドの底上げ

Tomoya Chiba
November 24, 2023
820

Rails アプリを10年以上継続していくためのフロントエンドの底上げ

[ハイブリッド開催] Wantedly x Qiita Meetup #1 フロントエンドのあれこれ - connpass (https://wantedly.connpass.com/event/300025/) での発表資料です。

Tomoya Chiba

November 24, 2023
Tweet

Transcript

  1. Tomoya Chiba (@tomoasleep) Qiita 株式会社 共通基盤開発グループ シニアエンジニア 2013-2019: 学生アルバイト →

    正社員 2021-2022: 業務委託 2022-: 正社員 インフラ ~ バックエンド ~ フロントエンドまでやる雑 食系エンジニアです 最近の悩み: ブラックフライデーセールで安くなってい る 3D プリンタを買うかどうか 自己紹介 2
  2. 初期: Rails が主、一部の View を jQuery で書き換え ↓ 宣言的な記述で複雑さを減らす 中期:

    Rails が主、一部の View を React で構築 ↓ 責務の集約、ツールの生産性を求めて 現在: ページほぼ全体を React で構築 時代の変化にあわせて採用技術も変化 11
  3. 長年のフロントエンドの試行錯誤により、複数の Version がある v1: Backbone, React, webpack, Bootstrap v2: Hyperapp,

    GraphQL, Rollup v3: React, GraphQL, Atomic Design, webpack Case 1: Qiita 内のフロントエンド Version の統一 19
  4. v1: Backbone, React, webpack, Bootstrap v2: Hyperapp, GraphQL, Rollup v3:

    React, GraphQL, Atomic Design, webpack 開発しながら、 v3 への移行を進めていく 20
  5. v1: Backbone, React, webpack, Bootstrap ( あまり触らないページが多い ) v2: Hyperapp,

    GraphQL, Rollup v3: React, GraphQL, Atomic Design, webpack あまり触っていないページが v1 のまま残る 21
  6. v1: Backbone, React, webpack, Bootstrap v2: Hyperapp, GraphQL, Rollup v3:

    React, GraphQL, Atomic Design, webpack v1, v2 からの移行を達成 23