フロントエンドをモダンにするための用語まとめ（２）
みんなー元気してるー？
すごいテンションで始めるよー。
今日は、何となく友達に話すような感じで書いてみる★N★E。
今日は、フロントエンドをモダンにするための用語まとめ（１）の第２弾だよー。
前回の記事がリトルベル子の中でとても好評だったから、どんどん続けて書いていこうと思ってる。
簡潔にまとめようと思うと、分かってるつもりだったやつでも少し勘違いしてたり、また新しいことを知ったりして、すっごく自分の勉強になるってことに気づいた。
でもあれだねぇ、やっぱさフロントエンドってホントにいろんな用語というか関連フレームワークっていうか、新しい技術っていうか、そういうの多くてさぁ、それを事前に理解してないと記事とか読んでても、まったく意味不明でチンプンカンプンだしー、勉強会とか行っても登壇者の言ってることの10％も分からないとかあり得ると思う。マジで。
しかも今日はjs関連だから内容マジ濃ゆいのをお茶漬けにしたったぞぉ。
これを全部読めばとりまフロントエンダーの勉強会に行っても涙目にはならない。
はずだょ。
【Node.js】
すごいテンションで始めるよー。
今日は、何となく友達に話すような感じで書いてみる★N★E。
今日は、フロントエンドをモダンにするための用語まとめ（１）の第２弾だよー。
前回の記事がリトルベル子の中でとても好評だったから、どんどん続けて書いていこうと思ってる。
簡潔にまとめようと思うと、分かってるつもりだったやつでも少し勘違いしてたり、また新しいことを知ったりして、すっごく自分の勉強になるってことに気づいた。
でもあれだねぇ、やっぱさフロントエンドってホントにいろんな用語というか関連フレームワークっていうか、新しい技術っていうか、そういうの多くてさぁ、それを事前に理解してないと記事とか読んでても、まったく意味不明でチンプンカンプンだしー、勉強会とか行っても登壇者の言ってることの10％も分からないとかあり得ると思う。マジで。
しかも今日はjs関連だから内容マジ濃ゆいのをお茶漬けにしたったぞぉ。
これを全部読めばとりまフロントエンダーの勉強会に行っても涙目にはならない。
はずだょ。
【Node.js】
『ノンブロッキングな非同期I/O処理で大量の接続を高速に処理することができる』というすごそう感あふれる説明で紹介されるのが一般的。
その辺のすごそうなところはよく分からなくても、猫も杓子もNodeモジュール（パッケージ）はとにかくみんな大好き。
Nodeはバージョンがいろいろあるのでバージョン管理をしている人も多い。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
↓この人がPHPのシステムにも簡単に組み込めるって言ってる
LaracastsのマスターであるジェフリーもLaravelと組み合わせて使う方法をLaracastsで紹介している。
【npm】
Node.jsのパッケージマネジャー。Node Package Maneger、略してnpm。
このパッケージマネジャーを使うことにより、サードパーティが作成したNode.jsの拡張モジュールを手軽にインストールすることができる。『スマホにアプリを入れる』とほぼ同じ感覚（私が）。
Gulp、Grunt、Less、Browserify、CoffeeScriptなど近年のホットでクールなクライアントサイド技術の多くがNode製ということから、npm installは「いただきます」と同義語になりつつある(※個人の意見です)。
このパッケージマネジャーを使うことにより、サードパーティが作成したNode.jsの拡張モジュールを手軽にインストールすることができる。『スマホにアプリを入れる』とほぼ同じ感覚（私が）。
Gulp、Grunt、Less、Browserify、CoffeeScriptなど近年のホットでクールなクライアントサイド技術の多くがNode製ということから、npm installは「いただきます」と同義語になりつつある(※個人の意見です)。
【Express】
【Vanilla JS】
何のフレームワークも使わない素のJavaScriptのこと。
jQueryなどのフレームワークを使ってJSを書くことが日常化したことから、フレームワークを使わない素の言語仕様のみで記述したJSのことを、このように呼ぶようになった。 "Vanilla JSは世界最高速で最軽量のフレームワーク”というネタで知られる。英語圏でVanillaという表現は、何のトッピングもしていないバニラアイスクリームから「ノーマルの」「素の」「面白みのない」のような意味で使われる。
jQueryなどのフレームワークを使ってJSを書くことが日常化したことから、フレームワークを使わない素の言語仕様のみで記述したJSのことを、このように呼ぶようになった。 "Vanilla JSは世界最高速で最軽量のフレームワーク”というネタで知られる。英語圏でVanillaという表現は、何のトッピングもしていないバニラアイスクリームから「ノーマルの」「素の」「面白みのない」のような意味で使われる。
【ECMAScript 6】
ECMAScript 6またはECMAScript 2015と表記される。
コードネームは”harmony”。
今年の６月に標準化団体ECMAインターナショナルが正式に承認し、今後Webブラウザでの実装が進むことが予想される。
ちなみに標準化団体がW3Cでないのは、政治的な背景があるとのこと。
ES6ではClass構文など多くの構文が追加され、オブジェクト指向が大好きなサーバーサイダーたちにとって胸アツの仕様となっている。
「でも、ほら、まだ早いんでしょ？ 使えないんでしょ？」
と思いきや、ES6用トランスパイラBabelを使えば、ES6構文を現状の仕様に則ったコードに変換してくれるので、ES6をいち早く取り入れることができる。
【Babel】
ES6をES5(JavaScriptの現行バージョン)にトランスパイルしてくれるトランスパイラー。
現在、大変注目が集まっておりLaravel Elixirにも標準装備されているので、Laravel5使いは今日からES6構文を取り入れることができる。BabelはBrowserifyとセットで使われることが多く、BrowserifyのBabel変換ライブラリBabelifyを組み合わせて使うことで非常にモダンなJavaScriptを書くことができる。だが、ES6をES5に変換するという性質上、変換の際にコード量がかなり増える構文もあるため、変換後のファイルサイズには注意が必要だ。
【Bower】
Nodeのnpmに影響を受けて開発されたフロントエンド用パッ
クライアントサイドで利用するライブラリを管理できるツール。
【JavaScriptのモジュール管理問題】
本来、ブラウザで処理される言語であったJavaScriptには他のプログラム言語にあるような外部モジュールを取り込んだり依存関係を解決したりするモジュール定義の言語仕様が存在しない。そのため、依存関係があるファイルを人の目で並べたり結合したりする必要性があった。
▼よくあるフロントエンダーの作業風景
１．jsを書き始めた。
２．１枚にたくさんのメソッドが書いてあって何がなんだか分からない。
別ページではspecificなこれだけ使いたいのに…。
てゆうか、いつかの私よ、これどこに使ってる何よ！？
３．よしコンポーネントごとにファイルを分けるぞ！
４．ファイルがたくさん出来すぎてHTTPリクエスト飛びすぎワロタ。
５．別の作業者が依存関係のあるファイルが分からず、綺麗にするためよかれと思って行を入れ替えたら、エラー出まくり。
６．依存関係とリクエストの問題あるから、納品のときはやっぱ１枚にまとめることにするわ(´；ω；｀)
７．１ヶ月後に、修正依頼が来てjsを開いた。
８．（２に戻る）
jsのコード量が肥大化するにつれ、人々はこのような問題に直面するようになる。さらにサーバーサイドでJS使いたい人とかアプリで使いたい人とかも現れ、モジュール機構ないと無理ゲーだよってことになり、モジュール管理するための仕様がいろいろと考えだされた。
代表的なJavaScriptのモジュール仕様にCommonJS、AMD、UMD、ES6（言語標準仕様）がある。
代表的なJavaScriptのモジュール仕様にCommonJS、AMD、UMD、ES6（言語標準仕様）がある。
【CommonJS】
JavaScriptをサーバーで使いたいと思った人たちが俺様APIをいろいろ作ってカオスになってきたので、話し合って仕様を標準化しようとするプロジェクトのこと。またはそのプロジェクトで提案されている仕様のこと。またはrequire()って書いて他のJSファイルのモジュールをインポートできるモジュール構文のこと。本来のCommonJSは様々なAPI仕様を含んでいたが、あまりうまくまとまらなかった。しかしNode.jsがCommonJSのモジュール構文を採用したことで認知度が高まったことから、CommonJS=モジュール構文というような表現がされる。というかむしろCommonJSと書かれた場合の殆どは、CommonJSのモジュール仕様のことを指す。もっと踏み込んで言えばNode.jsのモジュール構文を指す。
同期的にほかのモジュールを読み込むことができるのが特徴。
【AMD】
(Asynchronous Module Definition)
CommonJSはサーバー側で使うために考えられた仕様のため、ブラウザ側でもモジュール管理したいということで、ブラウザ向けに考えだされたモジュール構文の仕様。非同期的な読み込みができるのが特徴。
Nodeでは標準だとAMDモジュールを読み込めない。
【UMD】
(Universal Module Definition)
モジュール定義の書き方をサーバーでもブラウザでも読み込めるように書く書き方のこと。
【モジュールローダー】
本来は非標準であるモジュール構文をブラウザで読めるようにするやつ。モジュールバンドラーなどとも言われる。代表的なものにRequireJS、Browserify、webpackがある。
【RequireJS】
AMDで実装されたモジュールを読み込むことができるようになるモジュール管理フレームワーク（モジュールローダー）。ブラウザでrequire.jsを読み込み、起点となるメインjsファイルに依存関係ファイルを記述すれば読み込むことができるようになる。
r.jsというNodeモジュールもあり、1つのファイルにビルドすることもできる。
【Browserify】
CommonJSのモジュールシンタックスをブラウザ上で動くように変換してくれるビルドツール。簡単に言うとrequire()って書いたやつをブラウザで読み込めるソースにしてくれるやつ。
npmでインストールできるNodeモジュールでNode実行環境に依存しないものは、Browserifyでビルドすればブラウザで使えるようになる。jQueryのようなフレームワークやjQueryプラグインなどもnpm installしてBrowserifyでビルドすると使えるので、パッケージマネージをBowerでするのか、npm+Browserifyでnpmでまとめてするのかという話がよくされる。
Laravelで標準サポートされている。
【webpack】
Browserifyより後発のモジュールローダー。CommonJSモジュールとAMDモジュールの両方をサポートするモジュールローダー。
設定ファイルを作っておけるので毎回コマンドオプションを指定する必要がない。
ファイルの分割ができる。
Browserifyと違い、htmlとcssなどもまとめられる。Browserifyを使用していてもpartialifyと組み合わせればhtmlとcssをrequireできるが、webpackにはloaderという拡張システムがあり、例えばCoffeeScriptで書いたものをコンパイルしてパックするということもできる。
SassやLessなどのloaderもあるためGulpのようなタスクランナーを使わなくてもwebpackだけでビルドが完結できる。
上記の理由から、タスクランナーとして採用するという考え方もある。
現状、Laravelでは標準サポートされていない。
用語をまとめることだけに特化してるから、サンプルコードとか一切載せないぞw
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。
ほんじゃあ、またね〜
用語をまとめることだけに特化してるから、サンプルコードとか一切載せないぞw
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。
ほんじゃあ、またね〜
