初心者が行く！ サーバレスWebアプリ開発の道
 AWS事業本部 コンサルティング部
 戸川 永陽
 1

2 自己紹介 ・名前 戸川 永陽（とがわ ながはる） ・所属 AWS事業本部 コンサルティング部 ・経歴 都内のSES系の会社に新卒で入社 銀行系のインフラ保守やアプリ開発を４年ほど転々 2024年1月からクラスメソッドにジョイン ・ブログ https://dev.classmethod.jp/author/togawa/ ・好きなAWSサービス AWS Cloud9

3 アジェンダ 1. はじめに 2. 今回作ったWebアプリ 3. 個々の技術に対する開発前の印象 4. スタートダッシュ 5. 詰まったところ 6. やり残したこと 7. 個々の技術に対する開発後の印象 8. 学びと感想

4 １.　はじめに - 前提 ※私は初心者です！

5 １.　はじめに - 今回お話しすること、しないこと お話しすること ● 新しいことに取り組む上で意識したこと ● どんな道のりを歩んだか ● 気づきや学び お話ししないこと ● 個々のサービス、フレームワーク、ライブラリの深掘り ● パラメータ設定など細かい部分 ● コードの細かい説明

6 ２.　今回作ったWebアプリ - サインイン画面 サインイン画面はCognitoのhosted UIを使用

7 ２.　今回作ったWebアプリ - アプリ画面 マイク入力した音声の文字起こし。画面からデータの編集が可能

8 ２.　今回作ったWebアプリ - 構成図

9 ２.　今回作ったWebアプリ - なぜ作ったか ● 今回のHibiya.Techは「初心者歓迎！使ってみた技術LT大会」 → 使ったことないけど触ってみたかったサービス、技術だけを使って何か 作ってみたい → リアルタイム文字起こしの機能を持ったアプリって最近あるし、自分 にもできそう → 自分で作った環境なら今後自分好みにカスタマイズできるだろう から夢が広がる → 取り敢えずやってみる

10 ３.　個々の技術に対する開発前の印象 React： なんかSPAが作れる。AngularとVueはちょっとだけ触ったことあるから多分あ んな感じでやれる Amazon Cognito： 遥か昔にちょっと使った記憶。サーバレスシステムに認証機能を持たせたい時 に便利なサービスという認識 Amazon Transcribe： 音声を文字起こしできるやつ。それをWebアプリからどうやってリアルタイムで やるのかは知らん

11 ３.　個々の技術に対する開発前の印象 S3 静的ウェブサイトホスティング： Cognitoと同じで使ったことあるとは思うけど幾星霜の月日の中で細かいこ とは忘れた。別に難しくなかったはず Amazon CloudFront： S3でホスティングしたサイトをhttpsで繋ぎたい時に使える。今回はスモール スタートだし要らない？

12 ４.　スタートダッシュ - ChatGPT様に頼る とりあえず聞いてみた

13 ４.　スタートダッシュ - ChatGPT様に頼る なんかできそうな雰囲気だけど、構成に余分な箇所もありそう 作りながら細かく聞きまくることに

14 ４.　スタートダッシュ - 公式ドキュメントを探す 必要な技術が大まかにわかったので、公式ドキュメントを探して読む ・Amazon Transcribe開発者ガイド - AWS SDKでの文字起こし https://docs.aws.amazon.com/ja_jp/transcribe/latest/dg/getting-started-sdk.html

15 ４.　スタートダッシュ - 手を動かしてReact基礎を学ぶ 「React 初心者」で検索 　超基礎的なコーディングから雰囲気に慣れる

16 ５.　詰まったところ - Cognito サインイン画面に使用したhosted UIのコールバックURLの記載 ● 開発中は「http://localhost:3000/」とすべきだったが末尾の「/」を外して 「http://localhost:3000」としていたためエラー ○ GPTは「URL間違ってませんか？」とは言ってくれたが「末尾の/抜けて ませんか？」とまでは流石に言ってくれなかったので自分で気づく必要 があった

17 ５.　詰まったところ - ブラウザマイク入力 ブラウザの保護設定との兼ね合いで、httpではマイク入力を許可できなかった ● 本番環境はCloudFront経由でhttps接続することにより解決 ○ 開発環境ではpackage.jsonをいじって騙すことで回避 ○ 他にいい感じの方法ありそうだったが手っ取り早さを重視

18 ６.　やり残したこと ● AWS Amplifyを試してみたか ○ https://aws.amazon.com/jp/amplify/ ● Transcribeの文字起こしと画面入力による編集を両立させたかった ○ 現状は画面入力で編集した後に文字起こしを行うと、編集した内容が上 書きされ戻ってしまう ○ コードをもう少し弄れば実現できそう

19 ７.　個々の技術に対する開発後の印象 React： JSX(TSX)まだまだよくわからんからしっかり良さを理解できるようになりた い！ Amazon Cognito： ちょっとしたアプリが作りたい気分の時には結構便利 Amazon Transcribe： 思ってた以上に簡単に使える ストリーミングが簡単だったので多分バッチも簡単（想像）

20 ７.　個々の技術に対する開発後の印象 S3 静的ウェブサイトホスティング： 簡単 Amazon CloudFront： ブラウザでマイク入力する為に必要になった そもそもCognitoのhosted UI使う以上必要だった？ 簡単に使えるし、別にhttpにこだわって選択肢から外す必要も無いのかもし れない

21 ８.　学びと感想 ● 動くものを作るのは楽しい ● よく知らない技術でも、必要な情報は簡単に手に入る ● ざっくりとした印象しかなかった技術でも、使ってみるとやはり解像度が上が る ● 取り敢えずまずは「やってみる」！

22