/TodoApp

Primary LanguageJavaScript

TodoAppの作成

  • 提出課題用のリポジトリです。

使用した技術要素

フロントエンド

  • React 15.6.2

    • フロントエンドのWebアプリケーションフレームワークである。このプロジェクトでは，各フォームやリストコンポーネントの表示，DBから読み込んだデータの表示に利用した。

  • Redux: 3.7.2

    • アプリケーションのUIの状態管理をするためのライブラリである。このプロジェクトでは，ユーザーに入力されたフォームの状態や，DBから読み込んだデータの状態を管理するために利用した。

  • Material-UI 0.19.4

    • マテリアルデザインのCSSフレームワークである。このプロジェクトでは，webアプリの見た目を整えるために利用した。

サーバーサイド

  • Express 4.15.4

    • Node.jsのサーバーサイドWebアプリケーションフレームワークである。このプロジェクトでは，サーバーの構築，フロントエンドからのリクエストの処理に利用した。

  • Mongoose 4.11.13

    • Node.jsでMongoDBにアクセスするためのライブラリである。

全体の設計・構成についての説明

  • フロントエンドはReact/Reduxで構成し，バックエンドはExpressで作成した。データベースはMongoDBを使用している。

  • 画面構成は

  1. リストを追加するトップ画面
  2. Todoリストの詳細画面
  3. Todo,Todoリストの検索画面
  4. Todoのブックマーク画面

の4種類で構成されている

開発環境のセットアップ

  1. このプロジェクトをgit cloneする
  2. brew install mongodbでMongoDBをインストールする
  3. Node.jsから利用するOSに合わせたNode.jsをダウンロードし，インストールする
  4. mongodコマンドでMongoDBを起動する
  5. TodoApp/clientディレクトリでnpm installを実行したあと，npm run buildを行う
  6. TodoAppディレクトリでnpm installを行い，npm run startでサーバーを起動する
  7. 起動後にlocalhost:3001でページに移動する

画面ごとの内容

Top画面

Todoリスト一覧を表示する。フォームにリスト名を入力し追加ボタンを押すことで，リストが追加される。リストをクリックすると，Todo詳細画面に移動する。

Todo詳細画面

クリックされたリストのTodo一覧を表示する。フォームにTodoの内容とTodoの期限を入力することで，追加することができる。終了したTodoはボタンで完了か未完了か切り替えることができる。ブックマークに追加することで，ブックマーク画面に表示される。

検索画面

ヘッダーの左上のメニューの検索で表示することができる。キーワードを入力し一致したTodo,Todoリストの検索結果を表示する。表示される検索結果は，キーワードの部分一致で表示される。

ブックマーク画面

ヘッダーの左上のメニューのブックマークで表示することができる。Todo詳細画面のブックマークの項目で追加されたTodoはこの画面に表示される。Todoの他に，Todoのリスト，Todoの期限も表示されている。特に気になるTodoはこの画面で確認することができる。