お客様とすすめる フロントエンドの技術支援 フロントエンドの技術的負債 みんなで学ぶ Lunch LT 2023-05-17 株式会社スリーシェイク 佐藤慧太＠SatohJohn 1

自己紹介 ● 株式会社スリーシェイク Sreake事業部 ● 佐藤慧太＠SatohJohn ● SREとして社会の労苦をなくすお仕事 ○ アプリケーション分野での支援をはじめました ○ フロントからインフラまで広く触っています ○ 前職でも技術的負債と戦ってました 2

株式会社スリーシェイクについて Copyright © 3-shake, Inc. All Rights Reserved. 　　 xOps Plattform DesignOps IaaS DevOps / SRE RevOps (Revenue Ops) HR（Engineer Hiring） HROps Data Engineering DataOps Security DevSecOps SecOps 事業者が抱える セキュリティリスクを無くす 本格的な脆弱性診断を 無料で手軽に セキュリファイ Security 良いエンジニアに良い案件を フリーランスエンジニアに 「今よりいい条件」を リランス HR（Engineer Hiring） あらゆるサービスを連携する ハブになる クラウド型ETL/データパイプ ラインサービスの決定版 レコナー Data Engineering 日本のSREをリード SRE総合支援からセキュリティ 対策を全方位支援 スリーク SRE スリーシェイク = xOps領域のプラットフォーマーへ 3

本日話すこと ● お客様のアプリケーションの支援におけるフロントエンド開発に ついて紹介 ○ 社外からのアプローチってどんなことをしているのか どうするのがいいと思っているか ○ 社内で技術的負債の解消を頑張る人向け 4

本日話すこと ● お客様のアプリケーションの支援におけるフロントエンド開発に ついて紹介 ○ 社外からのアプローチってどんなことをしているのか どうするのがいいと思っているか ○ 社外(!?)、社内で技術的負債の解消を頑張る人向け 5 技術的なネタは少なく、複雑なことはしません

事例の内容(前提共有) ● マルチページアプリケーション ○ PythonのDjangoフレームワーク ○ アプリケーションはコンテナ環境で実行されている ● モジュール化されていないJavaScript ○ JavaScriptファイル自体は50ファイル強 ○ HTMLから直に参照する ● ライブラリはjQueryやBootStrap 6

事例の内容(前提共有) ● お客様的には、フロントは苦手である ○ バックエンドやインフラ周りが強い ○ ただし、実装力がとてもある ■ 正直生でここまで作れるのかと驚いたこと多数 7

これに対してやったこと ● そもそもの技術的負債を認識してもらう ○ 解消したらどうなるのかを「ぼやっと認識してもらう」 ○ 味方につける、味方になる≒社内政治 ● 既存の運用フローを壊さずに改善をする ○ 解消したらどうなるのかを「実感してもらう」 ○ 「我々がいなくっても」の精神で作る 8

そもそも技術的負債を認識してもらう ● 人間は知っていることしか知らない ○ 知っているその範囲内で頑張るというのが多い ○ 現状の整理と課題(改善できる点)の洗い出しをへて こういうものもある、こういう使い方もできるを提示して気づきを与える ○ 方針と指針を伝えて、アイデアの種を与える ■ 人間は手段が多すぎると何もできなくなるという考え ● 一気に変えない、などのある意味の制約 9

そもそも技術的負債を認識してもらう ● 変更に対する抵抗感に立ち向かう ○ 「なぜしなければ、行けないのか？今動いているじゃない？」 ○ 変更コスト < 変更によるメリットを提示する ■ メリットは考え方で若干異なるのでうまく提示をする必要がある ○ 仲間を見つけて、一緒にやってもらう 10

既存の運用フローを壊さずに改善をする ● 私達がいなくとも開発運用できるものでなければいけない ○ いくら優れたシステムでも運用できなければ、負債である ○ お客様の現場に合わせた最適なソリューションを提供する ■ そして、ヒアリングとシステム理解と説明などなど 11

既存の運用フローを壊さずに改善をする ● コンテナ環境で完結するシステムにする ○ 開発環境としてdocker composeを作成して、全員が同じ開発環境を作れるようにする ○ リソースディレクトリを volumeマウントをしてフロントのアプリケーションで それを参照する 12

既存の運用フローを 壊さずに改善をする ● vite(rollup)を利用してbundleした ファイルをリソースディレクトリ に配置されるように設定する ○ viteを使ったのは今後のフレームワークへの 追従を見据えて ○ これならば少しずつ追加していける ○ リリースフローを変更せずに実装が可能 13 import { defineConfig } from "vite"; export default defineConfig({ build: { outDir: "static/bundled", rollupOptions: { input: { "top": "./static/js/top.js", "menu": "./static/js/menu.js", }, output: { entryFileNames: "[name].js", }, watch: { include: "/static/**", exclude: ["static/bundled/**"], }, }, }, });

既存の運用フローを壊さずに改善をする ● ページごとにentryのjsを作成し配置してHTMLのscript type=”module”で entryとなるjsを読み込み、分割されてassetに入るライブラリも読み込む 14

まとめ ● お客様とすすめるフロントエンドの技術支援の案件について紹介 ○ 正直、現状社内ですすめるのとあまり変わらない ■ むしろモチベーション高く進めてもらえている ○ 改善が楽しい、改善していきたいと思う文化を作りたい ■ 「負債だから辛い」で終わらず、「負債見っけ、対応してこう！」の 文化になれば勝ち 15

最後に ● 一緒に社会から労苦をなくす仲間を募集しています！ ○ もし、ご興味が有りましたら、以下の会社情報など見てもらい応募ページに ぜひご連絡ください！（私の twitter宛でも良いですー ○ https://3-shake.com/category/recruit/ ○ https://www.wantedly.com/companies/3-shake 16

おわり 17