React使ってSPAを作るよ(18)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(17)の続きです。

なんとなくコンテンツはできてきたので、そろそろユーザー認証のあたりを考えていきたいです。
あとで変えるかもしれませんが、今のところ仕様は下記のような感じを想定しています。

ゲストユーザーの場合

  • 記事一覧は見ることができる
  • タグ絞り込み機能も使える
  • 読んだ人リスト、コメント、コメント入力フォームは表示されない
  • 記事を追加することはできない
  • navの記事追加ボタンを押したらログインフォームが表示される
  • navのアカウントボタンを押したらログインフォームが表示される
  • アカウントアイコンはデフォルトの画像が表示される

spa
モックを用意するのが面倒なので実装済みの動作をGIFにしました!

ログインユーザーの場合

  • 記事一覧を見ることができる
  • タグ絞り込み機能も使える
  • 読んだ人リスト、コメント、コメント入力フォームも表示される
  • 記事にコメントを投稿できる
  • 自分のコメントは削除ボタンが表示され、削除できる
  • (コメントの編集は検討する)
  • 自分の追加した記事は削除ボタンが表示され、削除できる
  • 記事を追加できる
  • navの記事追加ボタンを押したら記事追加フォームが表示される
  • navのアカウントボタンを押したらアカウント情報設定フォームが表示される
  • アカウントアイコンの画像を登録できる

spa

というふうに分けたいと思います。

あ、minamiという架空のサービス名は、以前このページのイメージカラーをピンクにしたのと同じく、AKBファンの同僚がたかみな神推しだからです。

Reactコンポーネントのrender内でif文を使う

まだ認証部分の実装はしていませんが、ひとまずログインフォームのパーツを作っていきます。

ログインユーザーの記事追加フォームはこれまでと同じですね。
URLFormコンポーネントが入っています。
ログインしていないユーザーのときはここにURLFormのかわりにログインフォームのコンポーネントを入れます。

React使ってSPAを作るよ(15)で作ったナビゲーションコンポーネントに、minamiロゴやアカウントボタンを追加しました。

分岐用の記述が増えていますので、ひとつずつ説明していきますね。

このtestというのは、ログイン状態かどうかということの判定のかわりに使っています。
本来だったらここは「誰がログインしているか」っていうデータまで渡さないといけないところなのですが、今は認証機能が実装されていないので、このtrue/falseを切り替えて画面の確認をしています。

で、ご覧のとおり

この2箇所で、ログイン中ならURLFormコンポーネント/Accountコンポーネントを表示、ログインしていなければLoginBoxコンポーネントを表示しています。

さて、今回新たにLogin.jsxというファイルを用意しました。

ログインしていないときに表示されるログインフォームです。
先ほどナビゲーションコンポーネントから渡されたtextがp要素の中に入るわけですね。
同じパーツでも、呼び出す場所によって「ここだけテキストを変えたい」っていうことが可能です。

Account.jsxも新しく作りました。

さすがにこのくらいのコンポーネントなら簡単に作れるようになってきましたね。
将来的にはここにアイコン画像を登録するためのパーツを入れていくことになります。

とりあえず今回はここまで!

React使ってSPAを作るよ目次