Tweet
Tweet

Slide 1

Slide 1 text

第120回 雲勉【オンライン】 Skeet を使って Google Cloud で 開発し放題⽣活⼊⾨

Slide 2

Slide 2 text

０．⾃⼰紹介 2 ■ ⼩林千紘 • クラウドインテグレーション事業部開発第⼆セクション • アイレット歴は、1年ちょっと • ⻑所は、寝たら忘れること。（だと思ってます） • よなべして、Skeetさわってます。たのしい。

Slide 3

Slide 3 text

アジェンダ 3 1. Skeetとは︖ 2. さらにSkeetを覗いてみようのコーナー 3. 実際に使ってみよう 4. さいごに

Slide 4

Slide 4 text

本⽇のゴール 4 本⽇のゴールは... Skeetを使ってGoogleCloudに開発放題になること です はじめまして！

Slide 5

Slide 5 text

1. Skeetとは︖ 5

Slide 6

Slide 6 text

1. Skeetとは︖ 6 みなさん、Skeetをご存知でしょうか︖ 私の偏⾒ですが...、まだきっと多分ご存知でないと思います。（願望・偏⾒） なぜなら、今年の6⽉にリリースほやほやだからです。 そんな、ほやほやSkeetをぜひ触っていただくべくお話しさせていただきます。 ＼偏⾒／ ＼ 偏 ⾒ ／

Slide 7

Slide 7 text

1. Skeetとは︖ 7 Skeetを⼀⾔でいうと... なんかすごい開発もデプロイもよしなにしてくれる系 フレームワーク です 一言じゃなくね？

Slide 8

Slide 8 text

1. Skeetとは︖ 8 （ごめんなさい...）公式が説明しているのは以下 GCP (Google Cloud) と Firebase上にフルスタックアプリを構築できるオ ープンソースのサーバーレスフレームワーク Skeet公式サイトより引⽤ https://skeet.dev/ja/ です

Slide 9

Slide 9 text

1. Skeetとは︖ 9 ● 使⽤⾔語は、TypeScrpit ● コマンドを数回ぽちぽちするだけで、デプロイまでしてくれる ● 開発環境も⾄れり尽くせりで、王様気分 ● モジュール式なので⼀部だけ使いたい、というわがままも叶えてくれる ● AIモードがあり、問いかけると、よしなに⾊々作成してくれる ● アプリのテンプレートが4種類あり web、マルチプラットフォーム（iOS・Android）、Web3など...、選びたい放題 基本情報はこんな感じ などなど...

Slide 10

Slide 10 text

1. Skeetとは︖ 10 Skeet公式サイトより引⽤ https://skeet.dev/ja/ アーキテクチャ図はこんな感じ

Slide 11

Slide 11 text

1. Skeetとは︖ 11 Skeet公式サイトより引⽤ https://skeet.dev/ja/ ⼀番ベーシックなwebテンプレート(Next.js (React) + Firestore)はこんな感じ 他に必要な場合は、 GCコンソールをぽちぽち して他のサービスを追加も できます

Slide 12

Slide 12 text

1. Skeetとは︖ 12 要するに... Skeetを使うことで、開発し放題・コード書き放題 ってわけです やったね

Slide 13

Slide 13 text

2. さらにSkeetを覗いてみようのコーナー 13

Slide 14

Slide 14 text

2-0. 覗きこむ、その前に 14 覗き⾒お品書き 1. そもそもアプリテンプレートがやばい 2. 開発環境がいたれりつくせり 3. デプロイが簡単ですごい 4. AIモードがつよい 5. 覗き⾒要点ふりかえり のぞく 深淵をのぞく時深淵も また...

Slide 15

Slide 15 text

2-0. 覗きこむ、その前に 15 と、その前に... Skeet(CLI)の根幹コマンドについて説明します。 このコマンドを知ってればなんやかんやデプロイはできます。 1. $ skeet create 2. $ skeet init 3. $ skeet s 4. $ skeet deploy

Slide 16

Slide 16 text

2-0. 覗きこむ、その前に 16 まずは、なんといっても基本のコマンド。 Skeetアプリを作成します。 ここで、4種類のアプリテンプレートから選択します。 これをしないと何も始まりません。実家。マサラタウン。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-create/ $ skeet create

