【プロゲート】Node.js Node.js Vの学習内容まとめ
Node.js V
1.ブログサイトを作ろう
ブログサイトを作ろう
・これから2レッスンを通してログイン機能やアクセス制御を持つブログサイトを作る
ブログサイトを作り始める
・Node.jsを使って、プログラミングに関する雑学を紹介するブログサイトを作り始める
これから作りたいもの
・ログインした人だけが読める記事を作りたいんですけど、どうしたら良いのかがわからない
・それはログイン状態に
よって読める人を制限したいということ
このレッスンで学ぶこと
・今回は、「① ログイン機能を作ろう」と「② ログアウト機能を作ろう」、「③ 記事の閲覧を制限しよう」に分けて作っていく
目標物を確認しよう
このレッスンで作る3つの機能を動画で確認しておく
2.ブログサイトの現状を確認しよう
ブログサイトの現状を確認しよう
・ブログサイトはNode.jsとMySQLを使って作っている
ブログサイトの構成を確認しよう
・ブログサイトは3つの画面で構成されている
・app.jsファイルにそれぞれの画面を表示するためのコードが書かれている
・各画面のビューファイルはviewsフォルダに置かれている
ブログサイトの構造を確認しよう
・演習の手順に従って、どのようにブログサイトが作られているのかを確認する
3.ログイン機能を作ろう
ログイン機能を作ろう
・「① ログイン機能を作ろう」にとりかかる
ログイン機能の作成手順
・ログイン機能は「①ログイン画面」「②ユーザー認証」「③セッション管理」で作れる
・それぞれの処理については作るときに詳しく説明するから、ログイン機能が①〜③でできることがわかればよい
ログイン画面を作成しよう
・ログイン画面が表示されるようにする
・ログイン画面のファイル（login.ejs）とルーティングを用意する
ログイン用のフォームを作成しよう
・ログイン画面にユーザー認証で使うメールアドレスとパスワードを入力するフォームを用意する
・パスワードは入力した値が伏字になるようにtype属性をpasswordに指定する
ログイン画面へのリンク
・ログイン画面へのリンクを一覧画面のヘッダーに用意する
・今は一覧画面のみを変更し、閲覧画面のヘッダーはログイン機能完成後に変更する
4.ユーザー認証の処理を作ろう（１）
ユーザー認証の処理を作ろう（１）
・次は「② ユーザー認証」に取り掛かる
・フォーム送信と、一覧画面の表示
ログイン処理をするルーティングを用意しよう
・ログイン画面のフォームの値を受け取るルーティングを用意する
/login のルーティング
・この時点で/loginに対応するルーティングが2つ存在することになる
・しかし、それぞれメソッド（GETとPOST）が異なるため、別のルーティングとして扱われる
5.ユーザー認証の処理を作ろう（２）
ユーザー認証の処理を作ろう（２）
・次は「② ユーザー認証」を作っていく
ユーザー認証とは
・ユーザー認証とは本人確認のこと
・Webアプリケーションではメールアドレスとパスワードを組み合わせた本人確認が一般的
ユーザー認証の流れ
・今度はユーザー認証の処理の流れを見ていく
ユーザーを検索しよう（１）
・送信されたフォームの値を使ってユーザーを検索する
・SELECTクエリを実行して送信されたメールアドレスと一致するユーザーの情報を取得する
ユーザーを検索しよう（２）
・配列resultsの要素数をlengthプロパティを使って確認する
・要素数が0より大きい場合は、ユーザー情報が見つかったので認証処理に進む
・それ以外は、ログイン画面にリダイレクトする
ユーザー認証をしよう
・ユーザー認証をするために、フォームから受け取ったパスワードとクエリ実行結果のパスワードを比較する
・今回は仕組みを示すためにセキュリティを考慮せず直接比較をしている
・本来の方法はNode.js学習コースVIで紹介する
6.セッションを管理しよう
セッションを管理しよう
・続いて「③セッション管理」にとりかかる
セッション管理とは
・セッション管理とはクライアントの状態をサーバーが管理するもの
・管理にセッションID（SID）を使う
セッションを管理する準備をしよう
・セッションを管理するための機能を提供してくれるexpress-sessionというパッケージをインストールする
・そのあと、express-sessionを使用するために必要な情報を書き込む
・書き方を細かく覚える必要はない
7.セッションを使ってみよう
セッションを使ってみよう
・それではクライアントの状態を管理する
・まずは、ユーザー認証が成功したときにクライアントの状態をセッション情報に保存する
・次に、保存した情報を使ってログイン状態を表示する
・セッション情報の確認は一覧画面と閲覧画面の両方で行うが、まずは一覧画面で行ってみる
セッション情報にデータを保存しよう
・express-sessionパッケージによって、req.sessionオブジェクトに渡した値を管理できる
・これを用いて、ユーザー認証後にセッション情報にユーザーIDを保存する
・保存はreq.session.プロパティ名=値と書く
セッション情報からデータを読み出そう
・セッション情報からデータを読み出すときはreq.session.プロパティ名と書く
・このとき、express-sessionパッケージが送られてきたセッションIDの確認と、それに関するセッション情報の取得を自動で行う
ログイン状態を確認しよう
・セッション情報に保存したユーザーIDを使ってログイン状態をターミナルに表示する
・undefinedについて忘れてしまった人はJavaScript 学習コース IIを復習する
8.常にログイン状態を確認しよう
常にログイン状態を確認しよう
・一覧画面と閲覧画面の両方でログイン状態を確認できるように変えてみる
・app.use関数を使うと、さっき書いたログイン状態の確認をリクエストの度に毎回実行できるようになる
・このようにすればルーティングが増えても対応が容易になる
ルーティングの仕組み
・app.use関数の説明をする前に、ルーティングが実行される仕組みについて整理しよう
・サーバーはリクエストに一致するルーティングを探して実行する
・このとき、app.jsに書かれている順番で上から探す仕組みになっている
・この探す順番がapp.use関数を使うときに重要になる
app.use関数とは
・app.use関数は全てのリクエストに対応する
・そのため、ルーティング処理の一番最初に書くことで、毎回実行することができる
・受け取ることのできる引数はreq, res, nextの3つ
next関数とは
・app.use関数の引数で受け取ったnextは処理の中で関数として使うことができる
・next関数を実行すると、リクエストに一致する次の処理を実行することができる
セッション情報を確認する処理を移そう
・最後に、セッション確認の処理をapp.get('/list', ...)からapp.use関数の中に移動する
・これでセッション確認は全てのリクエストで実行されるようになる
9.ユーザー名をヘッダーに表示しよう
ユーザー名をヘッダーに表示しよう
・ターミナルでしかログイン状態を確認できないので、もっとわかりやすくしたい
・では、ログアウト機能を作る前にヘッダーにログインしているユーザーの名前を表示する
表示を確認しよう
・それではこれからユーザー名をヘッダーに表示する
・これはユーザーIDと同じようにセッション情報にユーザー名を保存し、app.use関数の中で読み出すことで実装できる
セッションを使ってユーザー名を管理しよう
・ユーザー名をセッションで管理しよう
・まずはログインに成功したときにユーザー名をセッション情報に保存する
・そして保存したユーザー名はapp.use関数の中で読み出す
ユーザー名をEJSファイルに渡そう
・app.useからEJSファイルにどうやって値を渡すのか？
・これからres.localsオブジェクトを紹介する
・res.localsオブジェクトを使うと、res.renderがなくてもEJSファイルに値を渡すことができる
・アプリケーション全体で使うような値も、res.localsオブジェクトを使うと良い
・app.useからEJSファイルに値を渡す場合はres.localsオブジェクトを使う
res.localsオブジェクトに値を代入しよう
・res.localsオブジェクトはres.locals.プロパティ名 = 値の形で値を代入することができる
・代入した値はレスポンスを返すまで使用可能
localsオブジェクトから値を取得しよう
・代入した値をlist.ejsで表示しよう
・EJSファイルでは代入した値がlocalsオブジェクトに変換される
・そのため、値を用いるときにはlocals.プロパティ名と書く
・resがつかないので注意
10.ヘッダーを共通化しよう
ヘッダーを共通化しよう
・次は閲覧画面でも同じようにする
・一覧画面のヘッダーと同じコードを閲覧画面にも書く
・今のように全ての画面のファイルを変更していくと、ページが増えたときに大変になる
・ヘッダーを1つのファイルで管理する方法でやってみる
include機能とは
・EJSにはファイルの中で、別のEJSファイルを呼び出すinclude機能がある
・この機能を使うと1つのファイルで管理ができる
・別のファイルを呼び出すってどういうことか？
・例えば、ヘッダーのコードだけを書いたEJSファイルを作ったとする
・そのファイルをlist.ejsやarticle.ejsで呼び出すと、それぞれの画面でヘッダーが表示されるようになる
ヘッダーを別ファイルに移そう
・ヘッダーの内容をまとめるためにheader.ejsというファイルを作成する
・そして、list.ejsのヘッダー部分をheader.ejsに移す
includeを使ってヘッダーを読み込もう
・list.ejsとarticle.ejsの中でheader.ejsを呼び出し、一覧画面と閲覧画面で同じヘッダーが表示されるようにする
・別のEJSファイルを呼び出すときはinclude('ファイル名');と書く
11.ログアウト機能を作成しよう
ログアウト機能を作成しよう
・次はログアウト機能を進めていく
・まずはログアウトとはどういうことなのかを説明する
ログアウトとは
・セッション情報にデータが保存されていることをログイン状態とした
・ログアウトするには、セッション情報からデータを消してしまえば良い
ログアウトボタンとルーティングを用意しよう
・ログアウトするためのボタンとルーティングを用意する
セッション情報を削除しよう
・セッション情報を削除する
・req.session.destroy( ()=>{ 実行後の処理 })と書くことで、保存したセッション情報を消すことができる
リダイレクトしよう
・セッション削除後は一覧画面にリダイレクトする
・req.session.destroyの引数errorには削除処理が失敗したときの情報が入る
12.ログイン状態で表示を切り替えよう
ログイン状態で表示を切り替えよう
・今度はログイン状態に応じて、ログインボタンとログアウトボタンが切り替わるようにしていくぞ。これでログアウト機能は完成
ログイン状態を判別できる変数を用意しよう
・ログイン状態を判別するために、isLoggedInプロパティをres.localsオブジェクトに用意する
・isLoggedInプロパティにはログインしていないときにはfalse、ログインしているときはtrueを代入する
表示するリンクを切り替えよう
・header.ejsの中に条件文を用意し、locals.isLoggedInプロパティの値によってリンクの表示を切り替える
13.一般記事と限定記事に分けよう
一般記事と限定記事に分けよう
・では、いよいよ最後の「③ 記事の閲覧を制限する」を進めていく
一般記事と限定記事に分けよう
・記事の閲覧の制限は2ステップにわけて進める
・まずは記事の分類から
・ログインしていなくても見れる記事を一般記事、ログインすると見れる記事を限定記事というふうに分類していく
記事の種類を示すカラムを追加しよう
・記事の分類するための準備としてarticlesテーブルに新しくcategoryカラムを加える
・カラムの追加はAlter Table ADD...
・カラムの追加ができたら一般記事と限定記事を表す値を決めて、入力していく
記事の種類と値を確認しよう
・一般記事は「all」、限定記事は「limited」に決めて、categoryカラムに値を入れる
・今後はこのカラムの値を使って記事の表示が切り替わるようにしていく
記事の種類に合わせて表示を変更しよう
・categoryカラムの値によって表示が変わるようにする
・限定記事の場合は「会員限定」のバッジを表示する
・今はどちらの記事の種類でも記事の内容を表示するが、次のSTEPで限定記事で表示する内容を変更する
一覧画面にバッジをつけよう
・一覧画面でも限定記事にはバッジをつける
14.限定記事の閲覧を制限しよう
限定記事の閲覧を制限しよう
・次の「STEP 02 制限する」ができたら完成
・categoryカラムの値と、前に作ったlocals.isLoggedInプロパティを使って制限を行う
ログイン状態と制限を整理しよう
・現状は誰でも記事を見られる状態になっている
・これからログインしていないユーザーが限定記事を閲覧できないように制限していく
ログイン状態と限定記事の表示を確認しよう
・限定記事の表示内容を確認しよう
・ログインしていない場合にはログインを促す内容を表示する
ログインしているときは記事を表示しよう
・ユーザーのログイン状態を管理するlocals.isLoggedInプロパティの値を使った条件分岐を追加する
・locals.isLoggedInプロパティの値がtrue（ログインしている状態）のとき、記事の内容を表示する
ログインしていないときは記事を隠そう
・locals.isLoggedInプロパティの値がfalse（ログインしていない状態）のときは、記事の内容を表示せずにログイン画面へのリンクを表示する