🔰 概要

ポートフォリオに取り入れたい機能的な要件に関してです。

「機能要件」「外部仕様」とも言われます。

全てを高いレベルで（セキュリティやアーキテクチャやスケーラビリティなどを意識して）取り入れることは不可能なので、できるところまで取り入れましょう。

✅ 機能要件に関する具体例

機能要件(外部仕様)は主に「ユースケース」や「機能」に関する事柄です。

例)

• いいね機能
• リツイート機能
• お気に入り登録
• 動画ダウンロード機能
• コメント機能
• チャット機能
• リアルタイムチャット機能
• ランキング機能
• 無限スクロール機能
• ページネーション機能
• 課金機能
• 投げ銭機能
• 検索機能

ポートフォリオに取り入れたい機能

会員登録機能

OAuth, トークンによるメール認証などを使って会員登録機能を取り入れましょう。

認証機能

会員登録を入れたら、ログイン、ログアウトやパスワードリセットをできるようにしましょう。

UI側でのCRUD

C: Create R: Read U: Update D: Delete

ユーザーがこの4つの操作をUI上から行えるようにしましょう。

例)

メモ機能であれば、メモを作れて、メモを読み込めて、メモを更新できて、メモを削除できるといったイメージです。

外部APIを使ったユースケースがある機能

例えば、Stripeを入れて課金ができるようにする、など。

モダンなUIでイケてるUIに

例えば、YoutubeやXなどのUIはウェブ版でもシンプルできれいですが、そういったデザインに寄せるデザイン機能です。

ReactのMUI componentなどを使って似せていくと、モダンなUIにしやすいです。

https://mui.com/material-ui/all-components/

非同期的な処理に関する機能

YoutubeやXでいいねを押すと、+1がその瞬間にUIに反映されるような機能です。

Ajaxと呼ばれます。

なんらかのユースケースがある機能

例)

まんじが2022年に作って失敗したSEOツールのウェブアプリでの「WordPressサイトのURLを入力すると記事を全部一覧で取得して文字数などが分かる」機能

✅ 具体的なアクション

• このコンテンツにある機能や、よく使うアプリケーションにある機能を真似て取り入れる
  • 例
    • Youtubeのようにいいね機能を入れてみる
    • Notionのようにマークダウンで書けるメモ機能を取り入れてみる
    • AibnbのようなUIを作ってみる