お客様とすすめる_フロントエンドの技術支援.pdf

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

自己紹介 • 株式会社スリーシェイク Sreake事業部 • 佐藤慧太＠SatohJohn • SREとして社会の労苦<Toil>をなくすお仕事 ◦ アプリケーション分野での支援をはじめました
◦ フロントからインフラまで広く触っています ◦ 前職でも技術的負債と戦ってました 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 <!DOCTYPE html> <html lang="ja"
class=""> <head> <script type="module" src="{% static '/bundled/top.js' %}" ></script> <script src="{% static '/js/hoge.js' %}" ></script>  </head> <body>

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

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

おわり 17

お客様とすすめる_フロントエンドの技術支援.pdf

お客様とすすめる_フロントエンドの技術支援.pdf

SatohJohn

More Decks by SatohJohn

Other Decks in Technology

Featured

Transcript

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

自己紹介 • 株式会社スリーシェイク Sreake事業部 • 佐藤慧太＠SatohJohn • SREとして社会の労苦<Toil>をなくすお仕事 ◦ アプリケーション分野での支援をはじめました

株式会社スリーシェイクについて Copyright © 3-shake, Inc. All Rights Reserved. 　　 xOps

事例の内容(前提共有) • マルチページアプリケーション ◦ PythonのDjangoフレームワーク ◦ アプリケーションはコンテナ環境で実行されている • モジュール化されていないJavaScript ◦

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

これに対してやったこと • そもそもの技術的負債を認識してもらう ◦ 解消したらどうなるのかを「ぼやっと認識してもらう」 ◦ 味方につける、味方になる≒社内政治 • 既存の運用フローを壊さずに改善をする ◦

そもそも技術的負債を認識してもらう • 変更に対する抵抗感に立ち向かう ◦ 「なぜしなければ、行けないのか？今動いているじゃない？」 ◦ 変更コスト < 変更によるメリットを提示する ▪

既存の運用フローを壊さずに改善をする • vite(rollup)を利用してbundleしたファイルをリソースディレクトリに配置されるように設定する ◦ viteを使ったのは今後のフレームワークへの追従を見据えて ◦

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

おわり 17