skillup

技術ブログ

JavaScript

ejsのテンプレート

投稿日:2018年2月3日 更新日:

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。

で、生のHTML/CSSの本を読んでいてejsなるテンプレートエンジンを発見。どうやらnode.jsのテンプレートのようですね。

まあHTMLで中でPHP使えればいいんですけどhtaccessの設定とかが面倒だったり、中にはできないケースもあるかと思いこれを機に勉強してみました。

インストール

nodeとnpmが入っていることが前提となります。

ディレクトリ構成

_header.ejs

_footer.ejs

index.ejs

タスクランナー(gulpfile.js)

GitHub

https://github.com/umanari145

参考リンク

EJSを使って スクリプトなどをヒアドキュメントっぽくextends する

EJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …