ゲーム感覚でプログラミングを学ぼう！ 回答をブラウザで表示できるよ。
ユーザー登録時にリポジトリを登録してプレイ後に記録できる。
- HTML
- CSS
- JavaScript
- React
- Material-UI(MUI)
- おすすめのUIライブラリ教えてください
- AWS
- AWS Amplify
- AWS LambdaもしくはAWS DynamoDB
- VSCode
共通
グローバルで参照される定数を定義したファイルを配置しています。
使用しているライブラリ固有のコードで、初期化や設定のコードなど、データ取得に絡まないコードはここに配置します。 ライブラリ毎にまるっと切り替わる可能性があるので、ライブラリごとにディレクトリを分けています。
グローバルで使える便利な関数（ex.文字列の加工など）を配置しています。
出題する問題を格納しています。
ここは人によってはentities、types、interfaces等、様々な名付け方をしそうですが、自分はmodels、entitiesの二択でmodelsにしました。好きな名前にするといいと思います。 modelごとにファイルを分けています。 また、servicesで加工したデータと、repositoriesで取得したデータの区別が付きやすいように、 servicesで生成するオブジェクトについては、モデル名にXXXDataのようなサフィックスをつけるようにしています。
レイヤードアーキテクチャでいうDomain層、MVCでいうModelを担っています。
DBやSaaSにアクセスする層になります。 データを取得して、データマッピングに従い、オブジェクト化する責務を持たせます。 一つのテーブルに対して、一つのファイルにしていけば良さそうだと思っています。 使用しているDBやSaaSに依存したコードはここに配置します。 使用しているDBやSaaSが変更されたときは、ここを変更するだけで対応できるようにしています！と、言いたいところではありますが、 使用している基盤技術をごっそり変える時、例えばREST APIからGraphQLに移行するといった場合では、servicesの関数も変更する必要が出てくると思っています。
レイヤードアーキテクチャでいうInfrastructure層を担っています。
ユーザーのアクションに応じて、データの加工（結合や集計など）を行うコードを置いておきます。 加工元となるデータ取得は、repositories配下の関数を呼び出すことにより行っています。 ユーザーの1アクションに対して、1つのサービス関数を作るイメージでいます。 ここも、componentsと同様に、おおまかなアクションの区切りでディレクトリを分けています。
レイヤードアーキテクチャでいうApplication層を担っています。
viewsを格納しています。
全ページ共有、ページ固有のコンポーネントを分けます。 こうすることで、再利用するものと再利用しないものを分けます。 ページ固有のコンポーネントは実は複数ページで使える可能性もあるので、ディレクトリはきっちり分けずに、ユーザーのおおまかなアクションの区切りで数個のディレクトリに分けています。
レイヤードアーキテクチャでいうUI層、MVCでいうViewを担っています。
Next.js固有のディレクトリです。 MVCでいうコントローラ的位置づけで、ユーザーからのリクエストを受け取って、getServerSidePropsやgetStaticPropsを用いながらservicesの関数を呼び出してレスポンスを返すコードを書きます。 jsxを書けるので、ここに直接jsxを書いてもいいのですが、見た目部分は分けたかったので、大部分はcomponentsで定義し、pages配下ではcomponentsで定義されたコンポーネントを呼び出して、jsxを組み立てるという構成にしています。
レイヤードアーキテクチャでいうUI層とApplication層の紐付け、MVCでいうControllerを担っています。