Tweet
Tweet

Slide 1

Slide 1 text

ネットワークチーム 後期第五回講座資料 アプリケーション作成

Slide 2

Slide 2 text

目次 • アプリケーション作成 • 用語解説

Slide 3

Slide 3 text

準備 1. 作業用フォルダでコマンドプロンプトを開く 2. npm init を実行 （その後は特にこだわりがなければ全てEnterでよい）

Slide 4

Slide 4 text

package.json • npm init を実行すると package.json が作られる • JSONは、JavaScript のオブジェクトと同様の記法で書か れたテキストファイル プログラムにデータを渡す際などに使用される

Slide 5

Slide 5 text

package.json の中身 → 入っていないモジュールがある 場合、以下を実行 npm install --save モジュール名

Slide 6

Slide 6 text

package.json • 内容を見ると、現在インストールしているモジュールが “dependencies :” に書き込まれている 新たにモジュールを追加する場合、インストール時に ”--save” オプションを使用する • npm update で一括アップデート、npm start で実行 etc…

Slide 7

Slide 7 text

Pug(旧Jade)の記法 ①基本的にタグ名のみ記述 （<>いらず、閉じタグもなし） ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる

Slide 8

Slide 8 text

Pug（Jade）の記法 ④ 簡単な制御構文（While, If など）や変数、JSコードが利用で きる JSのコードは先頭に” – “（ハイフン）を付けて記述する ⑤ 変数を呼び出す場合、 #{変数名} または =変数名 と記述 ⑥ コマンドを用いることでテンプレートの継承ができる

Slide 9

Slide 9 text

• app.js を次の2ページの通り記述 一つのjsファイルに続けて書く （全28行）

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

• 次に、app.js があるフォルダ内に 「views」 というフォルダを作成 （ついでに 「public」 というフォルダも作成）

Slide 13

Slide 13 text

Pugファイル作成 • views/index.pug (全4行）

Slide 14

Slide 14 text

Pugファイル作成 • views/layout.pug (全10行）

Slide 15

Slide 15 text

CSS作成 • public/css/style.css

Slide 16

Slide 16 text

レンダリング • テンプレートエンジンからHTMLを生成すること • render関数でこれが行われている

Slide 17

Slide 17 text

レンダリング • render関数から渡された値はpugファイルで指定された場所に 代入される

Slide 18

Slide 18 text

ルーティング • リクエストされたURLに対して呼び出すアクションを変更する仕組 Localhost:3000/ にアクセスした場合 ↓ Localhost:3000/hello/ にアクセスした場合 ↓