Slide 17

Slide 17 text

2-0. 覗きこむ、その前に 17 GoogleCloudプロジェクトたちの初期設定、フロント構築、LB作成、Functionsデプロ イ...とアプリ、インフラの初回デプロイを⾏います。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-init/ $ skeet init

Slide 18

Slide 18 text

2-0. 覗きこむ、その前に 18 先ほどのinitコマンドに--loginオプションをつけると、 GoogleCloudのAIのIAM・API有効などのセットアップだけ⾏ってくれます。 具体的には、以下 ● サービスアカウントの作成 ● AIに関するサービスのAPIを有効にする ○ Vertex AI API ○ Cloud Translation API ○ Secret Manager API $ skeet init --login 次のページに続く...

Slide 19

Slide 19 text

2-0. 覗きこむ、その前に 19 ● AIに関するロールをサービスアカウントに追加 ○ Vertex AI Administrator ■ https://cloud.google.com/vertex-ai/docs/general/access-control?hl=ja#aiplatform.admin ○ Cloud Translation API 管理者 ■ https://cloud.google.com/translate/docs/intro-to-v3?hl=ja#iam ○ サービス アカウント ユーザーのロール ■ https://cloud.google.com/iam/docs/service-account-permissions?hl=ja#user-role と、主にプロジェクトのセットアップと、AI系のあれこれをよしなにやってくれる。 似たコマンドに、skeet iam aiがありますが、先にskeet init系コマンドが必要です。 （⾃動でGoogleCloudプロジェクトのセットアップに移⾏はしません）

Slide 20

Slide 20 text

2-0. 覗きこむ、その前に 20 読んで字のコマンド、ロードバランサー周りのバックエンド設定などしてくれる。 具体的には以下。 ● GitHubリポジトリ作成 ● ロードバランサーの設定 （使⽤するドメインについて聞いてくる） ● VPCネットワークを作成 ● GitHub Actionsの設定（CI/CD） ● Functionsをデプロイ ● Cloud Armorの設定 $ skeet init --lb 最低限、先に以下を行っておく必要がありま す。 skeet init --login skeet yarn build(skeet選択)

Slide 21

Slide 21 text

2-0. 覗きこむ、その前に 21 ローカル開発環境をまとめて起動してくれるコマンド。 詳しくは、後ほど紹介します。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-server/ $ skeet s あれこれ開発したものをデプロイしてくれるコマンド。 これも読んで字のコマンド。後ほど紹介します。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-deploy/ $ skeet deploy

Slide 22

Slide 22 text

2-0. 覗きこむ、その前に 22 要するに... 豊かなコマンドを駆使して開発を便利に進めていく ってわけです モジュール式万歳

Slide 23

Slide 23 text

2-0. 覗きこむ、その前に 23 initコマンドの中⾝を解体するとこんな感じ $ skeet init --login $ skeet yarn build $ skeet init モジュール式を 垣間見た $ skeet sync routings $ skeet deploy $ skeet init --lb buildのうち、 skeetのみ選択 deployのうち、 wepappのみ選択

Slide 24

Slide 24 text

2-1. そもそもアプリテンプレートがやばい 24

Slide 25

Slide 25 text

2-1. そもそもアプリテンプレートがやばい 25 以下の導⼊にある程度時間かかるものが、⼊ってます。 これにより⼤幅な時間短縮と、最初から夢中でコードが書けます。 ● 認証（Firebase Authentication） ● フォーム（React Hook Form&Zod） ● ライドモード・ダークモード実装 ● ⽇本語・英語の⾔語切替実装（next-i18next） また、backend側もSchedulerや、Pub/Subのサンプルも⼊っています。 他にも、Httpのプライベート/パブリックのオプションも事前に定義してあるので、 こんな感じに作ればいいのだな。で作れます。お⼿軽。

Slide 26

Slide 26 text

