フロントエンドをモダンにするための用語まとめ(3)
【シンタックスシュガー】
日本語で糖衣構文。ある構文を、 より簡単に人間が読み書きできるように書き換えた構文のこと。
Nodeモジュールでコンパイルができるほか、 公式サイトにはオンラインのインタープリタがあるので、 ちょっと括弧やセミコロンを書くのが面倒になったら、 気軽に使うことができる。
クラスベースオブジェクト指向な書き方ができる(← 本来の使い方)。
クラスベースオブジェクト指向な書き方ができる(←
Laravel ElixirでもCoffeeScriptを標準サポートしている 。
【TypeScript】
マイクロソフトが開発しているaltJS。 JavaScriptに静的型付けやクラス、継承、 インターフェイスのようなオブジェクト指向プログラミング構文拡 張を加えた拡張言語。
また構文拡張という点からES6を先取りできるトランスパイラー であるBabelとの比較もされる。 2015年3月AngularJS2. 0がTypeScriptで開発されることが発表され、 注目を浴びた。
また構文拡張という点からES6を先取りできるトランスパイラー
【Edge】
マイクロソフト社製の最新ブラウザー。マイクロソフトは後方互換性や独自性にこだわったため、 ブラウザのモダン化、Web標準化に遅れをとり、 モダンブラウザという指針を掲げては失敗してきた。その経験から、 IEを切り離した新ブラウザEdgeの開発を決断することとなっ た。新ブラウザEdgeはIEのHTMLレンダリングエンジンTri dentを搭載しない全く新しいブラウザだ。
Tridentは1997年発表のIE4で初めて搭載されたレン ダリングエンジンで、 20年近くマイクロソフトはこのエンジンに改修を続けてきた。 使い古されたこのエンジンと別れを告げること( 厳密にはTridentをフォークして大量の古えコードを削除) 、 そして今後は各OSで最新のブラウザのみをサポートとすることを 発表し話題となった。
また、 発表時にこれからは周りと足並みを揃えることも誓った。 これをマイクロソフトは相互運用性と表現している。 現在出てきているベンチマークテストの結果からすると、 ようやく他のブラウザと同じ水準になった感がある( もちろん私の個人的な感想)。 生まれたてのブラウザとしては悪くないとの評価も見られた(こっちはすごそうな人の意見)。 html5テストの結果は他と比べてまだ低いが、 驚くべきことに次世代JavaScriptと呼ばれるECMAS cript6のサポート率が飛び抜けて高い。 Edge13ではBabelのサポート率71% を大きく上回る84%の文法に準拠する。Chromeの65% と比べるとその差は20%に迫る。
Tridentは1997年発表のIE4で初めて搭載されたレン
また、
このような背景から、ユーザーエージェントにChrome、 AppleWebkit、 Safariなどの文字が入り乱れ全部盛り状態となっているのも 特徴だ。
ES6対応状況:http://kangax.github.io/compat-table/es6/
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を作り公開することもできるので、 自分好みのライブラリを取り揃えた雛形を、 黒い画面に呪文を唱えるだけで、 いつでもすぐに展開することができる。
npmで公開されている様々なyeoman-
【タスクランナー】
面倒な作業を自動化するビルドツール。 何の作業を自動化するのか分からない人のために、 伝統的な手作業のWeb制作風景をおさらいしよう。
1.HTMLを全部カッコつきで丁寧に書く。
4.共通で使う画像を1枚にまとめてCSSを調整。
5.構文チェックにかける。
6. 納品用にファイルを加工するため本番用のフォルダを作成する。
7.自作のCSSを1枚にまとめる。
8.自作のJSを1枚にまとめる。
9.自作で作ったCSSとJSを圧縮する。
10.依存関係のあるJSファイルを1つにまとめて圧縮する。
一般ユーザー向けサービスのフロント側では少しでも表示速度を速 くしてくれとの要求度が高い。 モバイルページやアニメ効果を多様したページでのレンダリングス ピード向上のために、 このような作業をフロントエンドのエンジニアは行う。
この作業は納品時の工数もバカにならないどころか、 メンテナンスの際にミスを誘発し自分を呪いたくさせたり、 デザイナーやオペレータがCSSを綺麗に戻せなくなるという人間 関係のいざこざまで引き起こし、「ちょっとした修正」を「 すごくめんどくさい修正」に変えてしまう、 非常にやっかいな作業である。
そういう悪夢のような作業を自動でやってくれるのがタスクランナ ーだ。
【Grunt】
先発のJavaScriptベースのタスクランナー。 さまざまなプラグインを読み込むことにより、 いろいろなタスクを自動化できる。 JavaScript寄りの記述方法。 タスクをJSON形式で記述して追加する。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。
【Gulp】
後発のタスクランナー。
Gruntに比べてコード量が少なくて済む。
タスク量が増えたときにGruntに比べて何をしているのかが分 かりやすい。処理がGruntに比べてやや高速(らしい)。
当初はプラグインが少なかったことからGrunt派が多かったが 、現在では遜色ない。Node寄りの記述方法で、 Node使い以外の使い手にはとっつきにくい。Laravel ElixirではGulpを採用している。
公式サイト
公式サイト
【SourceMap】
このSourceMapの呪文がコンパイル後のファイルに埋め込 んであると、 SourceMapに対応したChromeなどのブラウザでは、 コンパイル後の難読化したファイルのままでデバッグができるとい う優れもの。Laravel Elixirでは標準装備。
【Web Components】
ブラウザ標準仕様となることを目指している。
だけどChromeでさえabout: flagsで有効化しないと現状では動かない。
Web Componentsは以下の4つの基本仕様で構成される。
・Custom Elements
・Templates
・HTMLImports
・Shadow DOM
Shadow DOMとTemplatesを使って新たな要素を作成しCust om Elementsを定義する。 それらをHTMLImportsでロードすることでカスタムHT MLタグを使用できるようになる。
こんなふうに書くと自分でも何のことやら分からない。
要するに
<lara-beruko></lara-beruko>
と書くと
[かわいいね][セクスィーだね][オシャンティーだね]
の3ボタンができて、クリックするとそれぞれの動きをする、 というようなカスタムUIコンポーネントが自作できる。
そんな夢のような仕様のこと。
【Polymer】
Web Componentsにシンタックスシュガーを与えるフレームワ ーク的要素の強いライブラリ。 ブラウザ標準仕様を目指しているはずなのに公式フレームワークが 存在するというモニョモニョ感がマジパない。
Polymer の詳細解説→https://html5experts.jp/ 1000ch/11905/
Polymer の詳細解説→https://html5experts.jp/
いかがでしたか。
今回もハンパじゃない文字量でお届けしました。
書いてる私が言うのもなんですが、どんだけー!って言いたくなります。
最後まで読んでくれた真面目で勉強熱心なあなたのために、ちょっとした雑談をしまーす。
今月、というか先月でプログラマになって半年が経ちました!
早いものですねー。
楽しい日もあるし、鬼コーチにしごかれて号泣する日もあったりなかったりもしました。
先日、みんなの先輩こと匠師匠(重複表現すぎw)と話していたときのこと。
「俺も3年くらいはすげー勉強してたからね」
そうか、孤高の天才的なオーラを醸しだしていて一見、天才肌的な感じの匠師匠にも、そんな努力家的な一面があったんですね。
まあ、そうだろうと思ってましたけど。
言い換えたら「3年くらいは、しっかり勉強しないとダメだよ」ということでしょうね。
まだまだ足りない部分の多い私ですが、これからも皆様よろしくお願いしますm(_ _)m