はじめに

ポートフォリオの設計設計を考えてみました。
まだ設計段階ですが、設計書の書き方などの参考になれば幸いです。

コンセプト

毎週アニメが更新されたら教えてくれるサイト

作ろうと思った経緯

• 自分が毎週何時にどんなアニメが更新されるのか忘れることが多かったから。
• アマプラを使っていると、アニメが更新されたかどうか分かりにくいのでそれを改善したい。
• 自分の周りでも何時に更新されるかわからなくて困っている人が多かった。
• なにより自分が欲しいから。

開発目的

• ユーザーに自分に合う面白いアニメを見つけてもらう。
• 継続的にアニメを見てもらう。
• アニメの面白さを人々に伝える。

必要な要素

• ログイン機能
• お気に入りのアニメを設定出来る。
• お気に入りのアニメが更新されたら新着アニメ欄に追加される。
• アニメページからアマプラ、ネトフリ、Dアニメのページに飛べるようにリンクを貼る。
• アマプラ、ネトフリ、Hulu、Dアニメそれぞれの更新時間が見れる。
• 新着アニメ欄を追加
• →面白いアニメを追加出来るようにするため。
• Graph QLを使用して自動化
• アンケートを答えたらアンケートに応じて使用者が好きそうなアニメのPVを表示。
• 今期のおすすめランキングを追加
• グループが作れて友達同士で見ているアニメを共有

必要じゃない要素

• アニメ以外は載せない
• →ドラマなども含めてしまうとコンセプトに反する
• アニメの概要・説明などは載せない
• →あくまでお気に入りのアニメが更新されたら教えてくれるサイトを意識する

必要なスキル

・React hookを理解している
・ReactでAPIを叩ける
・カスタムフックを実装できる
・Reduxが触れる
・ログイン機能を実装できる
・routerをコンポネートで分けて管理できる
・適切なディレクトリでコンポネートを分ける事ができる
・TypeScriptの必要性を理解している
・Gitの基本的な操作が出来る

開発環境

OS:Mac OS 11.2.3
言語:TypeScript
ライブラリ:React
エディター:VScode
データーベース:AWS
その他:ESlint

技術選定

フロントエンド

• React
• React Redux
• TypeScript

バックエンド/DB

• AWS Amplify
• AWS DynamoDB

API

• GraphQL

デザイン

• Adobe XD
• Tailwind CSS

技術選定理由

フロントエンド

・React
パーツ単位でcomponentsを分けるので保守性・再利用性が高く開発がとてもしやすい。
TailwindやMaterial-UIなどの素晴らしいCSSフレームワークがある。
・React Redux
どうしてもReactだけだと、コンポネートの受け渡しが多くなるので採用。
contextと迷いましたが、非同期処理を多く使用するためReduxを採用しました。
・TypeScript
何度もアップデートしていきたいと考えているので、保守性が高くする必要があるため採用。
・TailwindCSS
カスタマイズ性が高く、予めpadding,margin,font-sizeの値が設定されているので迷うことがなくなる。
class名を考える時間を減らせるので時短になる。

バックエンド

・AWS
GraphQLとの互換性が高く、GraphQLを構築するための手助けを多くしてくれるので今回の開発に合っているため採用。
・Graph QL
Annict APIを使用するため。
必要な時にのみデータを取得するため、過不足なくデータを受け取れる。

ポートフォリオがサービスとして成立するものか

作成した段階で知り合いやエンジニアの友人にフィードバックをもらい改善していく。
Twitterでも宣伝し、サービスとして成立しそうならリリース。

ポートフォリオで苦労した点 4/15

環境構築

ESlint,TypeScript,Material-Ui,Firebaseなどの環境構築がLinuxだったので、初めてのコマンドプロンプトということもあり苦戦しました。
これを期に様々なLinuxコマンドを覚えたので良い経験になりました。

UI/UX

Material-UIの使い方が最初はわからず、ひたすら色々なUIを試していました。
友人のフィードバックを頂き、なんとか良いものになりました。

ポートフォリオで楽しかった点

今後改善したい点、実装したい機能

サービスが完成したら随時追加予定

さいごに

ここまで読んで頂きありがとうございました。
サービス開発が終了したら必ず公開するので完成までお待ち下さい。