2-1. そもそもアプリテンプレートがやばい 26 アプリのテンプレートが4種類もあります。よりどりみどり。 ● Next.js (React) + GraphQL テンプレート ● Next.js (React) + Firestore テンプレート ● Expo (React Native) + Firestore テンプレート ● Solana Mobile Stack (Expo) + Web (Next.js) - Firestore テンプレート 後ほど、Next.js (React) + Firestore テンプレートを実際に動かしてみます。

Slide 27

Slide 27 text

2-1. そもそもアプリテンプレートがやばい 27 使ってみた感想 Next.js (React) + GraphQL テンプレート ● DBは、PostgreSQL、バージョン指定が可能 （初期値のv15だとエラーがこんにちはする） ● DBのseed, migrateなどのコマンドがSkeet CLIにある。便利 ● Next.jsが14に上がった影響︖か、まだ少し不安定 （tsエラーがこんばんはする） ● 結果、あれこれ弄ればデプロイできる ● とはいえ、GraphQL搭載の環境を簡単に作れて感動 ● GraphQL触りたい⼈エンジニア向け、とてもたのしい

Slide 28

Slide 28 text

2-1. そもそもアプリテンプレートがやばい 28 使ってみた感想 Next.js (React) + Firestore テンプレート ● 流⽯Firebaseとても安定している ● なんとなくデプロイしたい気分になったら⼀番おすすめ ● 美しいNext.js、シンプルイズザベスト、というやつ ● バックエンド（Functions）は、Node.js ● 後ほどたくさん出てきます

Slide 29

Slide 29 text

2-1. そもそもアプリテンプレートがやばい 29 使ってみた感想 Expo (React Native) + Firestore テンプレート ● こちらも流⽯Firebaseとても安定している ● 実機の開発環境もらくらくパラダイス（Expo Go使⽤） ● エミュレータの設定（iOS, Android）は、skeet yarn iosなどで起動可能 ● デプロイも簡単 ただしiOS, Androidは、ビルドして⾃分で申請する必要がありそう （EASコマンドも打てる模様）

Slide 30

Slide 30 text

2-1. そもそもアプリテンプレートがやばい 30 使ってみ...た感想 Solana Mobile Stack (Expo) + Web (Next.js) - Firestore テンプレート なんかすごい、便利そう...。（） （ごめんなさい...、まだ触ってないなんて⾔えない） （圧）

Slide 31

Slide 31 text

2-2. 開発環境がいたれりつくせり 31

Slide 32

Slide 32 text

2-2. 開発環境がいたれりつくせり 32 あれこれ設定せずとも、勝⼿にFirebase Emulatorが使えます。 ワンコマンドで、フルセット起動。24時間戦えます。 $ skeet s オプション指定で、 webや、backendのみの起動もできます。

Slide 33

Slide 33 text

2-2. 開発環境がいたれりつくせり 33 Firebase Emulatorの素敵ポイントは、みやすい＆わかりやすい。 また、ログもFirebase Emulator Suiteでみれます。 他にもプロジェクトルートに、***-debug.logのようなログファイルも書き出されます。 すごく...、ログ命。 Firebase Emulatorの設定ファイルは、 プロジェクトルートのfirebase.json

Slide 34

Slide 34 text

2-2. 開発環境がいたれりつくせり 34 便利コマンド紹介のコーナー $ skeet curl 開発環境のfunctionsをワンコマンドで叩けて便利。⾮常に便利。 環境変数のACCESS_TOKENが必要なので、skeet loginで先に発⾏してください。 ただし、ドキュメントにあるproductionはうまく使えませんでした。かなしい。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-curl/

Slide 35

Slide 35 text

2-2. 開発環境がいたれりつくせり 35 便利コマンド紹介のコーナー $ skeet sync models なんと、バックエンドのモデルをフロントエンドのモデル（型定義）に同期します。 全世界が待ち望んでいましたね。 実際の開発でよくある、バックエンドとフロントエンドの定義のずれを 少しは...緩和できそうですね。 他にもroutings、armorsなどあるので何かとsyncにお世話になります。 https://skeet.dev/ja/doc/skeet-cli/skeet-cli-sync/

Slide 36

Slide 36 text

