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
830
初心者が行く!サーバレスWebアプリ開発の道
NagaharuTogawa
March 22, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
RSNA2024振り返り
nanachi
0
500
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
事業継続を支える自動テストの考え方
tsuemura
0
300
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
A Philosophy of Restraint
colly
203
16k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Facilitating Awesome Meetings
lara
51
6.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Why Our Code Smells
bkeepers
PRO
335
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Site-Speed That Sticks
csswizardry
3
370
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
What's in a price? How to price your products and services
michaelherold
244
12k
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