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
52
第五回後期ネットワークチーム講座
北海道科学大学 電子計算機研究部
November 21, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第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
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
260
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Education-JAWS #3 ~教育現場に、AWSのチカラを~
masakiokuda
0
180
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
110
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
340
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.4k
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
190
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
230
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
330
SkimaTalk Introduction for Students
skimatalk
0
390
IMU-00 Pi
kanaya
0
370
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Why Our Code Smells
bkeepers
PRO
336
57k
A better future with KSS
kneath
238
17k
Statistics for Hackers
jakevdp
799
220k
How STYLIGHT went responsive
nonsquared
100
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Facilitating Awesome Meetings
lara
54
6.5k
Designing for humans not robots
tammielis
253
25k
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/ にアクセスした場合 ↓