2-2. 開発環境がいたれりつくせり 36 他にも、Skeet Utilsたちも使い勝⼿がいいので、ぜひ使ってみてください。 どのプロジェクトでも⼤体⾃分たちでutils化してるようなものがあります。 （特に、sendGet, sendPostあたり） https://skeet.dev/ja/doc/plugins/skeet-utils/

Slide 37

Slide 37 text

2-3. デプロイが簡単ですごい 37

Slide 38

Slide 38 text

2-3. デプロイが簡単ですごい 38 初期デプロイは先ほど説明した、以下のskeet initでフルセットデプロイできます。 $ skeet init じゃあ、initでデプロイした後は︖どうするんだい︖ そう、そんな時は、これ。 みんな⼤好き、わくわくデプロイコマンド。ワンコマンド、ぽちするだけ。 $ skeet deploy

Slide 39

Slide 39 text

2-3. デプロイが簡単ですごい 39 先ほども少しでてきましたが、以下のようにweb、skeetなど⼀部のみも選べます。 すると...、茶でもしばいている間にhostingのurlをくれます 自ドメインなしでもデプロイはできますが... 安全性など考慮し、ドメイン取得し設定は行ってくだ さい。 ※ただしネームサーバーの設定など自力で必要です。

Slide 40

Slide 40 text

2-3. デプロイが簡単ですごい 40 Skeetの設定ファイルは、skeet-cloud.config.json このファイルにプロジェクトIDやらドメイン名やら書き出されていきます。 ただし、使いたいサービス部分（例えばCloud Run）に無理やり設定を書いてもうまく いかない...もよう。たぶん。きっと。 オートスケーリングなどの設定もよしなにしてくれてます。 Functionsの設定は、routings/options配下に作成されていますが、 もちろん、⾃分で作成・修正できます。 「3. 実際に使ってみよう」で、実際にデプロイを⾏います。

Slide 41

Slide 41 text

2-4. AIモードがつよい 41

Slide 42

Slide 42 text

2-4. AIモードがつよい 42 以下のコマンドで、どんな時でも答えてくれます。あったけえ。 ただしAPIキーなどのセットアップは必要です。 $ skeet ai OpenAI、VertexAI、どちらも使⽤できます。（デフォルトは、VertexAI） また、⾃分⾃⾝でファインチューニングして微調整できる様です。 ⽇本語設定なども、skeet-cloud.config.jsonから。 https://skeet.dev/ja/doc/skeet-ai/basic/ https://github.com/elsoul/skeet-ai

Slide 43

Slide 43 text

2-4. AIモードがつよい 43 使⽤する際は、以下の⼿順でセットアップが必要です。（VertexAIの場合） 1. $ skeet iam ai 2. 必要な環境変数を設定 a. GCLOUD_PROJECT b. REGION c. GOOGLE_APPLICATION_CREDENTIALS 3. （任意）skeet-cloud.config.jsonの⾔語設定を⽇本語に変更 「3. 実際に使ってみよう」で、詳しい流れを説明しています。

Slide 44

Slide 44 text

2-4. AIモードがつよい 44 Skeet AIには、以下の6モードがあります。 ● Prisma スキーマ⾃動⽣成 ● 関数⾃動⽣成 ● TypeDoc ⾃動⽣成 ● Firestore モデル⾃動⽣成 ● AI 翻訳 ● Firebase Function ⾃動⽣成

Slide 45

Slide 45 text

2-4. AIモードがつよい 45 個⼈的には、以下のコンボが最強かよって思って暮らしてます。 だいたい通常の開発と同じ流れですね。それをよしなにできるなんて...。 Firestore モデル⾃動⽣成 Firebase Function ⾃動⽣成 $ skeet sync

Slide 46

Slide 46 text

2-5. 覗き⾒要点ふりかえり 46

Slide 47

Slide 47 text

2-5. 覗き⾒要点ふりかえり 47 2-1. そもそもアプリテンプレートがやばい ● 認証、フォームなど初期で導⼊されているので、普通にcreate-react-app（古）を する場合に⽐べて初期構築がとても楽 ● テンプレートは4種類あり web、マルチプラットフォーム（iOS・Android）、Web3と⽤途によって選べる 個⼈的には、Firestore テンプレートがおすすめ

