クモのようにコツコツと

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

メタ言語

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

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

【Sass(SCSS)】@importでBEMのBlockごとにファイル分割する

メタ言語の続きです。前回はBEMによるclass名をSass(SCSS)とEJSに書いてみました。今回からはモジュール設計に入ります。まずはBEMのB(ブロック)ごとにSass(SCSS)ファイルを分割してみます。@importを使います。それでは行きましょう!

【メタ言語】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)フルセットの同時コンパイル環境にてみます。それではいきましょう!

【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る

gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…

【gulp】Sass(SCSS)以外のメタ言語をコンパイルするためフォルダ構成(src→dest)

gulpの続きです。前回はbrowser-syncでSass(SCSS)環境の自動リロードをしました。かなり楽になったので、Sass(SCSS)だけでなくAltJS(TypeScriptなど)やHTMLテンプレート(EJSなど)も一緒にコンパイルできるようフォルダ構成をsrc→destという形に変更しま…

【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル

メタ言語の続きです。前回はMarkdownをGulpにコンパイルしました。コンパイル系でやってみたいことはある程度やれたので次は常時監視をやってみます。コンパイルを毎回実行するのは手間なのでファイルを修正するたびに自動的にコンパイルする仕組み。watch()…

【HTML】MarkdownをGulpでHTMLにコンパイルしてみる

メタ言語の続きです。前回はStylusをGulpでCCSにコンパイルしました。今回はMarkdownをHTMLにコンパイルしてみる。それでは行きましょう!

【CSS】StylusをGulpでコンパイルしてみる

メタ言語の続きです。以前、こちらの記事でAltCSSとしてSass(SCSS)をコンパイルしたのですが、その後、Stylusも触ってみて便利に感じたので、Gulpでのコンパイルを体験したく。それではいきましょう!

【JS】BabelでESをコンパイルする

JSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScriptをGulpでコンパイルしました。今回のBabelはESの新しい書式を従来の書式(ES5)に変換します。AltJSではなく正規なJSでちょっと書き方が新しいだけだし、Babel自体にコンパイル機能があるた…

【JS】TypeScriptをGulpでコンパイルしてみる

Gulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。それでは行きまっしょい!

【CSS】Sass(SCSS)をGulpでコンパイルしてみる

Gulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass(SCSS)をコンパイルします。それでは行きましょう!

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

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

【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)

Gulpの続きです。前回はローカルにインストールができました。今回はHTMLテンプレートエンジン「Pug」のコンパイルをやってみたいと思います。メタ言語全体としても自分の中での初コンパイルになります。それではいきましょう!

フロントエンドのメタ言語のコンパイル環境を作る(言語選定編)

以前、CodePenで体験できるフロントエンド のメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)をやってみた。その後、CodePenでは体験できないEJSなどの存在も知り、そろそろローカル環境にメタ言語のコンパイル環境を作りくなった。言語によって方法が…

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

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

【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)

以前の記事で紹介したテンプレートエンジンPug。Node.jsでトランスパイルできます。このときはタグの省略記法のみだったので今回はもう少しロジック的な変数、for文、if文を試しました。JSとの書き方の比較もしています。それではいきましょう!

【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで…

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…

【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め

先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 ア…

【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め(EJSもあるでよ!)

HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。 これらの形式をブラウザで表示するためにはHTMLにコンパイル(変換)する必要があります。その環境構築が第一難関です。 が!CodePenを使え…