nanisore oishisou

Webエンジニアあるまさんのゆるふわ奮闘記。

フロントエンドをモダンにするための用語まとめ(3)

どうも!

フロントエンドをモダンにするための用語まとめシリーズの最新号です。

フロントエンドをモダンにするための用語まとめ(1)
フロントエンドをモダンにするための用語まとめ(2)


【jekyll】
みんな大好きマークダウン記法で記事を書き、黒い画面で呪文を唱えると、静的なhtmlが大量に出来上がる静的サイトジェネレータ。主にブログ用。
Rubyで書かれているのでRuby使いとの親和性が高い。コンパイル後はただの静的ファイル群のため、扱いが非常に楽。WordPressに疲れた人向けらしい。

シンタックスシュガー】
日本語で糖衣構文。ある構文を、より簡単に人間が読み書きできるように書き換えた構文のこと。

JavaScriptシンタックスシュガーと紹介されることが多い。
JavaScriptRubyライクに記述できるメタ言語Ruby on Railsで標準サポートされていることから、Ruby使いに愛用されている。
Nodeモジュールでコンパイルができるほか、公式サイトにはオンラインのインタープリタがあるので、ちょっと括弧やセミコロンを書くのが面倒になったら、気軽に使うことができる。
クラスベースオブジェクト指向な書き方ができる(←本来の使い方)。
変数展開ができたり、変数宣言が省略できたりして、JavaScriptで陥りがちなミスを未然に防いでくれるという効能もある。
Laravel ElixirでもCoffeeScriptを標準サポートしている

【TypeScript】
マイクロソフトが開発しているaltJS。JavaScriptに静的型付けやクラス、継承、インターフェイスのようなオブジェクト指向プログラミング構文拡張を加えた拡張言語。
また構文拡張という点からES6を先取りできるトランスパイラーであるBabelとの比較もされる。2015年3月AngularJS2.0がTypeScriptで開発されることが発表され、注目を浴びた。
また、TypeScriptの外部モジュールシステムはCommonJS形式とAMD形式のどちらにもコンパイルできる。

【Edge】
マイクロソフト社製の最新ブラウザーマイクロソフト後方互換性や独自性にこだわったため、ブラウザのモダン化、Web標準化に遅れをとり、モダンブラウザという指針を掲げては失敗してきた。その経験から、IEを切り離した新ブラウザEdgeの開発を決断することとなった。新ブラウザEdgeはIEのHTMLレンダリングエンジンTridentを搭載しない全く新しいブラウザだ。
Tridentは1997年発表のIE4で初めて搭載されたレンダリングエンジンで、20年近くマイクロソフトはこのエンジンに改修を続けてきた。使い古されたこのエンジンと別れを告げること(厳密にはTridentをフォークして大量の古えコードを削除)そして今後は各OSで最新のブラウザのみをサポートとすることを発表し話題となった。
また、発表時にこれからは周りと足並みを揃えることも誓った。これをマイクロソフトは相互運用性と表現している。現在出てきているベンチマークテストの結果からすると、ようやく他のブラウザと同じ水準になった感がある(もちろん私の個人的な感想)。生まれたてのブラウザとしては悪くないとの評価も見られた(こっちはすごそうな人の意見)。html5テストの結果は他と比べてまだ低いが、驚くべきことに次世代JavaScriptと呼ばれるECMAScript6のサポート率が飛び抜けて高い。Edge13ではBabelのサポート率71%を大きく上回る84%の文法に準拠する。Chromeの65%と比べるとその差は20%に迫る。
このような背景から、ユーザーエージェントにChromeAppleWebkit、Safariなどの文字が入り乱れ全部盛り状態となっているのも特徴だ。
ES6対応状況:http://kangax.github.io/compat-table/es6/

【Yeoman】
yo、Bower、Gruntの3種のツールで構成される統合ウェブサイトジェネレートワークフローのこと。雛形をつくる→ライブラリを取り込む→スクランナーを走らせる。このような開発フローを提案する概念的なもの。またはyeoman-generatorのことを指す。

【yo】
Ruby on Railsのscaffoldに影響を受けて作成されたNode製の雛形作成ジェネレータ。対話形式で質問に答えていくとモダンなWebアプリの雛形が出来上がる。
npmで公開されている様々なyeoman-generatorを利用することで、お好みのフロントエンド、サーバーサイドのライブラリ群を取り揃えたWebアプリテンプレートが作成できる。さらに、自分でgeneratorを作り公開することもできるので、自分好みのライブラリを取り揃えた雛形を、黒い画面に呪文を唱えるだけで、いつでもすぐに展開することができる。

【タスクランナー】
面倒な作業を自動化するビルドツール。何の作業を自動化するのか分からない人のために、伝統的な手作業のWeb制作風景をおさらいしよう。

1.HTMLを全部カッコつきで丁寧に書く。
2.リセット用CSSフレームワークCSSと共有CSS
  ページユニークCSSと共通コンポーネントCSSを別々のファイルで作成する。
3.共通JSとページユニークJSとコンポーネントJSを別々のファイルで作成する。
4.共通で使う画像を1枚にまとめてCSSを調整。
5.構文チェックにかける。
6.納品用にファイルを加工するため本番用のフォルダを作成する。
7.自作のCSSを1枚にまとめる。
8.自作のJSを1枚にまとめる。
9.自作で作ったCSSとJSを圧縮する。
10.依存関係のあるJSファイルを1つにまとめて圧縮する。

