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

20230630_QiitaEnginnerFesta登壇資料

ayumun
June 30, 2023
110

 20230630_QiitaEnginnerFesta登壇資料

初社外登壇です。

ayumun

June 30, 2023
Tweet

Transcript

  1. 情報発信(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は⾚⾊に (脳みそが焼ける) すごいキズぐすり、やけどなおし (筋トレ/サウナ/ビール/うまい飯) キズ治すぜ
  2. Vuetify3/Firebase/Nuxt3(Vue,Typescript)で 認証フォーム構築 l 技術 Ø Nuxt3(Vue.js,Typescript),Vuetify3,Firebase Auth l 作成したログイン機能の認証フロー •

    デザインフレームワーク(ライブラリ) Web開発に必要なボタンやメニューなどの テンプレートがあるので簡単/⾼速にwebサイトを作成できる • Firebase バックエンドの機能を担ってくれるMbaaS(Mobile backend as a Service)のこと
  3. ところでVuetifyってなにがいいんですか l Vuetifyとは︖ Ø Vue.jsのUIライブラリ Ø Googleが提唱するマテリアルデザインにのっとり、 直感的で使いやすいUIをデザインの知識が皆無でも簡単に作成できる l マテリアルデザインとは︖

    l 現実世界の物理法則に従うデザイン l つまり、ユーザが直感的に操作可能なデザイン (例︓Twitterの下のボタンは浮いているから押すものだとわかる) 簡単⾼速にバリデーション込みのマテリアルデザインを実現可能︕ (カスタマイズは、ちとむずい) Vuetifyを使うことで・・・
  4. クリーンアーキテクチャのお勉強 View • (例)ログイン時⼊⼒エラー 1. View︓UI表⽰,⼊⼒ 2. Controller︓データを渡す 3. Usecase︓ロジック適⽤

    4. Presenter︓データ加⼯ 5. View︓UI表⽰ • クリーンアーキテクチャってなに︖ 再利⽤可能な設計のこと。 ソフトウェアをレイヤー分けすることで 依存関係の分離を実現し⾼品質なシステムを 構築するアプローチ。 ディレクトリ構造や各ファイルの役割、 データの流れを意識し開発︕
  5. TerraformでS3バケットを作成 l S3バケットを作成して Webホスティングをする準備 u Terraformをインストール u AWSでIAMユーザ作成 u 構築内容を記述(HCL)

    u 作成するバケット u ホスティング設定 u ACL u バケットの公開設定 u バケットポリシー u Terraformコマンド実⾏
  6. 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