Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初心者が行く!サーバレスWebアプリ開発の道
Search
NagaharuTogawa
March 22, 2024
Technology
0
900
初心者が行く!サーバレスWebアプリ開発の道
NagaharuTogawa
March 22, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
170
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
210
怖くない!はじめてのClaude Code
shinya337
0
180
Witchcraft for Memory
pocke
1
580
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
JEDAI Databricks Free Editionもくもく会
taka_aki
1
110
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
130
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
100
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
260
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Unsuck your backbone
ammeep
671
58k
How to Ace a Technical Interview
jacobian
277
23k
Building Adaptive Systems
keathley
43
2.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Practical Orchestrator
shlominoach
188
11k
Visualization
eitanlees
146
16k
Transcript
初心者が行く! サーバレスWebアプリ開発の道 AWS事業本部 コンサルティング部 戸川 永陽 1
2 自己紹介 ・名前 戸川 永陽(とがわ ながはる) ・所属 AWS事業本部 コンサルティング部 ・経歴
都内のSES系の会社に新卒で入社 銀行系のインフラ保守やアプリ開発を4年ほど転々 2024年1月からクラスメソッドにジョイン ・ブログ https://dev.classmethod.jp/author/togawa/ ・好きなAWSサービス AWS Cloud9
3 アジェンダ 1. はじめに 2. 今回作ったWebアプリ 3. 個々の技術に対する開発前の印象 4. スタートダッシュ
5. 詰まったところ 6. やり残したこと 7. 個々の技術に対する開発後の印象 8. 学びと感想
4 1. はじめに - 前提 ※私は初心者です!
5 1. はじめに - 今回お話しすること、しないこと お話しすること • 新しいことに取り組む上で意識したこと • どんな道のりを歩んだか •
気づきや学び お話ししないこと • 個々のサービス、フレームワーク、ライブラリの深掘り • パラメータ設定など細かい部分 • コードの細かい説明
6 2. 今回作ったWebアプリ - サインイン画面 サインイン画面はCognitoのhosted UIを使用
7 2. 今回作ったWebアプリ - アプリ画面 マイク入力した音声の文字起こし。画面からデータの編集が可能
8 2. 今回作ったWebアプリ - 構成図
9 2. 今回作ったWebアプリ - なぜ作ったか • 今回のHibiya.Techは「初心者歓迎!使ってみた技術LT大会」 → 使ったことないけど触ってみたかったサービス、技術だけを使って何か 作ってみたい →
リアルタイム文字起こしの機能を持ったアプリって最近あるし、自分 にもできそう → 自分で作った環境なら今後自分好みにカスタマイズできるだろう から夢が広がる → 取り敢えずやってみる
10 3. 個々の技術に対する開発前の印象 React: なんかSPAが作れる。AngularとVueはちょっとだけ触ったことあるから多分あ んな感じでやれる Amazon Cognito: 遥か昔にちょっと使った記憶。サーバレスシステムに認証機能を持たせたい時 に便利なサービスという認識 Amazon
Transcribe: 音声を文字起こしできるやつ。それをWebアプリからどうやってリアルタイムで やるのかは知らん
11 3. 個々の技術に対する開発前の印象 S3 静的ウェブサイトホスティング: Cognitoと同じで使ったことあるとは思うけど幾星霜の月日の中で細かいこ とは忘れた。別に難しくなかったはず Amazon CloudFront: S3でホスティングしたサイトをhttpsで繋ぎたい時に使える。今回はスモール スタートだし要らない?
12 4. スタートダッシュ - ChatGPT様に頼る とりあえず聞いてみた
13 4. スタートダッシュ - ChatGPT様に頼る なんかできそうな雰囲気だけど、構成に余分な箇所もありそう 作りながら細かく聞きまくることに
14 4. スタートダッシュ - 公式ドキュメントを探す 必要な技術が大まかにわかったので、公式ドキュメントを探して読む ・Amazon Transcribe開発者ガイド - AWS SDKでの文字起こし
https://docs.aws.amazon.com/ja_jp/transcribe/latest/dg/getting-started-sdk.html
15 4. スタートダッシュ - 手を動かしてReact基礎を学ぶ 「React 初心者」で検索 超基礎的なコーディングから雰囲気に慣れる
16 5. 詰まったところ - Cognito サインイン画面に使用したhosted UIのコールバックURLの記載 • 開発中は「http://localhost:3000/」とすべきだったが末尾の「/」を外して 「http://localhost:3000」としていたためエラー ◦
GPTは「URL間違ってませんか?」とは言ってくれたが「末尾の/抜けて ませんか?」とまでは流石に言ってくれなかったので自分で気づく必要 があった
17 5. 詰まったところ - ブラウザマイク入力 ブラウザの保護設定との兼ね合いで、httpではマイク入力を許可できなかった • 本番環境はCloudFront経由でhttps接続することにより解決 ◦ 開発環境ではpackage.jsonをいじって騙すことで回避 ◦
他にいい感じの方法ありそうだったが手っ取り早さを重視
18 6. やり残したこと • AWS Amplifyを試してみたか ◦ https://aws.amazon.com/jp/amplify/ • Transcribeの文字起こしと画面入力による編集を両立させたかった ◦
現状は画面入力で編集した後に文字起こしを行うと、編集した内容が上 書きされ戻ってしまう ◦ コードをもう少し弄れば実現できそう
19 7. 個々の技術に対する開発後の印象 React: JSX(TSX)まだまだよくわからんからしっかり良さを理解できるようになりた い! Amazon Cognito: ちょっとしたアプリが作りたい気分の時には結構便利 Amazon Transcribe:
思ってた以上に簡単に使える ストリーミングが簡単だったので多分バッチも簡単(想像)
20 7. 個々の技術に対する開発後の印象 S3 静的ウェブサイトホスティング: 簡単 Amazon CloudFront: ブラウザでマイク入力する為に必要になった そもそもCognitoのhosted UI使う以上必要だった?
簡単に使えるし、別にhttpにこだわって選択肢から外す必要も無いのかもし れない
21 8. 学びと感想 • 動くものを作るのは楽しい • よく知らない技術でも、必要な情報は簡単に手に入る • ざっくりとした印象しかなかった技術でも、使ってみるとやはり解像度が上が る •
取り敢えずまずは「やってみる」!
22