第五回後期ネットワークチーム講座

Transcript

1. ネットワークチーム 後期第五回講座資料 アプリケーション作成
2. 目次 • アプリケーション作成 • 用語解説
3. 準備 1. 作業用フォルダでコマンドプロンプトを開く 2. npm init を実行 （その後は特にこだわりがなければ全てEnterでよい）
4. package.json • npm init を実行すると package.json が作られる • JSONは、JavaScript のオブジェクトと同様の記法で書か れたテキストファイル プログラムにデータを渡す際などに使用される
5. package.json の中身 → 入っていないモジュールがある 場合、以下を実行 npm install --save モジュール名
6. package.json • 内容を見ると、現在インストールしているモジュールが “dependencies :” に書き込まれている 新たにモジュールを追加する場合、インストール時に ”--save” オプションを使用する • npm update で一括アップデート、npm start で実行 etc…
7. Pug(旧Jade)の記法 ①基本的にタグ名のみ記述 （<>いらず、閉じタグもなし） ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる
8. Pug（Jade）の記法 ④ 簡単な制御構文（While, If など）や変数、JSコードが利用で きる JSのコードは先頭に” – “（ハイフン）を付けて記述する ⑤ 変数を呼び出す場合、 #{変数名} または =変数名 と記述 ⑥ コマンドを用いることでテンプレートの継承ができる
9. • app.js を次の2ページの通り記述 一つのjsファイルに続けて書く （全28行）
12. • 次に、app.js があるフォルダ内に 「views」 というフォルダを作成 （ついでに 「public」 というフォルダも作成）
13. Pugファイル作成 • views/index.pug (全4行）
14. Pugファイル作成 • views/layout.pug (全10行）
15. CSS作成 • public/css/style.css
16. レンダリング • テンプレートエンジンからHTMLを生成すること • render関数でこれが行われている
17. レンダリング • render関数から渡された値はpugファイルで指定された場所に 代入される
18. ルーティング • リクエストされたURLに対して呼び出すアクションを変更する仕組 Localhost:3000/ にアクセスした場合 ↓ Localhost:3000/hello/ にアクセスした場合 ↓