Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第五回後期ネットワークチーム講座
Search
北海道科学大学 電子計算機研究部
November 21, 2016
Education
0
51
第五回後期ネットワークチーム講座
北海道科学大学 電子計算機研究部
November 21, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
55
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Education
See All in Education
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
100
America and the World
oripsolob
0
510
実務プログラム
takenawa
0
5k
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
200
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
700
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
プログラミング教育する大学、ZEN大学
sifue
1
530
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Code Reviewing Like a Champion
maltzj
524
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
It's Worth the Effort
3n
185
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building an army of robots
kneath
306
45k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf 2023
tenderlove
30
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
ネットワークチーム 後期第五回講座資料 アプリケーション作成
目次 • アプリケーション作成 • 用語解説
準備 1. 作業用フォルダでコマンドプロンプトを開く 2. npm init を実行 (その後は特にこだわりがなければ全てEnterでよい)
package.json • npm init を実行すると package.json が作られる • JSONは、JavaScript のオブジェクトと同様の記法で書か
れたテキストファイル プログラムにデータを渡す際などに使用される
package.json の中身 → 入っていないモジュールがある 場合、以下を実行 npm install --save モジュール名
package.json • 内容を見ると、現在インストールしているモジュールが “dependencies :” に書き込まれている 新たにモジュールを追加する場合、インストール時に ”--save” オプションを使用する •
npm update で一括アップデート、npm start で実行 etc…
Pug(旧Jade)の記法 ①基本的にタグ名のみ記述 (<>いらず、閉じタグもなし) ② インデントを用いて階層構造を表現する ③タグ名の後に( )を付けて属性の指定ができる
Pug(Jade)の記法 ④ 簡単な制御構文(While, If など)や変数、JSコードが利用で きる JSのコードは先頭に” – “(ハイフン)を付けて記述する ⑤
変数を呼び出す場合、 #{変数名} または =変数名 と記述 ⑥ コマンドを用いることでテンプレートの継承ができる
• app.js を次の2ページの通り記述 一つのjsファイルに続けて書く (全28行)
None
None
• 次に、app.js があるフォルダ内に 「views」 というフォルダを作成 (ついでに 「public」 というフォルダも作成)
Pugファイル作成 • views/index.pug (全4行)
Pugファイル作成 • views/layout.pug (全10行)
CSS作成 • public/css/style.css
レンダリング • テンプレートエンジンからHTMLを生成すること • render関数でこれが行われている
レンダリング • render関数から渡された値はpugファイルで指定された場所に 代入される
ルーティング • リクエストされたURLに対して呼び出すアクションを変更する仕組 Localhost:3000/ にアクセスした場合 ↓ Localhost:3000/hello/ にアクセスした場合 ↓