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
50
第五回後期ネットワークチーム講座
北海道科学大学 電子計算機研究部
November 21, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
51
第11回Network講座2019
densan
0
67
第10回Network講座2019
densan
0
43
第09回Network講座2019
densan
1
150
第08回Network講座2019
densan
0
46
第07回Network講座2019
densan
0
43
第06回Network講座2019
densan
0
67
第05回Network講座2019
densan
0
48
第04回Network講座2019
densan
0
84
Other Decks in Education
See All in Education
自分にあった読書方法を探索するワークショップ / Reading Catalog Workshop
aki_moon
0
230
情報処理工学問題集 /infoeng_practices
kfujita
0
160
1216
cbtlibrary
0
250
AWS Well-Architected Labを活用してつよつよAWSエンジニアになろう!!! #jawsug_tokyo
masakiokuda
0
220
LLMs for Social Simulation: Progress, Opportunities and Challenges
wingnus
1
120
2024年度秋学期 統計学 第2回 統計資料の収集と読み方(授業前配付用) (2024. 10. 2)
akiraasano
PRO
0
100
LinkedIn
matleenalaakso
0
3.4k
Da Necessidade da Devoção à Virgem Santíssima
cm_manaus
0
100
Unraveling JavaScript Prototypes
debug_mode
0
120
Генезис казарменной архитектуры
pnuslide
0
150
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.8k
Semantic Web and Web 3.0 - Lecture 9 - Web Technologies (1019888BNR)
signer
PRO
2
2.6k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How STYLIGHT went responsive
nonsquared
95
5.2k
Statistics for Hackers
jakevdp
796
220k
Bash Introduction
62gerente
608
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Six Lessons from altMBA
skipperchong
27
3.5k
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
84
4.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
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/ にアクセスした場合 ↓