クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

EJS

【React】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…

【メタ言語】フロントエンド開発スターターキットを作った(EJS、Sass(SCSS)、TypeScript)

メタ言語の続きです。前回はdelを使って破壊神になり、ファイルを削除しました。今回はこれまで作ってきたコードを元にフロントエンド開発スターターキットを作ります。メタ言語(EJS、Sass(SCSS)、TypeScript)のコンパイル&画像圧縮を行う環境です。それで…

【gulpfile.js】gulp.task()を関数化(←gulp4推奨)他、リファクタリング

メタ言語の続きです。前回はimageminを使ってメタ言語コンパイル環境で画像圧縮も実行しました。今回はgulpfile.jsの中のgulp.task()をgulp4で推奨されている関数の形に変更します。その他にもいくつかリファクタリングしました。それではいきましょう!

【Express】環境変数とは?PATHを通すとは?けっきょく南極ローカルインストール!(Herokuコマンドでローカル起動)

Expressの続きです。前回はHeroku CLIを使ってExpressアプリをHeroku 上にデプロイしました。今回は、このアプリをHerokuコマンドでローカル環境でも起動します。エラー表示になったため、環境変数やPATHなどについて色々調べてみました。それではいきましょ…

【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする

Expressの続きです。前回はローカル環境のMAMPのMySQLMySQLに対してFetch APIのデータを使ってCRUD処理しました。今回からはクラウドのPaaS環境であるHerokuにNode.js環境を作って行きたく。今回はローカル環境にHeroku CLI環境を作ってHerokuにデプロイする…

【EJS】fsモジュールを使ってコンテンツのJSONデータを読み込む

メタ言語の続きです。前回はEJSのinclude()を使ってBEMのブロックごとにモジュール分割しました。今回はコンテンツ(見出し、本文など)部分を外部JSONファイルにしてfsモジュールを使って読み込みます。それではいきましょう!

【EJS】include()でBEMのブロックごとにモジュール分割(Sass(SCSS)も修正)

メタ言語の続きです。前回はSass(SCSS)の変数($)や@mixinを使ってモジュールを超えた値の受け渡しをしました。今回はEJSの方もBEMのブロックごとにモジュールファイルを分割してみたく。include()メソッドを使います。それではいきましょう!

【Sass(SCSS)】変数($)、@mixinを使ってモジュールを超えた共通スタイルを設定する

メタ言語の続きです。前回はSass(SCSS)の@importを使ってBEMのブロックごとにファイルを分けました。今回は変数($)や@mixinを使って、モジュールファイルを超えた共通スタイルを設定してみます。それではいきましょう!

【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる(モジュール事始め)

メタ言語の続きです。前回まではメタ言語(EJS、Sass(SCSS)、TypeScript)を同時にコンパイルする環境を作っていました。これによって、これまで「class名が長くなるんだよなー」という理由であまり手を出してこなかったBEMによるclass名がもっと楽につけれ…

【gulp】メタ言語(EJS、Sass(SCSS)、TypeScript)を同時コンパイルする!

gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)フルセットの同時コンパイル環境にてみます。それではいきましょう!

【HTML】EJSをGulpでコンパイルしてみる(SyntaxErrorでちょい苦戦)

Gulpの続きです。前回はHTMLテンプレートエンジンのPugをGulpでコンパイルしました。今回はEJSのコンパイルにトライ。それではいきましょう!

【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)

HTMLテンプレートエンジンの続きです。前回はPugでFizzBuzzってみました。今回はEJSでFizzBuzzる!Pugと同様Node.jsでトランスパイルできつつ、PugよりもHTMLの書式が残ったテンプレートエンジンです。それでは行きましょう!