WEBデザイン javascript Node.js pug テンプレート

新米エンジニア小木の議事録　vol.1

こんにちは今年新入社員としてアクトゼロに入社した小木です。
最近になって急に小木さんといわれる回数が多くなりました。本名は小木ではないのですけれど、一応小木と申します。とはいっても小木さんに似ているといわれるのは嬉しい小木です。

メガネのことはこれくらいにして、初めてアクトゼロでブログを書かせていただきますので、読者の皆様お手柔らかにお願いします。

 

新米エンジニア小木の議事録

まずこの「新米エンジニア小木の議事録」では、アクトゼロで、定期的に行われているエンジニア勉強会の中から厳選し、このブログで月に一回、皆さんに共有させていただければなと思っています。

 

記念すべき第一回目は、最近のフロントエンド界隈で重要な役割を担っているNode.jsと、そのNode.jsによって動いているHTMLを生成するテンプレートエンジンのpugを紹介したいと思います。
まず、私を含めJavaScript、Node.jsとは何ぞやという方がいるかと思いますので念のために少し説明をいたします。

 

Node.js

JavaScriptとは

主にブラウザ上のページに動きをつけるためのプログラミング言語です。
簡単なものでは、

・画像の上にマウスを載せたら、画像が変わる
・クリックしたら、モーダルウィンドウが出てくる
・メインビジュアルにスライドショーを置く

などが簡単な例として挙げられます。

 

Node.jsとは

logo
簡単に言うと、Node.js を使うことで、JavaScriptを使って動的な処理をサーバーサイドで行えるようになったのです。
またNode.js を使うことで、いままでは主にブラウザ上だけで利用していたJavaScriptがRubyやPHP、Javaのようにサーバーでも利用できるようになったのです。

公式ページ→https://nodejs.org/ja/

 

特徴としてはシングルスレッド、非同期通信によって、処理が短時間で、リアルタイムに行えるという点です。
例えば、
・チャットツール
・通知ツール
・軽いニュースフィード
・リアルタイム画像生成

などが挙げられますね。

 

なのでデスクトップアプリとしてチャットツールなどをNode.jsで作るといったことも可能になるわけです！
また、Node.jsに向いていないことといえば、高負荷な処理を行うことです。
といった具合で最近ではブラウザ上でもサーバーサイドでもつかえる便利プログラミング言語となっております。

 

実は

なんといっても処理が早いものですから、今では実際にフロントエンドとバックエンドをJavaScriptでまとめて書いてしまおうという動きもあります。

 

以下URLは、実際にPaypalがバックエンドをJavaからNode.jsへ移行するというニュースです。

https://www.infoq.com/jp/news/2014/01/paypal-java-javascript

 

pug

pug
Node.jsの話はこれくらいにして、Node.jsによって動いているpugについてシェアしたいと思います。

公式ページ→https://pugjs.org/api/getting-started.html

 

pugとは

現在フロントエンドのコーディングをしていれば知っている方もいるかと思いますが、pug ファイルから HTMLを生成をしてくれるものです。
中にはLPなどだけではpugなんか使わなくてもいちから手書きで書いたほうが早いよ！！テンプレートとか、変数とか使う機会ないし要らないよ！！俺は手書きでガシガシ書く派だぜ！！なんなら存在は知ってたけど使い方知らないぜ！！という方もいらっしゃると思います。

 

しかし！！

大規模な案件である程度決まったパターンが毎ページごとに決められていたらどうでしょう。何度も何度も同じヘッダーやフッターを書くでしょう。最初はうまくいくかもしれませんが何度も行ううちに、どこかでミスをしてしまうかもしれません。それでしたら、pugを使用してヘッダー、フッター、ある程度テンプレートが決まっている箇所を変数としてまとめておけば、記述のミスが格段に減ってくるはずです。

 

実際に手を動かしてみよう！

pugを良さを知ったところで早速pugをインストールしていきましょう。
※pugのインストール行う前に前もってNode.jsのインストールをお願いします。

 

以下のコマンドでpugのインストールが完了します。



 npm i pug-cli -g


以下のコマンドでバージョンが表示されれば正常にインストールされています。


 


pug -v


 


 


ではまずpugのソースを書いていきましょう。（拡張子は.pugです。）


 


index.pug に以下の簡単なソースを書いていきましょう。


doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        style(src="css/style.css")
        title 小木さんがんばれ！
    body
        div.container
            h1.main 小木さんファイト
            h2.content 小木さんのめがねかっこいい



タグも書かずに、classもidも、cssの時のように省略してある偉そうなソースですね。

エンジニアは効率化という大義名分を使ってすべての作業を楽にしようとしますね。それがpugだと思ってください。

(嘘です。非常に便利なツールです。)

そして上記のソースがこうなります。

↓


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>小木さんがんばれ！</title>
</head>

<body>
    <div class="container">
        <h1 class="main">小木さんファイト</h1>
        <h2 class="content">小木さんのめがねかっこいい</h2></div>
</body>

</html>




利点


・htmlの記述をするときにid や、class の指定をcssのように書けます。

・includeや変数なども使えます。

・コメントアウトも // が使えます。

・//-　といった特殊なコメントアウトの方法もありhtmlに反映されないものです。

このようにpugを使うと、htmlの記述が短縮され、時間の効率化を図ることができます。


 


終わり


 


またこういったhtmlの記述をサポートしてくれるものはpugだけでなく他にも色々あるので調べてみると良いです。引き続きエンジニア会議で発表される面白いアイディアや知識を、この場でシェアさせていただければと思います。


次回更新をお楽しみに！新米エンジニア小木でした！

			

			










		


		

	

		
関連サービス

		
LPO(ランディングページ最適化)

	





	
関連記事