Amplify + Next.js + TypeScript のアプリをいい感じにしたかった

2022/09/08 フロントエンドLT会 - vol.8
「Amplify + Next.js + TypeScript のアプリをいい感じにしたかった」
登壇資料です。

Transcript

1. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   Amplify + Next.js + TypeScript
   のアプリを
   いい感じにしたかった
   2022/09/08 フロントエンドLT会 - vol.8 #frontendlt
   虎の穴ラボ　西志村友基
   1
   

   View Slide

2. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   自己紹介
   西志村　友基
   ● 所属：虎の穴ラボ株式会社
   ● 担当：Fantiaなど
   ● 入社理由：
   ○ BtoCサービスに関わりたい
   ○ 一生に一度はオタク業界に関わりたい
   ● 趣味：アニメ鑑賞、ゲーム、競馬
   2
   

   View Slide

3. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   やりたいこと
   ● Amplify チュートリアルをやってみよう
   ● ちょっとWebサイトっぽくする
   ● まとめ
   3
   

   View Slide

4. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   やりたいこと
   ● Amplify チュートリアルをやってみよう
   ● ちょっとWebサイトっぽくする
   ● まとめ
   4
   

   View Slide

5. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   みなさん、Amplifyつかってますか
   5
   

   View Slide

6. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   AWS Amplifyとは
   1. ウェブアプリやモバイルアプリを素早く構築できるツール
   2. GraphQL APIを自動生成し基本的なデータ操作が可能
   3. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可能
   4. 対話形式で各種設定を行うことができる
   5. 数クリックでアプリを公開できる
   6. Amplify Studioによる容易なコンテンツ管理
   6
   

   View Slide

7. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   Amplifyは公式ドキュメントが充実
   Amplifyは詳しい公式ドキュメントがあるので
   Amplifyの勉強は基本的に公式ドキュメント読めばOK
   https://docs.amplify.aws/
   7
   

   View Slide

8. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   充実したドキュメントですが…
   ドキュメントにはTypeScriptでの実装例がありません。
   TypeScriptで実装したい場合は実装者が置き換える必要があります。
   TypeScriptで実装した例はとらラボのブログ(後述)にて紹介していますので
   ぜひ御覧ください。
   8
   

   View Slide

9. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   まずはチュートリアル
   Amplifyのドキュメントには開発のチュートリアルがあります。
   VueやReactなど様々な選択肢がありますが、
   今回はNext.jsを選びました。
   9
   

   View Slide

10. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    チュートリアルで学べること
    チュートリアルでは以下のようなことを学べます。
    ● GraphQL APIの実装方法
    ● Next.jsでSSRとSSGを実装する方法
    チュートリアルを通して、
    簡単なメッセージを投稿するアプリを作れます。
    10
    

    View Slide

11. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    SSRとSSGについて
    SSR: Server Side Rendering
    ● サーバーサイドレンダリング
    ● ページ遷移の度にサーバー側でHTMLを生成してレスポンスを返す
    SSG(単にSGとも): Static Site Generation
    ● ページを初回にビルドしたときだけHTMLを生成し、各ロード時に再利用される
    ● 更新が入らないページに向いている
    11
    

    View Slide

12. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    SSR・SSGのメリットデメリット
    12
    SSR
    メリット
    ● ユーザーの通信環境に左右されない
    ● 更新頻度の高いアプリにも対応可能
    デメリット
    ● サーバー側の負荷がある
    SSG
    メリット
    ● パフォーマンスが向上
    ● Next.jsを開発しているVercelが推奨
    デメリット
    ● ページが更新されてもページに反映され
    ない
    ● 多数ページがあるとビルドに時間がかか
    る
    適したサービス
    ● 動画投稿サイト
    ● SNS
    ● 大規模サイト
    適したサービス
    ● 更新頻度の少ないブログ
    ● コーポレートサイト
    ● 中規模サイト
    

    View Slide

13. 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
    

    View Slide

14. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    やりたいこと
    ● Amplify チュートリアルをやってみよう
    ● ちょっとWebサイトっぽくする
    ● まとめ
    14
    

    View Slide

15. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ちょっとWebサイトっぽくする
    チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので
    以下の内容を追加して、ちょっとWebサイトっぽくします
    ● レイアウトを追加する
    ● ユーザー認証を追加する
    ● 認証済みのときだけログアウトボタン表示
    15
    

    View Slide

16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ちょっとWebサイトっぽくする
    チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので
    以下の内容を追加して、ちょっとWebサイトっぽくします
    ● レイアウトを追加する
    ● ユーザー認証を追加する
    ● 認証済みのときだけログアウトボタン表示
    16
    

    View Slide

17. 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(
    <>
    
    {children}
    
    >
    )
    }
    export default Layout
    17
    

    View Slide

18. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    レイアウトを適用させる
    _app.tsxを修正します
    function MyApp({ Component, pageProps }) {
    return (
    
    
    
    )
    }
    export default MyApp
    18
    

    View Slide

19. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ちょっとWebサイトっぽくする
    チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので
    以下の内容を追加して、ちょっとWebサイトっぽくします
    ● レイアウトを追加する
    ● ユーザー認証を追加する
    ● 認証済みのときだけログアウトボタン表示
    19
    

    View Slide

20. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    認証を追加する
    Amplifyを使って認証機能を追加することができます
    設定は以下の通り
    $ amplify add auth
    20
    

    View Slide

21. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ログイン認証
    最も簡単に認証を実装する方法は
    で囲う方法です。
    ログイン認証を入れたい箇所にタグを入れるだけです。
    import { Authenticator } from '@aws-amplify/ui-react';
    import '@aws-amplify/ui-react/styles.css';
    const Home: NextPage = () => {
    return (
    
    
    
    )
    }
    認証済みであれば
    この中を表示するイメージ
    21
    

    View Slide

22. 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
    

    View Slide

23. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ちょっとWebサイトっぽくする
    チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので
    以下の内容を追加して、ちょっとWebサイトっぽくします
    ● レイアウトを追加する
    ● ユーザー認証を追加する
    ● 認証済みのときだけログアウトボタン表示
    23
    

    View Slide

24. 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 = Auth.signOut()} href={"javascript: void(0);"} >ログアウト
    }
    return(
    
    
    …
    {logOutLink}
    
    
    )
    }
    ユーザーが認証済みかかどう
    か判定できます
    24
    

    View Slide

25. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    useAuthenticator フック
    Authenticator の認証状態の確認、変更、および更新に使用できます。
    使用するコンポーネントを
    で囲う必要がある点は注意です。
    https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook
    25
    import { Authenticator } from '@aws-amplify/ui-react';
    export default () => (
    
    
    
    );
    

    View Slide

26. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    やりたいこと
    ● Amplify チュートリアルをやってみよう
    ● ちょっとWebサイトっぽくする
    ● まとめ
    26
    

    View Slide

27. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    まとめ
    ● Amplifyにバックエンドはおまかせ
    ○ 認証やデータ操作などをサポート
    ● Next.js＋TypeScriptでアプリ開発
    ○ SSRやSSGの特性を理解して必要に応じて使い分けましょう
    ● TypeScript… がんばって勉強しましょう。。
    27
    

    View Slide

28. 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
    

    View Slide

29. 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
    

    View Slide