Babelなどは「コンパイラ」にあたり、「Babelでコンパイルする」という言い方をする。CSS、JSに無数にあるメタ言語のうち、どの言語からやってみるか選抜してみる。共通する選抜基準はこちら。Node環境でコンパイルできるなるべくネイティブの書式と似ている言語なるべく実務の現場でスタンダードに使われている言語Ruby環境でコンパイルするメタ言語も多いが、今のところ自分はNode環境での作業が多いのでNode環境でコンパイルできる言語としたい。RubyやPyrhonのようなカッコ無しでインデントで階層を表現する言語より、ネイティブなHTML、CSS、JSに近い書式の方が既存サイトの改修などにも使いやすそうに感じた。言っても実務の現場でスタンダードではない言語だとノウハウが活かしにくいので、そこも考慮した。HTMLテンプレートエンジンはEJS、Pug、(Markdown)HTMLはEJSとPugを選抜した。クモのようにコツコツとEJSはNode.jsが用意している拡張言語で、前回の記事にも書いたがネイティブのHTML書式と近い。クモのようにコツコツと一方PugはRubyのようにカッコ無しでインデントで階層を表現する。クモのようにコツコツと個人的にはEJSの方がわかりやすかったが、Googleトレンドで見るに日本国内ではPugの方が比較的スタンダードなようで無視はできない。いうことで、「EJS」と「Pug」を対象とする。メタ言語ではないがMarkdownも無視できない。Googleトレンドで見るといかにMarkdownが突出しているかわかる。MarkdownはHTMLを読み書き知識が不要でエンジニア以外も利用している。このブログもMarkdownだし。ページの本文の部分を書くには便利で静的CMSの構築に役立ちそう!「Markdown」についても併せて調べていきたい。クモのようにコツコツとSCSSやSassはRubyでコンパイルすると思っていたが、今はNode.jsでもコンパイルできるらしい!Googleトレンドで見るとSassとSCSSとStylusが拮抗しているように見える。こちらのアンケートではSassが圧倒的!CSSコーダーに質問。2018SassはRubyのようにカッコがなくてインデントで階層を表現するのが、個人的にはCSSと似た書式のSCSSの方がわかりやすい。Sassについての記事を調べるとほとんどはSCSSを意味しているようだった!(先ほどのGoogleトレンドの結果もSassとSCSSが同義と考えるとやはり突き抜けている!)今後はSass=SCSSという意味で「Sass(SCSS)」と併記していきたい。AltJSはTypeScriptとBabel最後はAltJS。Babel)はすべてNode.jsでコンパイルできるようだ。クモのようにコツコツとGoogleトレンドで見るとTypeScriptが飛び抜けている!CoffeScriptは以前はメジャーだったようだが、最近は使われなくなっている模様。LiveScriptは関数型の少し変わった形。数式みたいに簡素な書き方でこれもRubyのようにカッコがなく、インデントで階層を表現している。TypeScriptはフロントエンドの現場ではスタンダードになってきていて、型を指定することで間違いが起こりにくいらしい。書式もJSとほぼ同じ。Babelは最新のESの書き方ができる。厳密には「AltJS」ではない。Babelはコードを変換するという点では、CoffeeScriptやTypeScript*といった、JavaScriptのコードを生成するAltJSの仲間と言えるかもしれません。Functionといった、ES6に似た構文を使ってコードを書くことができます。構文を使うことはできますが、あくまでも書いているのはAltJSであって、本来のJavaScriptではありません。Babelを使う際に書くのは、AltJSではなく純粋なJavaScriptです*。新しい機能や構文を使って書いたJavaScriptを、現状のブラウザでも動くJavaScriptへと変換します。CodeGridTypeScriptとは別の目的として、将来採用され得るES書式で書く、という局面もあると感じた。(Googleトレンドの結果はちょっと低すぎやしないか?と感じた...)ということで「TypeScript」と「Babel」を対象にしていきたい。最後にということで、メタ言語のコンパイル環境構築のために選定した言語はこちらHTML:EJS、Pug、(Markdown)CSS:Sass(SCSS)JS:TypeScript、Babel次回以降、これらの全てに対応したコンパイル環境の構築について、調べて試して行きたく思います。14:12Tweet関連記事2019-12-25【JS】TypeScriptをGulpでコンパイルしてみるGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしまし...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-12-06【HTML】EJSをGulpでコンパイルしてみる(SyntaxErrorでちょい苦戦)Gulpの続きです。前回はHTMLテンプレートエンジンのPugをGulpで...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。...2019-11-14【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討したメタ言語のコンパイル環境を作る!続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。