Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

虎の穴ラボ株式会社

September 09, 2022
Tweet

More Decks by 虎の穴ラボ株式会社

Other Decks in Programming

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のページが1つずつしかない単純なものなので
    以下の内容を追加して、ちょっとWebサイトっぽくします
    ● レイアウトを追加する
    ● ユーザー認証を追加する
    ● 認証済みのときだけログアウトボタン表示
    15

    View Slide

  16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ちょっとWebサイトっぽくする
    チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので
    以下の内容を追加して、ちょっと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のページが1つずつしかない単純なものなので
    以下の内容を追加して、ちょっと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のページが1つずつしかない単純なものなので
    以下の内容を追加して、ちょっと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