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
40
第五回後期ネットワークチーム講座
北海道科学大学 電子計算機研究部
November 21, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Education
See All in Education
SUMMER SCHOOL 2024
pnuslide
0
150
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.2k
前期教育実習事前指導0221
naradai
0
140
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
0
1.8k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
制限ボルツマンマシンの話 / Introduction of RBM
kaityo256
PRO
3
340
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
210
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
1
1.2k
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
2
1.5k
LightSail2324
cbtlibrary
0
130
Padlet opetuksessa
matleenalaakso
3
11k
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Unsuck your backbone
ammeep
663
57k
Building Applications with DynamoDB
mza
88
5.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Product Roadmaps are Hard
iamctodd
45
9.7k
Docker and Python
trallard
35
2.7k
4 Signs Your Business is Dying
shpigford
176
21k
Automating Front-end Workflow
addyosmani
1357
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Git: the NoSQL Database
bkeepers
PRO
423
63k
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/ にアクセスした場合 ↓