Extends機能をつけてパッケージを公開しました!さてさて、現在Node.jsの開発が楽しくなってきているところではありますが、(あまり有益ではないとわかっているのですが、)どうしてもメインで使っているLaravelと比較してしまうことが多々あります。その度にいかにLaravelがスピーディーな開発ができるよう設計されているかを実感することになるのですが、今回はNode.jsの高速レスポンスを使うことが目的で、そうも言っていられません。そのため、「この機能は無い・・・なら自前でつくればいい(ぺこぱ風)」ということで前向きに考えるようにしています。いうことで、今回はタイトルにもあるとおり、Node.jsのテンプレート・パッケージ「mustache.js」に継承機能を追加した「grown-mustache」というパッケージをつくってみました。(npmの詳細ページはこちら)今回はその使い方をご紹介します。合わせて読みたいテンプレートの継承機能とは?これもLaravel由来の話になってしまうのですが、Laravelが標準で使っているテンプレート・エンジン「Blade」ではある特定のファイルを基本としてセクションごとにコンテンツを振り分けるという機能が備わっています。例を見てみましょう!まず、以下のような「ウェブサイトの大枠を決める」レイアウト・テンプレートを作ります。@yield('content')</div></body></html>この中の@yield('*****')という部分がセクションになります。メインになるテンプレートはこのようになります。<h1>テスト・コンテンツ</h1>@stopそうです。中身を入れ替える」という意味になり、結果はこうなります。<h1>テスト・コンテンツ</h1></div></body></html>そして「なぜこの継承機能が使えるといいのか?」ですが、コード量を減らすことが出来るというメリットが一番ではないでしょうか。<html>〜</html>などのタグを全ファイルに書くことになります。共通ブロックを作って読み込む形でも実装はできますが、そうなるとHTMLタグの開始と終了が別ファイルの中に入ってしまうことになり、wordpressの改造などのように保守管理が難しくなってしまいます。デザイナーさんにもあの書き方を覚えてもらわないといけないので、保守管理に消極的になると思うんですよね(実際のところはどうでしょう???)パッケージをインストールするnpmでパッケージを公開しているので以下のコマンド一発で完了します。基本的な使い方このパッケージはmustache.jsを拡張したものなので、基本的にはmustache.jsと使い方は同じです。'Message'});継承機能の使い方では、メインの継承機能です。(といってもここはLaravelのBladeとほぼ同じです)まずはレイアウト・テンプレート「layouts/app.mst」を作ります。@yield('content')</div></body></html>そして、メインのテンプレート「index.mst」です。}}の部分はパラメータを使って置き換えることになります。実際にindex.mstを使うコードです。'テストメッセージ'});Expressで使う「GrownMustache.js」は、Node.jsのフレームワーク「Express」でも使えるようになっています。こちらも通常のmustacheと同じように設定するだけでOKです。'mst');【追記:2020.01.21】expressをexpress()に変更して、render()の前に実行されるコールバック関数が使えるようにしました😊そして、ルート内でres.render()で呼び出してください。});});以上です😊✨おわりにということで、今回はmustache.jsを拡張した独自パッケージをご紹介しました。ちなみにExpressにはそもそも独自のテンプレートエンジンが使えるように設計されているので、もし今回のパッケージをより良くしたい方はこちらのページ(英語)をご覧ください。高速表示させるために、当初はパッケージ自体にキャッシュ機能をつけていましたが、Expressにはビューのキャッシュがあるらしい(ただし、デフォルトでは、production環境だけのようです)ので、あえてそれらのコードは削除しました。皆さんも色々と試してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。