一般ユーザー向けサービスのフロント側では少しでも表示速度を速くしてくれとの要求度が高い。モバイルページやアニメ効果を多様したページでのレンダリングピード向上のために、このような作業をフロントエンドのエンジニアは行う。
この作業は納品時の工数もバカにならないどころか、メンテナンスの際にミスを誘発し自分を呪いたくさせたり、デザイナーやオペレータがCSSを綺麗に戻せなくなるという人間関係のいざこざまで引き起こし、「ちょっとした修正」を「すごくめんどくさい修正」に変えてしまう、非常にやっかいな作業である。
特にCSSスプライトは画像修正のたびに1pxずれてロールオーバーや表示がおかしくなる現象を引き起こす原因となり、画像修正作業をデザイナーに丸投げできない状態にもさせる。
そういう悪夢のような作業を自動でやってくれるのがタスクランーだ。
さらにCSSメタ言語やJade、CoffeeScriptなど各種メタ言語コンパイルも自動化できる。

スクランナーを走らせるコマンドは、ES6構文、Browserify、CoffeeScriptSassなど、あらゆるものを一度でコンパイルしプロダクション用に加工してくれる魔法の呪文と化している。

【Grunt】
先発のJavaScriptベースのタスクランナー。さまざまなプラグインを読み込むことにより、いろいろなタスクを自動化できる。JavaScript寄りの記述方法。タスクをJSON形式で記述して追加する。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。

【Gulp】
後発のタスクランナー。
Gruntに比べてコード量が少なくて済む。
タスク量が増えたときにGruntに比べて何をしているのかが分かりやすい。処理がGruntに比べてやや高速(らしい)。
当初はプラグインが少なかったことからGrunt派が多かったが、現在では遜色ない。Node寄りの記述方法で、Node使い以外の使い手にはとっつきにくい。Laravel ElixirではGulpを採用している。
公式サイト
 
【SourceMap】
圧縮したりコンパイルしたりした後のJavaScriptファイルやCSSファイルが元のファイルの何行目なのかというマッピング情報を記録したファイルのこと。
このSourceMapの呪文がコンパイル後のファイルに埋め込んであると、SourceMapに対応したChromeなどのブラウザでは、コンパイル後の難読化したファイルのままでデバッグができるという優れもの。Laravel Elixirでは標準装備。

【polyfill】
読み方はポリフィル。ポリリズムと似ているが全くの別物。
古いブラウザーにない機能を補完するコード(ライブラリ)のこと。

【Web Components】
Googleが提唱しはじめたHTMLをコンポーネント化する概念、または思想のこと。またはその仕様。
ブラウザ標準仕様となることを目指している。
目指しているけど現状ではChromeOperaとFirefoxで実装が進んでいるだけ。以下のページでブラウザ対応表的なものが見られる。
だけどChromeでさえabout:flagsで有効化しないと現状では動かない。
でもWeb Componentsのポリフィルライブラリwebcomponents.jsを使えばSafariIEでも利用できる。

Web Componentsは以下の4つの基本仕様で構成される。
・Custom Elements
・Templates
・HTMLImports
・Shadow DOM
Shadow DOMとTemplatesを使って新たな要素を作成しCustom Elementsを定義する。それらをHTMLImportsでロードすることでカスタムHTMLタグを使用できるようになる。
こんなふうに書くと自分でも何のことやら分からない。
要するに
<lara-beruko></lara-beruko>
と書くと
[かわいいね][セクスィーだね][オシャンティーだね]
の3ボタンができて、クリックするとそれぞれの動きをする、というようなカスタムUIコンポーネントが自作できる。
そんな夢のような仕様のこと。
「あれ、でもそれってどこかで聞いたことがあるような気がするぞ」感がすごい。
Web Componentsの詳細解説→https://html5experts.jp/1000ch/11142/
【Polymer】
Web Componentsにシンタックスシュガーを与えるフレームワーク的要素の強いライブラリ。ブラウザ標準仕様を目指しているはずなのに公式フレームワーク存在するというモニョモニョ感がマジパない。
Polymer の詳細解説→https://html5experts.jp/1000ch/11905/




いかがでしたか。
今回もハンパじゃない文字量でお届けしました。
書いてる私が言うのもなんですが、どんだけー!って言いたくなります。

最後まで読んでくれた真面目で勉強熱心なあなたのために、ちょっとした雑談をしまーす。
今月、というか先月でプログラマになって半年が経ちました!
早いものですねー。

楽しい日もあるし、鬼コーチにしごかれて号泣する日もあったりなかったりもしました。

先日、みんなの先輩こと匠師匠(重複表現すぎw)と話していたときのこと。
「俺も3年くらいはすげー勉強してたからね」
そうか、孤高の天才的なオーラを醸しだしていて一見、天才肌的な感じの匠師匠にも、そんな努力家的な一面があったんですね。
まあ、そうだろうと思ってましたけど。

言い換えたら「3年くらいは、しっかり勉強しないとダメだよ」ということでしょうね。

まだまだ足りない部分の多い私ですが、これからも皆様よろしくお願いしますm(_ _)m