Slide 48

Slide 48 text

2-2. 開発環境がいたれりつくせり ● 勝⼿にFirebase Emulatorの設定がしてある。お世話になってます ● Skeet CLIのcurlコマンド、syncコマンドなど便利。痒い所に⼿が届く ● Skeet Utilsは、各プロジェクトでutils化しているような関数で、⾃作せずとも良い ので便利 2-5. 覗き⾒要点ふりかえり 48

Slide 49

Slide 49 text

2-3. デプロイが簡単ですごい ● initコマンド１つで初期デプロイ ● ⼀部変更を加えた場合でも、部分的にデプロイできる ● そもそも、LBやIAMの設定などが本当にありがたい（インフラややこしい） 2-5. 覗き⾒要点ふりかえり 49

Slide 50

Slide 50 text

2-4. AIモードがつよい ● OpenAI、VertexAI、どちらも使⽤できる ファインチューニングもできるので、モデルの微調整もできる ● AIモードには6種類のモードがあり、それぞれ場⾯に合わせて使⽤できる ● 個⼈的には、以下のコンボが便利で、うれしおどろきさんしょの⽊でした Firestoreモデル⾃動⽣成→Firebase Function⾃動⽣成→$skeet sync 2-5. 覗き⾒要点ふりかえり 50

Slide 51

Slide 51 text

3. 実際に使ってみよう 51

Slide 52

Slide 52 text

3-0. 今回の全体像 52 今回は、以下の流れで進めます。 1. アプリ作成 2. 開発環境起動してみる 3. ⼀旦デプロイ 4. AIモードでfunctionを作成してもらう 5. 再デプロイ Next.js (React) + Firestore テンプレートであれば、 基本的に以下の公式セットアップを⾒れば構築できます。 ※環境構築はご⾃⾝でお願いいたします。 https://skeet.dev/ja/doc/skeet-firestore/setup/

Slide 53

Slide 53 text

3-0. 今回の全体像 53 使⽤Skeetテンプレート︓ Next.js (React) + Firestore テンプレート バージョン情報など︓ ● Skeet CLI v1.11.26 ● TypeScript v5.2.2 ● Node.js v18.18.0 ● Yarn v1.22.19 ● Google Cloud SDK v454.0.0 ● Firebase CLI v12.9.1 ● GitHub CLI v2.38.0 ● Java v21.0.1

Slide 54

Slide 54 text

3-0. 今回の全体像 54 Skeet公式サイトより引⽤ https://skeet.dev/ja/ いま、再びのアーキテクチャ図 インフラの中⾝ ● Firestore ● Firebase Authentication ● Cloud Functions for Firebase (第2世代) ● Cloud Load Balancer ● Cloud DNS ● Cloud Armor

Slide 55

Slide 55 text

3-1. アプリ作成 55

Slide 56

Slide 56 text

3-1. アプリ作成 56 まず、GoogleCloudプロジェクトと、Firebaseプロジェクトを作成します。 先ほど作成した、GCプロジェクトをクリック ※入力の場合、クリックしないと追加されません

Slide 57

Slide 57 text

3-1. アプリ作成 57 参考︓ 元のテンプレートの内部関数などを使⽤したい場合、Firebaseプロジェクトのセットア ップが必要です。 具体的には、以下3つ使⽤開始します。 ● Authentication ● Cloud Firestore ● Storage

Slide 58

Slide 58 text

3-1. アプリ作成 58 参考︓Authentication

Slide 59

Slide 59 text

3-1. アプリ作成 59 参考︓Cloud Firestore リージョンは、お好きなところで大丈夫です

Slide 60

Slide 60 text

3-1. アプリ作成 60 参考︓Storage 本番環境モードで良いかと思います。 （限定公開）

Slide 61

Slide 61 text

3-1. アプリ作成 61 まずは、本⽇の主役、Skeetをインストールします。 $ npm i -g @skeet-framework/cli $ npm install -g firebase-tools そして、firebase-toolsもインストール。

Slide 62

Slide 62 text

