【プロゲート】Node.js Node.js Iの学習内容まとめ
Node.js I
1.目標物の確認
Node.jsでWebアプリケーションを作ろう
・このレッスンではNode.jsとExpressというツールを使い、Webアプリケーション（以下、Webアプリ）を作っていく
Node.jsとは
・Node.jsは本来クライアント側の言語であるJavaScriptをサーバーサイドで動かすための仕組み
買い物メモアプリを作ろう
・どうすればNode.jsを使って、Webアプリを作れるのか？
・実は多くのWebアプリの仕組みや作り方の基本は変わらない
・これから3レッスンを通して、買い物メモアプリを作りながらその基本を理解していく
2.Expressの導入
Expressを準備しよう
・早速「買い物メモサービス」を作っていく
・まずはExpressというものを準備していく
・ExpressはNode.jsでWebアプリの開発をするためのフレームワーク
・フレームワークを利用することで開発を効率化することができる
パッケージ
・Node.jsには便利な機能を簡単に使えるようにまとめたパッケージというものがある
・Expressもパッケージの１つ
npm
・パッケージを用意するにはnpm (Node Package Manager)というシステムを使う
・npmにはパッケージを共有・取得する機能がある
・今回は自分のアプリケーションにパッケージをインストールしていく
Expressをnpmからインストールしよう
・npm installコマンドを使って、インターネットから自分のアプリケーションにパッケージをインストールする
インストールしたExpressを利用する
・Expressを使うには、インストールしたパッケージの読み込みと、実際に使用するための準備が必要
・ここは定型文として覚えておく
3.サーバーの起動
サーバーを起動しよう
・Expressを使って、サーバーを起動してみる
・サーバーを起動すれば、サーバーがリクエストを受け取りレスポンスを返すことができるようになる
・つまり、Webアプリが画面に表示されるようになる
listenメソッド
・listenメソッドを用意してapp.jsファイルを実行するとサーバーを起動することができる
・ファイルを実行するには「node ファイル名」とする
4.ページの表示の仕組み
表示の仕組みを理解しよう
・これからブラウザに表示されるまでの流れを一つずつ学んでいく
ルーティング
・/topにリクエストが来た時に、トップ画面を表示することができる
・URLに対応する処理を実行することをルーティングと言う
reqとres
・ルーティングの処理では、req(リクエストの略)・res(レスポンスの略)の２つの引数を受け取る
・reqやresには、リクエスト・レスポンスに関する情報が入っている
トップ画面の見た目を作ろう
・ブラウザに表示する見た目部分にはEJSという形式のファイルを使い、viewsフォルダに配置する
・以後、見た目を作るファイルをビューファイルと呼ぶ
見た目を表示する処理
・ルーティングの処理でres.renderと書くことで、指定したビューファイルをブラウザに表示できる
5.CSSの適用と画像の表示
CSSを適用しよう
・今度はCSSや画像ファイルを使って、「買い物メモサービス」のトップ画面を整えていく
CSSを適用するには（1）
・CSSや画像などを適用するには、まずこれらのファイルを置くフォルダを作る
・フォルダ名は自由だが、今回は一般的に使われるpublicとする
・そしてフォルダを指定し、ファイルを読み込めるようにする
CSSを適用するには（2）
・適用するCSSファイルをpublic配下に作成する
・そして、 EJSファイルにはpublicフォルダを起点としたパスを/css/style.cssのように指定する
画像を使う
・CSSと同じように画像もpublicフォルダから読み込むことができる
6.一覧画面の作成
一覧画面を作ろう
・次は買い物メモ一覧画面を作っていく
一覧画面を表示させよう
・localhost:3000/indexにアクセスした時に、一覧画面が表示されるように処理を記載していく
一覧画面の見た目を作ろう
・一覧画面用のビューファイル（index.ejs）を作成する
7.EJSを使った値の表示
EJSを使って値を表示しよう
・ここからはEJSについて学ぶ
・EJSは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージ
・今はメモの内容をHTMLで書いているが、実はEJSの書き方を利用することもできる
EJSとは
・EJSはnpmからインストールすることで使うことができる
・実は、これまでの演習ではEJSを事前にインストールしていた
JavaScriptを利用しよう
・JavaScriptのコードを記述するには、<% %>または<%= %>で囲む
・<% %>で囲んだ場合はブラウザに何も表示されないので、変数の定義などに用いる
・変数の値などをブラウザに表示したい場合は<%= %>を用いる
8.forEachを使ったHTMLの表示
配列を一覧画面に表示しよう
・EJSを使えば、繰り返し記述しているコードをスッキリ書くことができる
・複数件のメモを表示させて便利さを体感する
EJSを使うメリット
・EJSでforEachを利用するとHTMLを直接記述するよりもスッキリ書くことができ、さらに管理しやすくなる
forEachを復習しよう
・配列のデータを表示するためには、JavaScript学習コースⅥで学習したforEachメソッドを使う
オブジェクトの配列を画面に表示しよう
・既存のHTMLで書いたリストもEJSで表示する
・まずは、リストをまとめて配列を定義する
・次に配列のオブジェクトを一覧画面に表示する
・forEachは画面に表示させないので <% %>で記述する
9.ページ間リンク
トップ画面と一覧画面を繋げよう
・最後にトップ画面と一覧画面をリンクボタンでアクセスできるようにする
トップ画面のURLを変更しよう
・これまでトップ画面のURLを「/top」としてきましたが、このURLを「/」に変更してみる
・「/」のURLをルートURLと言う
・一番初めにアクセスするページはルートURLに設定することが一般的
リンクボタンをつけよう(1)
・一覧画面に遷移するURLを、トップ画面のボタンに指定する
リンクボタンをつけよう(2)
・一覧画面からトップ画面に遷移するボタンを、一覧画面につける