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
910
初心者が行く!サーバレスWebアプリ開発の道
NagaharuTogawa
March 22, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
170
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.8k
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
880
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
230
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Thoughts on Productivity
jonyablonski
69
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Scaling GitHub
holman
461
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
179
9.9k
Optimizing for Happiness
mojombo
379
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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