×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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/ にアクセスした場合 ↓