3-1. アプリ作成 62 続いて、アプリの作成 $ skeet create 上記を押すと4テンプレートから選べます。 かこいいアスキーアートと ともに、アプリ作成完了 あまりにも長い短い名前(6文字以上30文字以下)や、 スネークケースにすると GoogleCloudの構築をするときに不具合が多発します。 ご留意ください。

Slide 63

Slide 63 text

3-2. 開発環境起動してみる 63

Slide 64

Slide 64 text

3-2. 開発環境起動してみる 64 開発環境を起動してみます。 作成からすぐフルセット起動できるってすごいですよね。冷静に。 $ skeet s オプションなしなので、フル起動します。 それぞれ以下のポートで起動します。 ● Next.js ○ http://localhost:4200 ● Firebase Emulator ○ http://localhost:4000

Slide 65

Slide 65 text

3-2. 開発環境起動してみる 65 以下のように、まんま公式サイトが⽴ち上がります。

Slide 66

Slide 66 text

3-3. ⼀旦デプロイ 66

Slide 67

Slide 67 text

3-3. ⼀旦デプロイ 67 $ skeet init というわけで、デプロイします。init（オプションなし） GoogleCloudプロジェクトとFirebaseプロジェクトのID、リージョンを聞かれます。 先ほどのID・リージョンを答えましょう。

Slide 68

Slide 68 text

3-3. ⼀旦デプロイ 68 次にFirebase CLIのログイン画⾯に遷移します。 ログインしましょう。 無事、Woohoo! 成功です。

Slide 69

Slide 69 text

3-3. ⼀旦デプロイ 69 少し待つと、今度は⼩難しいことを聞かれます。 「もう設定したの︖しっかりチェックした︖やったね︕」という意味らしいです。 （by AI翻訳） やったね。こちらも元気にyesを選択しましょう。

Slide 70

Slide 70 text

3-3. ⼀旦デプロイ 70 すると、怒涛の質問攻めが始まります。 GitHubのリポジトリの名前と、各種ドメイン名を聞かれます。 ちなみに、GitHubのリポジトリは、事前に作成しないでください。怒られます。 また、「Username/希望のリポジトリ名」の形式で⼊⼒してください。

Slide 71

Slide 71 text

3-3. ⼀旦デプロイ 71 各種ドメイン名は、書いてある通りですが、こんな感じ。 ● your domain address for App ○ 主にSEO関係に使⽤されていて、 Googleサイトマップインデックス、XMLサイトマップの作成、などを⾏って います。 次のページに続く...

Slide 72

Slide 72 text

3-3. ⼀旦デプロイ 72 ● your domain address for Domain Name Server ○ Cloud DNSの設定を⾏ってくれています。メインドメイン。 ● your subdomain address for Load Balancer ○ こちらも、Cloud DNSの設定を⾏ってくれています。 そのままですが、ロードバランサー⽤のサブドメインです。

Slide 73

Slide 73 text

3-3. ⼀旦デプロイ 73 再びしばらくすると、ホスティングの情報と。

Slide 74

Slide 74 text

3-3. ⼀旦デプロイ 74 DNSの情報をくれます。 この情報を元にDNS設定をすると、⾃ドメインのhostingができます。 調べるといっぱい出てくるので、設定してみてください。

Slide 75

Slide 75 text

