サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
EJSとは？javascript用のテンプレートエンジンです。 詳しくは以下を参照してください。HTMLなどのテンプレートテキスト内にjavascriptのロジックを記述したり、変数や関数の実行を評価してテンプレートテキスト中に埋め込んだりできるものです。本エントリにて記述する内容 テンプレートエンジンEJSの仕組みを、ソースコードを読みつつ解説したものです。 これを書いた動機として、テンプレートエンジンを作りたかったこと、テンプレートエンジンの仕組みが気になったことなどがあります。 ライセンス 解説のためにソースコードを引用しているので、ライセンスを記述しておきます。 EJSはApache License 2.0です。 また、このQiitaエントリのライセンスはQiitaの利用規約に準拠します。 ざっくりとしたEJSの原理 テンプレートとして渡された内容を解釈して、javascri
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについてHTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できるHTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
編集ファイルgulpfile.js _head.ejs（パーシャル化） meta.json 各個別ページのejsファイル 先ず、gulpfile.jsに設定を記述する。 jsonファイルを読み込むのに必要な「fs（File System）」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。 タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。 //gulp core vargulp = require('gulp'); //fsファイルの読み込み var fs = require( 'fs' ); var ejs = require("gulp-ejs"); var rename = require("gulp-rename");gulp.task('ejs', function()
数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。サンプルとしてファイルは以下におてます。 https://github.com/shigekitakeguchi/yarn-webpack-ejs ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。 いやいやもっとあるよってことになるかもしれないけど今回紹介しようと思うやり方は数ページから20ページくらいの規模のものが便利なんじゃないかな。 それ以上のサイトになるともうちょっと本格的な静的サイトジェネレーターとかを検討したほうが良いと思う。 数ページとはいえヘッダーやフッター、あとmeta要素やナビゲーション、細かいところでいうとGoogle An
EJSを使用している環境でtitleやmeta name="description"といったメタ情報をJSONファイルひとつで管理できるようにする方法です。 紹介する方法はgulpを使用した実装方法になるので、予めgulpが使用できる環境を用意してください。 EJSの基本的な使用方法などについては割愛しているので、「EJS --EmbeddedJavaScripttemplates」や「GitHub - mde/ejs:EmbeddedJavaScripttemplates」などで確認してください。 使用するプラグインとファイル構成 プラグインのインストール 今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
