素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

投稿日: 2019年6月13日
最終更新日:

スポンサーリンク

336×280




おさらい

前回は、Nuxt.jsプロジェクトでsassを取り扱えるようにカスタマイズしました。

今回はpugを使えるようにカスタマイズしていこうと思います♪

pubとは

What’s?

Pugとは、HTMLを書くためのJavaScriptテンプレートエンジンです。
以前はJadeとも呼ばれていました。

The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.Getting Started – Pug

記述量が爆発的に減る

このPugですが、なにが良いかというとHTMLの記述量がかなり少なくなるという点です。

タグを使わない代わりに、改行やインデントを利用してコードを書いていきます。
これにより閉じタグが不要になり結果として記述量の大幅削減が実現出来ています。

より詳しい記述方法については公式ドキュメント を読んでみると良いでしょう♪

Hamlの影響を受けている

前述の通り、PugはJST(JavaScript Templates)の一種です。
また、Ruby On Railsのテンプレートエンジンとして有名なHamlと呼ばれるHTMLテンプレートエンジンの影響を受けたと言われています。


Beautifully DRY,
well-indented, clear markup:
templating haiku.Haml

こちらもタグではなくインデントによる記法が特徴的で、記述量が少なくなることで人気を博しました。

Nuxt.jsもPugを簡単に導入可能

そして、Nuxt.jsももちろん簡単にPugを導入する事が可能です。

それでは早速導入していきましょう。

手順

必要ライブラリのインストール

まずは、yarnを使って必要ライブラリを追加していきましょう。

無事インストール完了です♪

テンプレートファイルをpug形式に変更

次に、index.vueファイルをpug形式に書き換えていきましょう。

確認

準備はたったこれだけです。

実際にサーバーを起動してアクセスしてみましょう。

正常に描写されましたね♪

本日のオススメ商品

Nuxt.jsビギナーズガイド

Nuxt.jsの参考書ならこれ!

チャオ (CIAO) 猫用おやつ ちゅ~る まぐろ

猫との距離を詰めるならコレ!

サントリー烏龍茶

常備しておいて問題なし!

終わりに

今回は依存ライブラリさえインストールしてしまえば、nuxt.config.js手を加えることなくpugの導入が出来てしまいます。

生のHTMLを書くメリットはほとんど無いと思うので、Nuxt.jsを使っているのであれば是非Pugを使って記述をしてみてはいかがでしょうか♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , ,

blogenist

Author: blogenist