いつも忘れるからメモ Express(Node.js)で利用出来るテンプレートエンジンでectを最近使っていますが,ejsのようにforEach文を書こうとすると失敗したのでメモ
![ejsやectテンプレートでのfor文メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/97211f9cd949f2f65afee402d26a3049326884a0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9ZWpzJUUzJTgyJTg0ZWN0JUUzJTgzJTg2JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgxJUFFZm9yJUU2JTk2JTg3JUUzJTgzJUExJUUzJTgzJUEyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMGY1ZDQ5NDY1M2Y0MGQ3MTg1YjllOTc2MzM4YjM4ZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbjBiaXN1a2UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU1MWVlZWU5YWEyYTYxNTdmYTllNWM3ZWY1NWQyZmUy%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da6841f1c9093d586fda29627d2b5277e)
似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。 そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。 aircolor.hatenablog.com ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。 用意するもの gulpは入れてある前提。インストールは割愛。 fs gulp-ejs gulp-rename 下記は新しく作ります。 pages.json(各ページの設定用ファイル) template.ejs(テンプレートEJSファイル) 各ファイルの設定 pages.json それぞれのページの設定を記述。 { "pages": [ { "id": "page1", "title":
前回、HTMLファイルを読み込んで表示させる、ということを行いましたが、思ったより面倒くさいことがわかりました。ファイルを読み込むのに非同期メソッドを使わないといけないし、ちょっとしたデータをHTMLに受渡して表示させるのもいちいちreplaceでコードを置換したりしないといけない。もっと簡単な方法はないのか?と思ったことでしょう。 実は、あります。それは「テンプレートエンジン」を使うのです。Node.jsでは、さまざまなテンプレートエンジンが利用できます。もっとも一般的に用いられているのは「EJS」というものでしょう。 では、EJSをインストールしましょう。Node.jsには「npm」というパッケージ管理プログラムが用意されています。これを使うことで、コマンド一発で必要なライブラリをオンライン経由でダウンロードしインストールできます。 コマンドプロンプトやターミナルを起動し、以下のように
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
2016 - 02 - 01 静的サイトジェネレーターを比較してgulp-ejsに辿り着いた Web開発 gulp スポンサード リンク 静的サイトジェネレーター(スタティックサイトジェネレーター)をいくつか比較し、実際に使ってみて、最終的に gulp-ejs に辿り着きました。 まず、gulp-ejsに辿り着くまでの話を少しだけ。 その後、gulp-ejsの導入方法を書いていきます。 gulp-ejsに辿り着くまで 最初はsmarty 元々は動的サイトを構築するために、 smarty を利用していました。 データベースとの通信や、テンプレートエンジンとしての機能、強力なキャッシュ機能など、使いやすい部分も多かったです。 しかし、データベースとの通信が不要で簡単なサイトを作るようなケースの場合、メリットよりもデメリット(導入やメンテナンスに掛かる手間)の方が大きくなったので、簡単に使える静
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能(gulp/Gruntなどと連携すると簡単そう) よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります(いわゆる短縮文法)。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
What is EJS? What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. Use plain JavaScript We love JavaScript. It's a totally friendly language. All
こんにちは! LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか? EJSっていうのはですね、なんかもう、こう、すんごいツールでして! とにかく、使うとコーディングがめっちゃ早くなるんですよ!! 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは? EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く