Tweet
Tweet

Slide 1

Slide 1 text

Tomoya Chiba (@tomoasleep) Qiita 株式会社 Rails アプリを 10 年以上継続していくためのフロント エンドの底上げ 1

Slide 2

Slide 2 text

Tomoya Chiba (@tomoasleep) Qiita 株式会社 共通基盤開発グループ シニアエンジニア 2013-2019: 学生アルバイト → 正社員 2021-2022: 業務委託 2022-: 正社員 インフラ ~ バックエンド ~ フロントエンドまでやる雑 食系エンジニアです 最近の悩み: ブラックフライデーセールで安くなってい る 3D プリンタを買うかどうか 自己紹介 2

Slide 3

Slide 3 text

今年で Qiita は ?? 歳になりました 3

Slide 4

Slide 4 text

(Qiita は 2011 年生まれ ) 今年で Qiita は 12 歳になりました 4

Slide 5

Slide 5 text

Qiita の 12 年の変遷 (2011 2013) 5

Slide 6

Slide 6 text

Qiita Team が誕生 Qiita の 12 年の変遷 (2011 2013) 6

Slide 7

Slide 7 text

Qiita Jobs も生まれた Qiita, Qiita Team も大きく変わった Qiita の 12 年の変遷 (2023) 7

Slide 8

Slide 8 text

ところで、 12 年前の Rails フロントエンドってどん なんだったか覚えていますか … ？ 8

Slide 9

Slide 9 text

初期の Qiita のフロントエンドの構成技術 ( 一部 ) 9

Slide 10

Slide 10 text

現在の Qiita のフロントエンドの構成技術 ( 一部 ) 10

Slide 11

Slide 11 text

初期: Rails が主、一部の View を jQuery で書き換え ↓ 宣言的な記述で複雑さを減らす 中期: Rails が主、一部の View を React で構築 ↓ 責務の集約、ツールの生産性を求めて 現在: ページほぼ全体を React で構築 時代の変化にあわせて採用技術も変化 11

Slide 12

Slide 12 text

技術の変化 : View の主役を Rails → JS に 12

Slide 13

Slide 13 text

(※ ただしサービスを育てるのと並行して ) 技術の変化 : View の主役を Rails → JS に 13

Slide 14

Slide 14 text

使う技術の数がこんなことに！！！ どうなるか : フロントエンドが多様化してしまってい た 14

Slide 15

Slide 15 text

様々な格差が多様化を生んでしまっていた 機能間の格差: 開発頻度の差がフロントエンドの差に サービス間の格差: 様々な戦略の違いにより。チームの知識の差にも どうなるか : フロントエンドが多様化してしまってい た 15

Slide 16

Slide 16 text

度が過ぎた多様化は開発体験を悪化させる 同じことをする複数の実装が必要に 違いがスイッチングコストを生む 古いものもメンテし続けないといけない → 遅れてしまった部分を底上げして、差を縮めた フロントエンドを底上げして、差が出てしまった部 分を揃えた 16

Slide 17

Slide 17 text

Qiita のフロントエンドの底上げの取り組みについて 話します 17

Slide 18

Slide 18 text

Case 1: Qiita 内の機能間の格差を埋める Case 2: サービス間の格差を埋める 話す例 18

Slide 19

Slide 19 text

長年のフロントエンドの試行錯誤により、複数の Version がある v1: Backbone, React, webpack, Bootstrap v2: Hyperapp, GraphQL, Rollup v3: React, GraphQL, Atomic Design, webpack Case 1: Qiita 内のフロントエンド Version の統一 19

Slide 20

Slide 20 text

v1: Backbone, React, webpack, Bootstrap v2: Hyperapp, GraphQL, Rollup v3: React, GraphQL, Atomic Design, webpack 開発しながら、 v3 への移行を進めていく 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

「ユーザーの声を聞いて、ユーザー体験向上」をミッションとするチーム 手を付けてない場所の改善 → ユーザー体験の底上げ 「古いフロントエンドの刷新」と、チームのミッションを揃えて 進める 22

Slide 23

Slide 23 text

v1: Backbone, React, webpack, Bootstrap v2: Hyperapp, GraphQL, Rollup v3: React, GraphQL, Atomic Design, webpack v1, v2 からの移行を達成 23

Slide 24

Slide 24 text

Qiita Team のフロントエンドは進化が遅れていた (Qiita の v1 相当) デザインリニューアルを機に、Qiita Team フロントエンドの底上げを進めること に Before After Case 2: Qiita と他のサービス (Qiita Team) との差 を埋める 24

Slide 25

Slide 25 text

Qiita の v3 相当へのジャンプは結構難しい ほとんどの要素を書き換えることになる これを Qiita Team のすべてのページでやる？？？ いきなりジャンプするのは難しい 25

Slide 26

Slide 26 text

一番達成したいことはなんだろう？ → 「View を JS だけで構築出来る状態」 それを実現できる最小ゴールを設定する GraphQL 導入は一旦やらない いきなり全部追いつこうとしない 26

Slide 27

Slide 27 text

わかる。流石にスキーマ駆動開発の枠組みは欲しい 隙間を埋める仕組みを作って補う → JSON Schema を作る Presenter で Rails アプリケーション (Qiita Team) と フロントエンドの連携をする #Ruby - Qiita ※ GraphQL ないのつらくない？ 27

Slide 28

Slide 28 text

新しいフロントエンドに慣れていないメンバーもいる Qiita の開発メンバーに、一時的に入ってもらう ペアプロで知見を共有し、学んだメンバーが他に教えて… 、で知識の差を埋める Qiita Team の開発メンバーが全員移行が行えるように チーム間の出張で、知識の差を埋める 28

Slide 29

Slide 29 text

Qiita Team の View の JS 化がほぼ完了 29

Slide 30

Slide 30 text

自然にやっていくと、フロントエンドの格差、多様性が生まれてしまう それを改善するために… 、 「古いフロントエンドの底上げ」とチームのミッションを揃えて進める 底上げする際のゴールは無理をしない 先に進んでいるチームのノウハウを借りる ここまでの学び 30

Slide 31

Slide 31 text

View の JS 化はほぼ完了できたが… 、 まだまだ課題はたくさん サービス間の差はまだある まだまだモダンにしきれていない部分もある まだまだ Rails と密結合しているところがある Qiita の現在地点 31

Slide 32

Slide 32 text

15 年 , 20 年 , ... 続くサービスのフロントエンドを目指 して 32