回答編集履歴
1
Express + Pug部分で動くサンプルを作ったので追記
answer
CHANGED
|
@@ -63,4 +63,127 @@
|
|
|
63
63
|
res.writeHead(404, {'Content-Type': 'text/plain'});
|
|
64
64
|
res.end('お探しのページは見つかりません。');
|
|
65
65
|
}
|
|
66
|
-
```
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
> そもそも元のプログラムだとfsをconstで指定していたり
|
|
71
|
+
(追加すればいいだけなのかもしれないと勝手に思っています)
|
|
72
|
+
|
|
73
|
+
基本的に変数宣言は全てconstを使ってください。
|
|
74
|
+
varは巻き上げ等のバグ挙動を生み出すので以後禁止です。
|
|
75
|
+
letは一見constと比べて再代入が可能で便利に思えますが「あまり使いたくない」ものだと覚えてください。
|
|
76
|
+
|
|
77
|
+
JSに於けるletによる変数宣言は、
|
|
78
|
+
値が変わるから「常に見張っておけ」という指示として扱います。
|
|
79
|
+
みだりに使うと「常に見張る変数」が多くなりすぎて頭がおかしくなって死にます。
|
|
80
|
+
for文等でループしながら再代入する用途等、ごく少数の箇所だけで使いましょう。
|
|
81
|
+
|
|
82
|
+
> ちなみにvscode studio codeのターミナルから今回のjsファイルをnode ~~~と打って起動しようと
|
|
83
|
+
しているのですがこれも何か関係があったりするのでしょうか？
|
|
84
|
+
|
|
85
|
+
これに関しては関係ありません。
|
|
86
|
+
|
|
87
|
+
> expressを利用した場合でのpublicにhtmlやcssを入れるときプログラムを使おうとしてみると当然反応しないわけで修正しようにも何も分からない状態のまんまなため困り果ててしまっています。
|
|
88
|
+
|
|
89
|
+
そういやindex周りの指定が出来てなかったなぁと思いました。
|
|
90
|
+
画像やCSSファイルは取れますが、肝心のindex.htmlファイルが`/`終わりだと反応しないんじゃないかと思います。
|
|
91
|
+
|
|
92
|
+
という訳で`index.html`を[Pug](https://pugjs.org/api/getting-started.html)を使って10倍早く書くおまじない込みで解説していきます。
|
|
93
|
+
(index_gest.htmlなんてものを用意している時点で、いずれ認証システムとか使いたいと思いますので、Pugは避けては通れないでしょうしね)
|
|
94
|
+
|
|
95
|
+
[https://github.com/miyabisun/express-example](https://github.com/miyabisun/express-example)
|
|
96
|
+
最低限動作するWebサーバのスケルトンを用意しました。
|
|
97
|
+
|
|
98
|
+
これのコマンド通りに実行すれば動くと思いますし、
|
|
99
|
+
このディレクトリ構造を参考に組めば動作するようになると思います。
|
|
100
|
+
特にCSSはディレクトリを複数切っている事に注意してください。
|
|
101
|
+
画像ファイルも上手い感じの配置とsrc指定を頑張ってみてください。
|
|
102
|
+
|
|
103
|
+
さて、以降目玉機能のPugに関して解説します。
|
|
104
|
+
|
|
105
|
+
HTMLは親子をタグで管理する中々親子関係を記述するのに適したかっちりした良いファイルフォーマットです。
|
|
106
|
+
しかし実際書くと分かるんですが、死ぬほど編集が面倒くさい弱点があります。
|
|
107
|
+
|
|
108
|
+
HTMLなんて直接人間が書かなくても、
|
|
109
|
+
もっと簡潔に書ける言語で書いて、最後の最後でHTMLにすりゃいいじゃん
|
|
110
|
+
こういう発想で存在しているのがテンプレートエンジンです。
|
|
111
|
+
|
|
112
|
+
Node.jsのPugはHTMLテンプレートエンジンの中ではかなりメジャーな方で
|
|
113
|
+
VSCode等のエディタは様々な言語のファイルを読み書きする為のプラグインがあるわけですが、
|
|
114
|
+
普通にPugのものも出回っており、すぐに導入して書き始められるはずです。
|
|
115
|
+
参考記事: [VSCode に必ず入れておきたい拡張機能 - Qiita](https://qiita.com/ucan-lab/items/e85931bf8276da43cc97)
|
|
116
|
+
|
|
117
|
+
それがserver.jsに書いてあるこれらのコードで実現しています。
|
|
118
|
+
|
|
119
|
+
- `app.set("view engine", "pug");`
|
|
120
|
+
- `res.render("index", {});`
|
|
121
|
+
|
|
122
|
+
さて、実際のPugの書き方ですが、
|
|
123
|
+
親子関係を半角スペース2文字、またはタブで管理します。
|
|
124
|
+
これはプログラミング言語のPythonを参考にしたような挙動をします。
|
|
125
|
+
|
|
126
|
+
`views/index.pug`はこうなっています。
|
|
127
|
+
|
|
128
|
+
```pug
|
|
129
|
+
doctype html
|
|
130
|
+
html
|
|
131
|
+
head
|
|
132
|
+
link(rel="stylesheet", type="text/css", href="/css/style.css")
|
|
133
|
+
body
|
|
134
|
+
main
|
|
135
|
+
h1 Webサーバへようこそ
|
|
136
|
+
p 1段落目
|
|
137
|
+
p 2段落目
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
「親子関係が半角スペース2文字」という前情報さえあれば何となく読めると思います。
|
|
141
|
+
これがこうなるわけですね。
|
|
142
|
+
|
|
143
|
+
```html
|
|
144
|
+
<!DOCTYPE html>
|
|
145
|
+
<html>
|
|
146
|
+
<head>
|
|
147
|
+
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
|
148
|
+
</head>
|
|
149
|
+
<body>
|
|
150
|
+
<main>
|
|
151
|
+
<h1>Webサーバへようこそ</h1>
|
|
152
|
+
<p>1段落目</p>
|
|
153
|
+
<p>2段落目</p>
|
|
154
|
+
</main>
|
|
155
|
+
</body>
|
|
156
|
+
</html>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
実際には生成されたHTMLにインデントは全くない状態になるかとおもいますが、
|
|
160
|
+
ブラウザが読む上では知ったことではないので……
|
|
161
|
+
一応ホワイトスペースが削られる事により半角スペースがなくなる等の弊害がありますので、
|
|
162
|
+
一度開いて確認するようにはしてください。
|
|
163
|
+
|
|
164
|
+
HTMLのより複雑な構造をPugで書ききる為には
|
|
165
|
+
[Pug公式サイト](https://pugjs.org/api/getting-started.html)の右側の「Language Reference」から、下の2セクションは読んでいくと最低限大丈夫でしょう。
|
|
166
|
+
|
|
167
|
+
- [Plain Text](https://pugjs.org/language/plain-text.html)
|
|
168
|
+
- [Attributes](https://pugjs.org/language/attributes.html)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
んで、Pugファイルを`views`に放り込んだだけではページ遷移が出来るようにはなりません。
|
|
173
|
+
下記のようなエンドポイントを自分で指定してやる必要があります。
|
|
174
|
+
|
|
175
|
+
```js
|
|
176
|
+
app.get("/", (req, res) => {
|
|
177
|
+
res.render("index", {});
|
|
178
|
+
});
|
|
179
|
+
app.get("/index", (req, res) => {
|
|
180
|
+
res.render("index", {});
|
|
181
|
+
});
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
ページ数が増えてくるとこれの指定で手間取るんですけどね……
|
|
185
|
+
似たようなページは`res.render("index", {});`の`{}`の部分を、
|
|
186
|
+
`{title: "ようこそ、ユーザー名様"}`みたいに指定して出し分けてやることで、
|
|
187
|
+
不用意なページの生成を押さえ込めるはずです。
|
|
188
|
+
|
|
189
|
+
この辺で暫く頑張ってみてください。
|