こんばんは、サーバーサイダーの皆様。
とにかく明るいベル子です。
安心してください。var_dumpしてますよ！
だっふんだ
突然、何事かと思ったことでしょう。
先日、社長からブログにギャグが盛り込んであるとほっこりするね！とのお話があったので、ちょっとぶっ込んでみました。
話が込み入ってきたら、また懐かしのギャグを挟んでいこうと思います。
というのも、今日のブログの内容はまとめ的なものなので、なかなか私の文才をひけらかせる箇所がありませんでした。全国のベル子ファンの皆さん、ごめんなさい。
では、さっそく始めます。
ここ数年でフロントエンド周りの技術は目まぐるしく発展を遂げました。
それ故に「専門用語が多くて、記事を読んでいても何のことやら分からない。。。。」という経験をしたことありませんか？
「俺はサーバーサイダーだからフロントエンドなんてどうでもいい。男ならPHP」と強がってみたことはありませんか？
「フロントエンドの集会に行ってみたいけど、今どき感満載の専門用語をいっぱい出してくるチャラいフロントエンダーが怖いから行けない」と思ったことはないですか？
そんなあなたに、ベル子がこっそりフロントエンド周りのキーワードをまとめて教えてあげたいと思いますっ！レッツ・フロントエンド♪
これさえ読めば、あなたも明日からフロントエンド通っぽい雰囲気を醸し出せます。
「もう全部知ってた！」って人は、かなりのフロントエンド通です。
※ベル子が調べてまとめたものなので、もしかしたら間違いや勘違いもあるかもしれないです。ご使用はノークレーム・ノーリターンでお願いします。
【メタ言語】
あるコンピュータ言語を効率的に書くために用いられる言語。代表的なものにJavaScriptを効率的に書くCoffeeScript、TypeScriptなどがある。
【CSSプリプロセッサ】
CSSメタ言語とも言われる。CSSを効率的に書いたものを普通のCSSにコンパイルしてくれるやつ。代表的なものにSass、Less、Stylusなどがある。
【altJS】
JavaScriptを効率的に書くためのJavaScript代替言語のこと。JavaScriptメタ言語と同義。代表的なものにCoffeeScript, TypeScript, Haxe, JSX, Dartがある。
だっちゅーの
【Haml】
Sass記法の元になったと言われるHTMLをより簡潔に書くためのマークアップ言語(HTMLメタ言語)。主にRuby on Railsのビューテンプレートの記法として使用されるため、ビューテンプレートエンジンと紹介されることもある。Sass同様にGruntやGulpを使いコンパイルできる。Sublime Textのようなビルドツールつきのエディタなら、エディタだけでもコンパイルし使用できる。インラインでRubyもインサートできる。
【Jade】
Hamlに影響を受けて作られたJavaScriptテンプレートエンジン(JST)。Node.jsのフレームワークであるExpressのビューエンジンとして標準採用されている。もちろん単独でも使える。
【Sass】
Rubyで書かれた先発のCSSプリプロセッサ。
Ruby(Haml)ライクに書ける.sass記法と、CSSライクに書ける.scss記法がある。先発であるSassだが、Rubyチックな記法がCSS使いのデザイナーには敷居が高く、当初は注目を集めなかった。.scss記法を採用してからLessからSassへ流れた人が多い。
【Less】
JavaScriptで書かれたNode製CSSプリプロセッサ。JavaScriptで書かれているので、黒い画面を使わなくてもJSを読み込むだけで使うことができるが、初回アクセス時にロード時間がかかるため、あくまでブラウザでのコンパイルは開発用の確認程度とするように公式サイトで注意書きされている。
普通の人はNode.jsでLessモジュールとかGruntモジュールとかそういうのをインストールしてコンパイルして使う。SassにインスパイアされてCSSライクな記法を編み出し、Sassにも影響を与えた。CSS&JS使いとの親和性が高くCSSプリプロセッサに注目が集まるきっかけとなった。CSSライクな書き方が分かりやすいことから人気が出たが、Sassで.scss記法が書けるようになった頃からSassへシフトする風潮がある。
【Stylus】
Sass、Lessよりも後発で出てきたNode製のCSSプリプロセッサ。最大の特徴は文法に柔軟性があり、sass記法っぽい書き方とscss記法っぽい書き方の両方を混雑させて書けるという点。
Sassと違い拡張子を変える必要もない。
近頃、採用するエンジニアが増えているようである。Laracastsのマスター、ジェフリーも最近ではStylusがお気に入りのようでLaravel Elixir にStylusを追加するライブラリを公開しているので、Laravelでの採用も超絶簡単。Laravel Elixir2.0ではエラーが出るので、3.0以上にアップデートしないとダメ。
【Compass】
Sassを恐ろしく高機能にするフレームワーク。ベンダープリフィックスやCSS Spriteを簡単に作成する事ができる。
このまとめは、あと２〜３回ほど続く予定です。
それでは次回をお楽しみにね！
アディオス
[0回]