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
57
第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
110
Other Decks in Education
See All in Education
Портфолио - Шынар Ауелбекова
shynar
0
110
~キャラ付け考えていますか?~ AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
masakiokuda
7
470
万博非公式マップとFOSS4G
barsaka2
0
1.1k
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
シリコンバレーでスタートアップを共同創業したファウンディングエンジニアとしての学び
tomoima525
1
1.2k
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
9
5.5k
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
130
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
390
Transición del Management al Neuromanagement
jvpcubias
0
210
社外コミュニティの歩き方
masakiokuda
2
190
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
940
学びは趣味の延長線
ohmori_yusuke
0
110
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building an army of robots
kneath
306
46k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Automating Front-end Workflow
addyosmani
1370
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Writing Fast Ruby
sferik
628
62k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
70
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
87
4.8k
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/ にアクセスした場合 ↓