Reactでポートフォリオサイトを作成

4375 ワード
figma AtomicDesign amplify TypeScript React TypeScript テキストリンク

はじめに

アプリを作成する上での今回のテーマは次の通りです。

1. 何かしらのデザインツールを使用してデザインを作成する。
2. Atomic Designの概念を理解し、コンポーネント指向でアプリを作成する。

これらを意識してデザイン作成を行う事で、Atomic Designとコンポーネントに関しての理解を深める事や、将来的にデザイナーさんやその他の方達とスムーズにコミュニケーションを取る為の最低限のデザインに関する知識を身につける事が今回のメインのテーマでした。

デザイン

今回はデザインを作成するにあたってFigmaを使用しました。苦労した点としては、デザインツール自体の利用が初めてだったので使い方を覚えるところから始めました。基本的に使いながら覚える事は大事ですが、どこにどんな機能があるかや最低限の良く利用する便利な機能などのインプット学習は、ある程度必要だと思いました。

特に良く使用する機能として『グループ化』、『コンポーネント機能』があります。
ここで大事になってくるのがAtomic Designに基づいたデザインでの構築です。
Figmaを使ってデザインを作成しているうちに、Atoms, Molecules, Organisms, Components, Templatesといった概念が身についていきました。

超初心者がAtomic Designをより理解する為のアドバイス

こちらがFigmaで実際に作成したアプリの一部です。

コンポーネント化した部分はヘッダーとプロジェクトのアイテム部分です。
本来であればコンタクトフォームの送信ボタンなども使い回せるようにしたかったのですが、このアプリでは他に使い道もないのでやめておきました。

アプリの作成

今回はReactとTypeScriptを使ってアプリを作成しました。
以下、使用した主な技術とバージョンです。

"@material-ui/core": "^4.11.3",
"@reduxjs/toolkit": "^1.5.1",
"node-sass": "4.14.1",
"react": "^17.0.2",
"react-hook-form": "^7.1.1",
"react-scripts": "4.0.3",
"typescript": "~4.1.5"

style

styleは基本的に全てmodule.scssで構成しました。
ただ、コンポーネント化したものをスタイルを変えて使いたい時はstyled-componentsを使う方が便利なのかなとも思いました。特にMaterial-UIを使用していると相性も良さそうなのでこの辺は次回への課題とします。

データの取得

お問い合わせフォームには、ReactHookFormを使用してデータを取得できるようにしました。
理由は楽チンだからです。

Amplifyを使ったデプロイ

まだ中身はスカスカアプリですが、まずは経験という意味も込めてとりあえず強引にデプロイまで持っていく事にしてみました。
AWSにはとてもたくさんの機能があるため、初心者には知らない言葉や機能が多すぎてとてもハードルが大きく感じます。ですが、Amplifyを使ったデプロイをする事だけであれば、ゴールがとても明確かつすぐに達成可能なので挫折しないで済みます。
設定の段階でAmplifyとgithubを連携してあるので、デプロイした後でも開発環境でちょっとした変更を加えた場合は、メインのブランチにマージすれば自動で反映される仕組みになっているのでちょっとした感動すら覚えました。
つい数日前までAWSで何ができるのかさえ全く分からなかった自分が、ちょびっとだけAWSを使ってできる機能を知る事ができたのでチャレンジしてみて良かったです。

参考ページ
Amplify CLI をインストールしてユーザーを設定する手順
AmplifyでReactアプリのデプロイ、CI/CDをする公式チュートリアルをやってみた

まとめ

デザインを仕上げるだけで二週間以上かかってしまい、なかなか進まずに苦しい時期がありました。
しかし、実際にコードを書き始める前にこのプロセスを踏んだ事で、目に見える部分だけでなく全体像を把握する事ができました。さらに、丁寧に設計ができたおかげでコードを書き始めてからはとても早かったので、非常に重要な工程だという事が良く分かり勉強になりました。