<< Node.js(Html)入門編その2 | main | Node.js(Pug)入門編その4 >>

Node.js(Pug)入門編その3

 

前回からの続きです。

 

これまでで、ほぼ基本的なところは終わりました。

Node.jsがあまり面白くないのは、プログラムというより、

地道に大量のhtmlテキストを書いていくという感じです。

 

そのため、少しでも簡単にhtmlが記述できるように

テンプレートエンジン(データからドキュメントを作成)があります。

 

おもには、EJSとPUG(jade)がよく使われますが、

ここでは、フレームワークでexpressを使う予定ですので、

そのデフォルトになっている、PUGについて簡単に説明します。

 

まず、PUGをインストールします。

npmとは、Node Package Managerのことです。

Nodeをインストールすれば、プログラムは入ってます。

 

npm i pug-cli -g

(または、npm install pug-cli -g)

(オプションの-gはグローバルの意味でどこからでも使えます。)

 

VScodeからは、ターミナル(powershell)から、

 

 

ここから、コマンドを入力できます。(powershellと同じです。)

 

正しく、インストールされているか、Versionを見てみます。

pug --version

で確かめます。

 

早速、コードを書いてみましょう!

とりあえず、ファイル名 index2.pug

でコードして保存してください

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
    body
        h1 pugで見出し
        p pugでこんにちわ

 

あたりまえですが、htmlよりスッキリしています。

書き方の基本は、

属性は、括弧で記述

改行+インデントで要素名

タグ名+半角スペースで内容

です。

 

注意:インデントを間違えると、unexpected tokenのエラーとなりますので、気を付けてください。

 

間違いないか、コンパイル(翻訳)してみます。

 

pug index2.pug --pretty

(オプションの--prettyは見やすいhtmlにしてくれます。)

 

 

成功すると、rendered(生成されました)と表示され、

自動的に、index2.htmlファイルが作られます。

 

 

 

 

次には、Node.jsに組み込みます。

とりあえず、前回作ったmain-app.jsをpugを使ったものに変えてみます。

 

ここまでくると、いろんなファイルが必要となってきます。

これが、Webプログラムが難しくなってくるところです。

 

一つのメインプログラムと補助するプログラムとファイルを合わせてプロジェクトといいます。

 

また、入門編その1で行ったように、フォルダ(プロジェクト)を作ってください。

ファイル名はpugtestとしてあります。

 

pugtestをコピーして開きます。

 

 

まず、nodeを初期化します。

 

npm init

 

ターミナルが表示されていないときは、メニューバーから

 

 

 

質問に答えていくと、

(あとからでも変更できますので、まずは、適当に答えてください。)

プロジェクトの内容が書かれたpackage.jsonが作成されます。

 

次に、pugをインストールします。

npm install pug --save

 

 

警告(WARN)も出ますが、気にしないでください。

 

これで、require(必要、必須)を使ってpugを使うことができるようになります。

 

ちょっと長くなったので休憩します。

 

その4に続く

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 16:26 | comments(0) | trackbacks(0) |
Comment









Trackback
url: トラックバック機能は終了しました。

06
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM