--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Tag:

10
2016

ここ2ヶ月で知ったJavaScript界隈の用語とか

CATEGORYJavaScript
JavaScriptを本格的に使いだして2ヶ月、言語やフレームワークだけでなく、いろんな技術やら用語やら概念やらを学びまくったので、これからJavaScript学ぼうという人に役立つように、ちょっとリストアップしてみる。

なお、HTMLやCSS、またWebの一般的な用語についてはJavaScriptに関係が深いものを除き載せていない。
あくまでJavaScript開発メインなので注意(他の言語経験者想定)。
ここ2ヶ月で知ったと言いつつ、昔っから知ってた用語も含まれてるけど、そこは解説も兼ねてということで。
あと、サーバーサイドをメインでやってるのでクライアントも触れつつ基本そっち寄りです。

おいおい間違ってるよみたいなのあればコメント欄とかでツッコミくださいm(__)m

分野

クライアントサイドJavaScript
Webブラウザで動くJavaScriptのこと。一般の人がイメージするJavaScriptと言えばこれ。JavaScriptと言いつつ、HTMLやCSSの知識と混ざり合ってたり、DOMがあったり、真面目にやろうとすると覚えることたくさん。でも、結果が目に見えるのは楽しい。
サーバーサイドJavaScript
Webサーバー上で動くJavaScriptのこと。後述のNode.jsが実行環境として有名。同じJavaScriptとはいえ、こちらはプログラミング言語としてJavaScriptを採用しているのみで、クライアントサイドよりもむしろ他のサーバーサイドの言語の方が近い存在。
フロントエンド
HTML+CSS+JavaScriptを組み合わせた、ユーザーが触れる画面周りの領域。この分野を専門にやるフロントエンドエンジニアとかが居る。フロントエンドエンジニアの仕事にWebデザイン的な内容をどの程度含むのかはいまだによく分からない。
バックエンド
フロントエンドの後ろの、ユーザーから見えないDBやらの領域。でもあんま使わない?サーバーサイドの場合はサーバーサイドって言う事が多い。

言語

ECMAScript
JavaScriptの標準規格。この辺の名前の違いは歴史的経緯もあってなんだかすごいややこしくてよく分からないんだけど、今は規格の名称がECMAScript、ブラウザとかに実装されてるのがそれをベースにしたJavaScript、って理解でたぶんいいんだと思う。
なお、読みはエクマスクリプト。ずっとイーシーエムーエースクリプトって読んでた(--;
ECMAScript 5
ECMAScriptのちょっと前のバージョン。ちょっとと言いつつ2009年。なので、この仕様までは安全牌、どのブラウザでも対応してるので使ってオッケー。
ECMAScript 2015 (ECMAScript 6)
ECMAScriptの最新バージョン(2016年9月現在)。通称 ES2015 や ES6。
クラス構文や変数のスコープなどが追加されてて、大幅な改善が図られている。
なので、素のJavaScriptで書く場合は、この構文が使える環境か?というのが凄いポイント。
今から習うんなら、ES2015前提で行きたい。早く普及しろ。
TypeScript
Microsoftが開発した、改良版JavaScriptみたいな言語。型のある言語で、コンパイルしたソースはJavaScriptになる。この手の言語はたくさんあるけど、中でもTypeScriptは最近人気みたいで、かつECMAScriptの先行実装に近いらしい。
CoffeeScript
改良版JavaScriptみたいな言語その2。Ruby on Railsが標準採用しているとかで、そっち方面の人が良く使うみたい。
Dart
Googleが開発した、改良版JavaScriptみたいな言語その3。最近は下火?
UnityScript
ゲームエンジンのUnityのJavaScriptの通称。これはこれでまたクライアントサイドともサーバーサイドとも違う独自の世界っぽい。でもUnityだとC#使うのが定番らしい。

特徴

プロトタイプ
JavaScriptの重要な特徴。世の他の主要言語がみんなクラスベースなのに対して、JavaScriptは珍しいプロトタイプベースの言語である…プロトタイプって何よ?って話だが、正直理解しきれていないのだが、クラスの代わりにインスタンスがプロトタイプというものと紐づいていて、そこにメソッドとかが入っていてより動的に扱える、という感じで理解している。
でも、さすがに使い辛かったのか、前述の通りES2015からは普通のクラスも使えるようになった。万歳。
非同期プログラミング
他の言語からの移行者を悩ませるJavaScriptの特徴その2。JavaScriptは基本的にシングルスレッドで動作する言語で、かつ出自がクライアント側なので、時間のかかる処理は非同期(バックグラウンド)で処理するのが慣例になっている。これ自体はWindowsアプリなんかを書いたことある人ならまあ分かる話だろう。
が、ややこしいのはサーバーサイド。Node.jsのサーバーサイドJavaScriptは、言語自体はシングルスレッドのJavaScriptを持ってきただけなので、JavaやPHPみたいな他のサーバーサイドの言語とは異なり、マルチスレッドでもなければ複数プロセスで動いたりしない。ただひたすら1プロセスがシングルスレッドで動く。なのでサーバーサイドでも、後述するあれこれの手段を用いて非同期でプログラミングする必要がある。
正直、これは他の言語に比べてかなりややこしい。でも、そういう仕組みのおかげで、Node.jsは素晴らしいパフォーマンスを稼ぎだしているという。頑張るしかない。
関数
JavaScriptやってるとなんだかよくわからなくなるもの。一般的なプログラミング言語の関数としての用途に加え、定義が気軽に変数に入れて受け渡せて(これはまあ他でもあるけど)、関数のインスタンスが作れて(!?)、その中に別の関数が定義できてthisで変数やらにアクセスできて…と他の言語で言うクラスとかも混ざってるので、凄い悩ましいまさになんでもありな存在。
ES2015でこの辺の役割分担が進むと…いいなぁ。
undefined
みんなの憎しみを集めるnullに代わる新たな登場人物。未定義の変数を参照した場合に取れる値。nullは値が入っていないだが、undefinedは値が定義されていないを表す。PHPとかだとワーニングが出たりするが、JavaScriptだとundefinedが取れる。
なお obj.value みたいなので value が代入されてない分にはundefinedが返るだけだが、objも定義されてないとundefinedにはvalueはありませんみたいな意味不明なエラーが出て悩まさせられることになる。後、比較もなんか面倒な話があった気がする。死ね。

環境

Node.js
サーバーサイドJavaScriptのメジャーな実行環境。最初はフレームワーク的なものかと思ってたけど、どちらかというと言語それ自体にあたるものな感じ。他の言語で言う、JavaのTomcatとかPHPの実行環境とかみたいな。Node.js環境でしか使えないAPIもたくさんあって一つの世界を形成している。
npm
Node Package Managerの略で、その名の通りNode.jsのパッケージマネージャー。Node.js入れるといつの間にか入っている。サーバーサイドJavaScriptではデファクトスタンダードなので素直に使おう。node_modulesってディレクトリはこいつが作るディレクトリ。
package.json
npm用のパッケージ情報を扱うファイル。要するに、自分が作ったアプリの依存関係とかそういうのを記しとくファイル。npm用のscriptsとかも書けるので地味に便利。
Babel
JavaScriptのトランスコンパイラ。ES2015構文で書かれたJavaScriptを古い構文のみのソースに変換したりするためのもの。クライアントサイドだと古いブラウザのために新しい構文が使えないということがざらだが、これで古いバージョンにコンパイルして、コンパイルしたソースをデプロイするという手が使える。
browserify
JavaScriptを一つのファイルにまとめるツール。JavaScriptでも、後述のCommonJSのrequireとかES2015のimportとか他のソースを参照する仕組みが最近できたのだけど、ブラウザはまだ対応してないので、そういうのを解釈して1ファイルにまとめるというツール。babelとセットで使うのがメインだと思われ。また、こいつでクライアントでNode.jsのAPIを使うこともできる。
Bower
npmのクライアントサイド版らしいパッケージマネージャー。結局使ってないので詳細不明。npm+browserifyだと駄目なのかな…???
Chrome V8
ChromeやらNode.jsやらで使われてるJavaScriptの実行エンジンらしい。と言っても普段は意識することないけど。ES2015どの程度対応してるんだっけ?とか調べたりするときに目にしたりする。EdgeとかFirefoxも独自のエンジン積んでるけどあんま名前聞かない。
MEAN
MongoDB, Express, AngularJS, Node.jsの略で、LAMPみたいな用語。こいつら組み合わせると全部JavaScriptになるよってことで提案されてるらしい。でも、RDBじゃないMongoDBをデフォルトにするのはなんか抵抗あってMySQL (MariaDB) 使ってる。

テクニック

alert()
クライアントサイドのJavaScriptでダイアログを出すための関数。一昔前はデバッグとかでよくお世話になりました。今は後述のデベロッパーツールがあるのでまず使わない。
console.log()
JavaScriptのデバッグでとってもお世話になる関数。クライアントサイドでもデベロッパーツールでログが見れて便利。
callback
後で実行してもらうためのパラメータ。JavaScriptでよく使われる非同期処理のための仕組み。非同期関数を実行するとき、そのcallback用の引数に別の関数を渡して、非同期関数が終わったときにその関数を実行してもらうというもの。他の言語でもあるにはあるけど、JavaScriptだと凄い多い。でも最近は後述のPromiseに移行しつつある。
即時実行関数式 (IIFE)
スコープが無かったJavaScriptで、スコープを実現するために考え出されたテクニック。名前自体はあんま目にしないけど、こういう文は割と見かけると思う。それがこれ。
(function() {
var i;
for (i = 0; i < 10; i++) {
console.log(i);
}
})();
これすると、変数定義とかが外のスコープに混ざらないのでGood。ES2015だとスコープもモジュールもあるので、あんま使う機会はなくなった。
クロージャ
入れ子の関数が自分の親のところに定義されてる変数とかを参照できるという概念?自分の場合、他の言語でも日常的に使ってたのであんま意識してなかったけど、JavaScriptでは言語の機能不足もあり非常によく使われている。公開したくない関数や変数を関数内で宣言して、戻り値でそれを参照するためのクロージャを返すとか。よく考えるとこの変数はどこに保存されているんだろうとか、ちゃんとGCされるんだろうかとか怖い。
bind
JavaScriptやり始めて一度はハマるのがthisの問題。ES5構文で入れ子でクラスのメソッドのつもりで関数を書くと、そのthisが子の関数のthisになってしまい、親を参照できなくなる。また、callbackとかでクラスのメソッドを渡すと、thisが参照できなくなり予期しない動作になってしまう。
まあ前者はES2015のアロー関数式使えば解決するんだけど、後者は解決しない。そんなときに使われるのがbind。bindを使うことで関数に任意のthisを指定できる…thisってなんだって感じだが、とにかく指定できる。
その他にもいろいろ使い道はあるらしいが、俺はそれ以外の用途で使ったことはない。

API

CommonJS
JavaScriptのライブラリとかの規格の一つで、サーバーサイドとかで共通のAPIとかを定めましょうというものらしい。主にモジュール周りとかの話で出てくる。でも、一時期脚光を浴びたものの、現在ではES2015に同じような機能が入ったりで過去の存在になりつつあるらしい。
Promise
JavaScriptの非同期処理のためのAPIの一つ。Promiseのインスタンスを用いてメソッドチェーンみたいな感じで処理を繋いでいくもの。元々は似たような仕組みが各地で車輪の再発名されてたのが、ES2015でめでたく標準規格になったそうな。現在非同期処理書くならこれ?
DOM
Document Object Modelの略で、HTMLやXMLやらを操作するためのAPI。JavaScriptではないんだけど、クライアントサイドではほとんどJavaScriptの一部のように扱われる。結構ややこしいので、生のDOMを使うより後述のjQueryとかを使うのが吉。
XmlHttpRequest
クライアントサイドのJavaScriptで通信するためのAPI。XMLって名前だけど、今じゃ別にXMLに限らない。これを直接使うことはもうあんまないけど、たまに名前は…なんか通信エラーが起きたときとかに見る。。。

ライブラリ

Underscore.js
便利ライブラリ。_.xx() みたいなコードがあったらこれ。でも、forEach() とかES2015で標準化された構文が多いっぽいので、最新の環境なら不要かも?
async
非同期って名前のとおりの非同期処理ライブラリ。Promiseが出来る前の時代のもの?今となっては不要な気がするが、でも仕事ではまだ使ってる。。。
request
HTTPリクエストとかの処理をまとめたライブラリ。Node.jsの標準APIが使いにくいので、サーバー間通信とかはこの辺使わないと面倒くさい。Promise版もある。

クライアントサイドライブラリ

jQuery
超有名なJavaScriptライブラリ。$.xx() みたいなコードがあったらそれ。クライアント側では、フレームワーク使わない場合はほぼ100%使われるんじゃないかと思う。

サーバーサイドライブラリ

Passport
認証ライブラリ。後述のExpressに組み込める。自前で考えるぐらいなら使っとくの推奨的な感じ。
Log4js
Log4jのJavaScript版。ログライブラリもいろいろあるみたいだけど、他の言語で慣れてたので。
node-bunyan
Express純正のログライブラリ。なんかパッとしなかったので置き換えた。
node-config
yamlとかjsonとかのconfigファイルを扱うためのライブラリ。便利。
bluebird
一昔前のPromiseライブラリ?全メソッドをラップしてPromise化とか出来たりするみたいで、なんか使われてたりする。

フレームワーク

Express
Node.jsのサーバーサイドではデファクトスタンダードらしいフレームワーク。ルーティングとか基礎的な仕組みだけを提供する薄めのもの。詳しくは前々回の記事参照で。
AngularJS
クライアントサイドのフルスタックフレームワーク。これ一つで豊富な機能を提供する。ただ、現行のバージョン1.x系と開発中の2.x系はごっそり違うらしいので注意が必要。詳しくは前々回の(ry
Bootstrap
超有名なCSSフレームワーク。JavaScriptメインと言いつつあれだけど組み合わせることが多いので載せとく。あんまり考えないでも、今風っぽいWebページが作れるのでGood。
Sequelize
サーバーサイド用のORMフレームワーク。種類がないので大体これ使うしかなさげ。詳しくは前々(ry

AngularJS 1用モジュール

ngStorage
AngularJSでHTML5のローカルストレージを扱うためのモジュール。
ng-file-upload
AngularJSでHTML5のFile APIを使ったアップロードを行うためのモジュール。
UI Bootstrap
AngularJSとbootstrapを連携させるモジュール。
angular-translate
AngularJSでローカライズを行うためのモジュール。

開発環境

WebStorm
JavaScriptに対応した統合IDE。一番優秀らしいが有償なので使ったことはない。
Eclipse IDE for JavaScript Web Developers
統合IDEのEclipseのJavaScript開発用パッケージ。ES2015構文対応なものの、インテリセンスは利かないわ、参照元にも飛べないわ、、、けど慣れで使ってる。
Node.js Tools for Visual Studio
略称NTVS。Visual StudioでNode.js開発をするパッケージ。意外と優秀という噂?今度触ってみる。
Atom
GitHubが出してるプログラミングエディター。昔使ったけど、個人的にはIDEが好きなので使ってない。
デベロッパーツール
最近のブラウザだと大概ついている奴。F12とか押すと出てくる。これを使うと、JavaScriptのconsoleが見れたり、ステップ実行出来たり、通信時間やアクセス先URLが分かったりと、クライアントサイドの開発では欠かせない。自分は普段はChromeのを使っている。

各種ツール

pm2
Node.js用のプロセスマネージャー。Node.jsは実行環境でありその上のアプリは自分自身がアプリケーションサーバーとして動くのだが、なのでアプリが例外で死ぬとサーバー自体が死ぬ(怖 それを自動的に再起動したりするソフト。いろいろあるらしいけど、お勧めされたので。
Mocha
JavaScriptのユニットテストツール。JUnitとかとは異なり、assert文を提供するライブラリは含まれていないので、別のライブラリと組み合わせて用いる。
Chai
その組み合わせるassertライブラリ。構文の種類が豊富?
power-assert
その組み合わせるassertライブラリ2。構文の種類少な目だけど情報多し?
Istanbul
カバレッジツール。名前は聞くけどまだ使ったことはない。
JSDoc
JavadocとかphpdocとかのJavaScript版。でも、JavaScriptは関数の定義の仕方とか入れ子とかがややこしいので、割と書き方に悩む。
ESLint
静的解析ツール。タブやらスペースやらのスタイルチェック的なことから、使ってない変数の洗いだしとかまでいろいろやってくれる。他にもいろいろあるらしい。
JSHint
他の静的解析ツール。解析内容は似た感じ?詳しくは不明。
gulp
Node.jsで動くタスクランナーらしい。他の言語でいうAntとかみたいな奴?名前はよく見かけるけど使ってないので不明。

関連技術用語

JSON
JavaScript Object Notationの略で、JavaScriptのオブジェクト構文をもとにしたデータフォーマット。というか、今じゃJavaScript関係なく目にすることが多いと思う。でもJavaScript触りつつみると、あーこれが元になってんのかーとか思う。
WebAPI
Webで公開されてるAPIのこと。作ったりアクセスしたり。
REST
Representational State Transferの略で、シンプルなWebAPIを設計するためのお約束。JavaScriptのサーバーサイドだと、シンプルなことも多いだろうし意識した方がよさげ。クライアントな人でも、API使うときに知ってれば想像がつきやすい。
クロスドメイン通信
クライアントサイドJavaScriptでみんな一回ぐらいは引っかかるだろうやつ。他のドメインに対するアクセスはサーバー側のヘッダーがそれように設定されてないと拒否られたり、セキュリティの制限であれこれ引っかかったり…と悩まさせられる。
SPA
シングルページアプリケーションの略で、昔ながらのページ遷移するWebページじゃなくて、1ページでJavaScriptで何でも書き換えるアプリのこと。最近の流行?
サイ本
オライリーのJavaScript本のこと。JavaScriptの本としては一番有名っぽい。買った。
言語仕様的な話が非常に丁寧で、基礎からきっちり学びたい自分みたいなタイプには適していた。
でも2012年の本なのでちょい古く、ES5までしか対応してない。かつ今となってはバッドノウハウと化しつつあるその時代のテクニック(プロトタイプを弄って頑張って継承クラスを作るとか)が結構多めなので、分厚さの割に今更学ぶ必要ないとこも多い気がする。

以上こんなとこ。うん、ちょっと軽くアプリ作っただけで、出てきた用語多すぎやせんかねぇ(汗
JavaScript自体は手軽なのに、なんか手軽ではない(><
スポンサーサイト

Tag: JavaScript

0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。