インフラSEからの異世界転⽣︕ 〜Web開発 2ヶ⽉ちょい学習記〜 KDDIアジャイル開発センター ⼭⼝ 歩夢

⾃⼰紹介 u ⽒名(年齢) ⼭⼝ 歩夢 (26歳) u 経歴 2021年4⽉にKDDI新卒⼊社、⾃社クラウドサービスのストレージ基盤/⾃動化ツールを開発 2023年4⽉からKDDIアジャイル開発センター（KAG）へ出向、Webサービスの開発に従事 u 業務 Webサービスをアジャイル開発（フロント/バック/インフラ) u 趣味 筋トレ、ビール、SixTones u 好きな痛み 筋⾁痛

本発表で知れること/知れないこと

情報発信(QiitaやLT） Udemy/YouTube/技術記事を漁りつつ⼿を動かす （もちろんChatGPTにも聞きまくる） チームでの開発（仕事） ・わからない ・スキル不⾜ 仕事に活かせる ネットワーク拡⼤ アウトプットできる >>勉強のモチベにもなる ・知識の定着率up ・いつでも参照可な メモ代わり ・Nuxt/Vue/Typescript/Python/CSS,Vuetify ・AWS ・Terraform ・GraphQL ・Github, Github Actions ・OpenID Connect, JWT, Web Storage, ・TDD ・オブジェクト指向,クリーンアーキ …etc 刺激を受けモチベup 莫⼤なエネルギーを使⽤ ＞すぐにHPは⾚⾊に （脳みそが焼ける） すごいキズぐすり、やけどなおし （筋トレ/サウナ/ビール/うまい飯） キズ治すぜ

Vuetify3/Firebase/Nuxt3(Vue,Typescript)で 認証フォーム構築 l 技術 Ø Nuxt3(Vue.js,Typescript),Vuetify3,Firebase Auth l 作成したログイン機能の認証フロー • デザインフレームワーク(ライブラリ） Web開発に必要なボタンやメニューなどの テンプレートがあるので簡単/⾼速にwebサイトを作成できる • Firebase バックエンドの機能を担ってくれるMbaaS(Mobile backend as a Service)のこと

デモ

ところでVuetifyってなにがいいんですか l Vuetifyとは︖ Ø Vue.jsのUIライブラリ Ø Googleが提唱するマテリアルデザインにのっとり、 直感的で使いやすいUIをデザインの知識が皆無でも簡単に作成できる l マテリアルデザインとは︖ l 現実世界の物理法則に従うデザイン l つまり、ユーザが直感的に操作可能なデザイン （例︓Twitterの下のボタンは浮いているから押すものだとわかる） 簡単⾼速にバリデーション込みのマテリアルデザインを実現可能︕ (カスタマイズは、ちとむずい) Vuetifyを使うことで・・・

クリーンアーキテクチャのお勉強 View • (例)ログイン時⼊⼒エラー 1. View︓UI表⽰,⼊⼒ 2. Controller︓データを渡す 3. Usecase︓ロジック適⽤ 4. Presenter︓データ加⼯ 5. View︓UI表⽰ • クリーンアーキテクチャってなに︖ 再利⽤可能な設計のこと。 ソフトウェアをレイヤー分けすることで 依存関係の分離を実現し⾼品質なシステムを 構築するアプローチ。 ディレクトリ構造や各ファイルの役割、 データの流れを意識し開発︕

テスト l UTにはVitestを使⽤ u Viteベースのシンプルで強⼒なテストユーティリティライブラリ u 例えば、関数をモック化することで、依存関係のあるコードや外部のリソースとのやり取りを シミュレートできる u コードの振る舞いをテストすることで、コードの品質や信頼性を向上させる ・ ・ vite︓⾼速にビルドをしてくれるツール

Terraformでコード化(IaC︓Infrastructure as a Code) l What’s Terraform︖ Ø コードでインフラストラクチャを作成・管理するためのツール Ø インフラ構築の再現性を担保できる

TerraformでS3バケットを作成 l S3バケットを作成して Webホスティングをする準備 u Terraformをインストール u AWSでIAMユーザ作成 u 構築内容を記述(HCL) u 作成するバケット u ホスティング設定 u ACL u バケットの公開設定 u バケットポリシー u Terraformコマンド実⾏

Github ActionsでCI/CD l Githubに完全統合されているCI/CD Ø Github以外のダッシュボードを⾒に⾏く必要がなく、 あらゆるGithubイベントに対応 l 今回やったこと Ø リポジトリへのPush処理をトリガーとしてWorkflowに 定義した処理を⾃動で実⾏するように設定 Ø Nuxt3で構築した認証フォームを静的コンテンツ化し、 予め⽤意したAWS S3のバケットにデプロイ Ø S3はGithub actionsを使ってTerraform applyして構築 .github/workflows/actions.yml

全体像 ２︓Vscode > Github Actions > アプリをS3にデプロイ １︓Vscode > Github Actions > Terraform > S3バケット作成 ユーザー

まとめ l 社外登壇は初めて l Web開発着⼿2ヶ⽉ちょいで勉強したことの⼀部を紹介 l すごいキズくすりを使って、こまめに回復することが⼤切(教訓) l ふしぎなアメはないので、こつこつ頑張る(重要)

Thank you, catch you later! @sw_ayumu_jp @ayumu_