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
Amplify + Next.js + TypeScript のアプリをいい感じにしたかった
Search
虎の穴ラボ株式会社
September 09, 2022
Programming
1
960
Amplify + Next.js + TypeScript のアプリをいい感じにしたかった
2022/09/08 フロントエンドLT会 - vol.8
「Amplify + Next.js + TypeScript のアプリをいい感じにしたかった」
登壇資料です。
虎の穴ラボ株式会社
September 09, 2022
Tweet
Share
More Decks by 虎の穴ラボ株式会社
See All by 虎の穴ラボ株式会社
Tailwind CSSとAtomic Designで実現する効率的な Web 開発の事例
toranoana
1
490
Denoについて、同人誌記事を出しました+update
toranoana
0
160
【虎の穴ラボ Tech Talk #2】プロンプトエンジニアリング
toranoana
0
95
20241121_[TechTalk#2]虎の穴ラボでのLLMについて取り組み紹介
toranoana
0
86
社内チャットへRAG導入した話(Tech Talk #2)
toranoana
0
150
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
520
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
toranoana
0
360
虎の穴ラボ Tech Talk_CDKでFargate環境構築
toranoana
1
380
虎の穴ラボスキルアップ支援制度の利用例
toranoana
0
6.7k
Other Decks in Programming
See All in Programming
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.8k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
12
3.7k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Embracing the Ebb and Flow
colly
86
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Amplify +
Next.js + TypeScript のアプリを いい感じにしたかった 2022/09/08 フロントエンドLT会 - vol.8 #frontendlt 虎の穴ラボ 西志村友基 1
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 自己紹介 西志村 友基
• 所属:虎の穴ラボ株式会社 • 担当:Fantiaなど • 入社理由: ◦ BtoCサービスに関わりたい ◦ 一生に一度はオタク業界に関わりたい • 趣味:アニメ鑑賞、ゲーム、競馬 2
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと •
Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 3
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと •
Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 4
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. みなさん、Amplifyつかってますか 5
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. AWS Amplifyとは
1. ウェブアプリやモバイルアプリを素早く構築できるツール 2. GraphQL APIを自動生成し基本的なデータ操作が可能 3. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可能 4. 対話形式で各種設定を行うことができる 5. 数クリックでアプリを公開できる 6. Amplify Studioによる容易なコンテンツ管理 6
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Amplifyは公式ドキュメントが充実 Amplifyは詳しい公式ドキュメントがあるので
Amplifyの勉強は基本的に公式ドキュメント読めばOK https://docs.amplify.aws/ 7
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 充実したドキュメントですが… ドキュメントにはTypeScriptでの実装例がありません。
TypeScriptで実装したい場合は実装者が置き換える必要があります。 TypeScriptで実装した例はとらラボのブログ(後述)にて紹介していますので ぜひ御覧ください。 8
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まずはチュートリアル Amplifyのドキュメントには開発のチュートリアルがあります。
VueやReactなど様々な選択肢がありますが、 今回はNext.jsを選びました。 9
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. チュートリアルで学べること チュートリアルでは以下のようなことを学べます。
• GraphQL APIの実装方法 • Next.jsでSSRとSSGを実装する方法 チュートリアルを通して、 簡単なメッセージを投稿するアプリを作れます。 10
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. SSRとSSGについて SSR:
Server Side Rendering • サーバーサイドレンダリング • ページ遷移の度にサーバー側でHTMLを生成してレスポンスを返す SSG(単にSGとも): Static Site Generation • ページを初回にビルドしたときだけHTMLを生成し、各ロード時に再利用される • 更新が入らないページに向いている 11
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. SSR・SSGのメリットデメリット 12
SSR メリット • ユーザーの通信環境に左右されない • 更新頻度の高いアプリにも対応可能 デメリット • サーバー側の負荷がある SSG メリット • パフォーマンスが向上 • Next.jsを開発しているVercelが推奨 デメリット • ページが更新されてもページに反映され ない • 多数ページがあるとビルドに時間がかか る 適したサービス • 動画投稿サイト • SNS • 大規模サイト 適したサービス • 更新頻度の少ないブログ • コーポレートサイト • 中規模サイト
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Next.js +
TypeScriptで実装する ソースはブログに記載していますので参考にしてください。 (だいぶ前に書いた内容ですが、基本は同じはずです) Next.js + TypeScript + AWS Amplify でアプリケーション開発 https://toranoana-lab.hatenablog.com/entry/2021/11/08/170216 13
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと •
Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 14
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので
以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 15
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので
以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 16
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. レイアウト レイアウトコンポーネント:components/layout.tsx を作成します
import Footer from "./footer" import Header from "./header" import { ReactNode } from "react"; interface LayoutProps { children: ReactNode; } const Layout = ({children}: LayoutProps) =>{ return( <> <Header /> <main>{children}</main> <Footer /> </> ) } export default Layout 17
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. レイアウトを適用させる _app.tsxを修正します
function MyApp({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyApp 18
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので
以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 19
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 認証を追加する Amplifyを使って認証機能を追加することができます
設定は以下の通り $ amplify add auth 20
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ログイン認証 最も簡単に認証を実装する方法は
<Authenticator>で囲う方法です。 ログイン認証を入れたい箇所にタグを入れるだけです。 import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; const Home: NextPage = () => { return ( <Authenticator> <...> </Authenticator> ) } 認証済みであれば この中を表示するイメージ 21
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Authenticatorについて AuthenticatorはAmplify
UIというライブラリの一部です。 Amplify UIはUI開発にAmplifyのシンプルさや拡張性を提供します。 https://ui.docs.amplify.aws/react/connected-components/authenticator 22
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので
以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 23
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ログアウト import
{ useAuthenticator } from "@aws-amplify/ui-react"; import Link from "next/link" import { Auth } from "aws-amplify"; const Nav = () => { const { route } = useAuthenticator((context) => [context.route]); let logOutLink = <></> if (route == "authenticated"){ logOutLink = <li><a onClick={() => Auth.signOut()} href={"javascript: void(0);"} >ログアウト</a></li> } return( <nav> <ul className={styles.list}> … {logOutLink} </ul> </nav> ) } ユーザーが認証済みかかどう か判定できます 24
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. useAuthenticator フック
Authenticator の認証状態の確認、変更、および更新に使用できます。 使用するコンポーネントを <Authenticator.Provider>で囲う必要がある点は注意です。 https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook 25 import { Authenticator } from '@aws-amplify/ui-react'; export default () => ( <Authenticator.Provider> <App /> </Authenticator.Provider> );
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと •
Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 26
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まとめ •
Amplifyにバックエンドはおまかせ ◦ 認証やデータ操作などをサポート • Next.js+TypeScriptでアプリ開発 ◦ SSRやSSGの特性を理解して必要に応じて使い分けましょう • TypeScript… がんばって勉強しましょう。。 27
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 過去の発表資料 Amplifyについての過去の発表はこちらです
React + Amplifyで アプリ開発 https://www.slideshare.net/toranoana-lab/react-amplify Amplify Studioを使ってみた https://www.slideshare.net/toranoana-lab/amplify-studio 28
Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 関連ブログ Next.js
+ TypeScript + AWS Amplify でアプリケーション開発 https://toranoana-lab.hatenablog.com/entry/2021/11/08/170216 新機能「AWS Amplify Studio」を試してみました https://toranoana-lab.hatenablog.com/entry/2021/12/15/150000 29