3-3. ⼀旦デプロイ 75 わくわく、どきどきのデプロイ確認タイム。 先ほどのhosting url(https://XXXXXXXXX.web.app)を開いてみると... 無事デプロイされてます。

Slide 76

Slide 76 text

3-4. AIモードでfunctionを作成してもらう 76

Slide 77

Slide 77 text

3-4. AIモードでfunctionを作成してもらう 77 はい。デプロイ祝いも束の間。 AIモードでfunctionを作ってもらいましょう。 ちなみに今回は、デフォルトのVertex AIを使⽤します。 OpenAIの⽅を使⽤する場合APIキーの設定など変わります。 $ skeet iam ai まず、AIモードを使⽤するための初期設定。

Slide 78

Slide 78 text

3-4. AIモードでfunctionを作成してもらう 78 と、ちょっと待ったぁ。もうひとつ。 以下もコピペしちまってください。（これに⼩⼀時間悩みました。唐突な⾃分語り） $ export GOOGLE_APPLICATION_CREDENTIALS="keyfile.json" すると必要な環境変数を書き出してくれます。 これをそのまま、ターミナルにコピペ。

Slide 79

Slide 79 text

3-4. AIモードでfunctionを作成してもらう 79 最後に、⾔語設定を⽇本語に変えます。 デフォルトは、英語なのでそのままでもOK、Goodです。私はニホンゴにします。 プロジェクトルートのskeet-cloud.config.jsonの AIセクション部分の"lang": "ja"としてください。

Slide 80

Slide 80 text

3-4. AIモードでfunctionを作成してもらう 80 これで動きます。aiコマンドすると... $ skeet ai お⼿伝い（謙遜）してくれます。

Slide 81

Slide 81 text

3-4. AIモードでfunctionを作成してもらう 81 問いかけに答えてくれます。うれしい。やさしいせかい。

Slide 82

Slide 82 text

3-4. AIモードでfunctionを作成してもらう 82 もう⼀踏ん張り。 Functionモードにして、作ってもらいます。 AIモードのまま、以下を⼊⼒すると切り替わります。 $ function

Slide 83

Slide 83 text

3-4. AIモードでfunctionを作成してもらう 83 作って欲しいものを問いかけると... 即座に作ってくれます。

Slide 84

Slide 84 text

3-4. AIモードでfunctionを作成してもらう 84 中⾝はこんな感じ 個⼈的に…中⾝も書いてくれるとうれしい気持ち。 （あくまで妄想ですが、methodモードで中⾝を別ファイルで書き出してimportする。 という使い⽅を想定してるのかなと思ってます。）

Slide 85

Slide 85 text

3-4. AIモードでfunctionを作成してもらう 85 参考︓methodモードはこんな感じ

Slide 86

Slide 86 text

3-5. 再デプロイ 86

Slide 87

Slide 87 text

3-5. 再デプロイ 87 中⾝を調整して...、フロントに適当なボタンを置いて...デプロイしてみます。 $ skeet deploy hello worldボタンをクリックする と、裏のFunctionが呼ばれます

Slide 88

Slide 88 text

3-5. 再デプロイ 88 Functionも無事デプロイされてますね。 Functionの中⾝はこんな感じ

Slide 89

Slide 89 text

3-5. 再デプロイ 89 はい。hello world。デプロイ完了です。

Slide 90

Slide 90 text

3-5. 再デプロイ 90 注意事項︓ 今回のデモの裏側では、Firebase Functionsのエンドポイントを直接叩く⽅法にしてい ます。（とても⾮推奨です） セキュリティ的にも安全なので、DNSの設定を⾏ってください。 また、DNS設定を⾏うと、fetchSkeetFunctionsでmethodNameを使⽤して叩けるよう になったりなど恩恵は盛りだくさんです。

Slide 91

Slide 91 text

4. さいごに 91

Slide 92

Slide 92 text

4. さいごに 92 いかがだったでしょうか。 Skeet、インフラ周りも、アプリ周りも、あれこれやってくれて、 本当に爆速すぎてサービスを乱⽴しすぎないか⼼配です。 ただ、まだ出来⽴てフレームワークなので、すこし...伸びしろだなと思うところもあり ます。 が、伸びしろは、あるほどいい、ということで。成⻑期。私も伸びしろ。 すこしでもSkeetいいな。使ってみたいな。と思っていただけたら幸甚の極みです。

Slide 93

Slide 93 text

4. さいごに 93 公式サイトまとめ ● Skeet公式 ○ https://skeet.dev/ja/ ● Skeet Framework Plugin - AI ○ https://github.com/elsoul/skeet-ai ● Google Cloud ○ https://cloud.google.com/?hl=ja ● Next.js ○ https://nextjs.org/ ● Firebase ○ https://firebase.google.com/?hl=ja

Slide 94

Slide 94 text

4. さいごに 94 最後に⼀⾔ やっぱりエンジニアリングはおもしろい です 万歳！

Slide 95

Slide 95 text

4. さいごに 95 ご視聴いただきありがとうございました ですます ありがとう ございました！