LoginSignup
8

More than 1 year has passed since last update.

React×Amplifyでブログサイトを作成

Last updated at Posted at 2021-05-14

React、TypeScript、ReduxToolKit、Amplifyの学習の一環と自前のブログサイトが欲しいと思いがあったので、実際にブログサイトを作ってみました。

仕様技術/ライブラリー

  • React
  • TypeScript
  • Redux(ToolKit)
  • Amplify、Appsync、AWS
  • GraphQL
  • chakra-ui
  • react-share
  • react-simplemde-editor

UI画像一覧

一般ユーザーのHome画面
スクリーンショット 2021-05-14 14.40.36.png
一般ユーザー記事詳細画面
screenshot-www.ryota-programming-blog.com-2021.05.14-14_43_54.png
ログイン画面
スクリーンショット 2021-05-14 14.45.13.png
管理者側記事詳細画面
(編集と削除ボタンあり)
スクリーンショット 2021-05-14 14.45.40.png
記事編集画面

スクリーンショット 2021-05-14 14.49.43.png

新規投稿画面
スクリーンショット 2021-05-14 14.46.06.png

仕様

  • 一般ユーザーページ

    ①記事一覧画面

    ②記事詳細画面

    記事詳細画面トップ画像、作成日、更新日、コメント数、タイトル、本文、コメント機能、SNSシェア機能を実装。
    コメント機能は記事に対してフィードバックが貰えたら嬉しいなという思いで実装しました。
    (コメントするのにログインは必要なく、名前を記入しなくとも大丈夫です。)

  • 管理者ユーザーページ

    ①ログインページ
    UIは自前ですが実際のログイン機能はAmplifyのAuthを使用。
    サインアップはできないようにログイン機能のみを実装。
    ②記事一覧画面

    基本的には一般ユーザーと同様です。
    ③記事詳細画面

    基本的には一般ユーザーと同じ仕様ですが管理者側には編集と削除ボタンがあり。
    (同じコンポーネントを使用してログインしているかどうかでボタンを表示したり非表示したりしています。)
    ④記事編集画面
    記事の編集を行えます。
    ⑤新規投稿画面
    マークダウン形式で記事の投稿、トップ画像の設定が可能。
    (画像を設定しない際にはデフォルトでNO_IMAGEとなります)
    またリロードしても内容が消えないようにローカルストレージを使用して一時保存可能。

Reduxでユーザー情報、コメント情報、投稿情報を管理させています。
DBはAmplify経由でDynamoDBを利用、GraphQLでAPIを叩いています。

制作を通して苦労した点

GraphQLのスキーマ定義にかなり苦戦しました。
特にauthの理解が乏しく最後の最後にログインしていないユーザーがコメントできないという事象が発生しました。
この原因が権限を userPoolsにしか付与していなかったことでした。なのでログインしていないユーザーにも権限を付与するためにGraphQLのスキーマを再定義してなんとか解消しました。GraphQLとAWSのインプットとアウトプットをもっと行い知識として定着させたいです。

制作を通しての感想

chakra-uiが便利で感動しました..。レスポンシブを容易に組めるのでUI構築がサクサクと進んでかなり効率的にアプリの作成ができました。
以前まで苦労していたTypeScriptはかなり慣れることができました。
この作品を作る前に別のアプリを作った際にTypeScriptを導入しませんでした。その時は思わぬところでエラーが出たりと苦戦することが多かったのでやっとTypeScriptの恩恵を得られるようになりました。

参考サイト

https://qiita.com/too/items/cb1dfb4f44536a3e9855
https://qiita.com/kazuhiro1982/items/b1183103f41b8e976f6a
https://qiita.com/Engineer_Grotle/items/fa37a3924d1e66082889

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8