JavaScript中級者への道【序】
さらっと前書き
入社1年半、悟り世代のmatsubyです。研修では半年間Javaを触っていました。
今の案件では構成管理(Git)とプログラム保守(PHP)を主に担当しています。
余暇では、あまり業務では担当することの少ないJavaScriptを勉強しています。
本稿では、クラスベースの言語しか触ったことのない人の視点から
JavaScriptを勉強する理由、長所や言語仕様に対する不満についてざっくり論じます。
次回以降にJavaScriptの中級者となる上で欠かせないであろう知識・概念について
説明することを予定しており、本稿では技術的な話はメインで触れません。
JavaScriptを勉強する理由
- Webアプリケーションではフロントエンドで必然的に使わざるをえないこと
- Node.jsなど、サーバーサイドでも活躍する機会が出てきたこと
- プロトタイプベースの言語であり、プログラミングスタイルとして幅が広がること
自分の中で食いっぱぐれが無さそうな言語だと睨んでいます。GitHubでも人気があるらしい。
ただ、活動が活発であるが故に、情報の最先端に追いつくのが大変そうな印象を受けます。
JavaScriptの良いところ
- 基本的な文法が簡単であること
- ブラウザとエディターがあればすぐに動かして試せること
- 即席でオブジェクトが作れること
- 関数もオブジェクトの1種であり、引数として渡せること
- 書籍やWebでの情報が充実していること
「3. 即席でオブジェクトが作れること」についてちょこっと取り上げてみると、
xという名前で値が1であるプロパティを持つオブジェクトを作ろうとした場合に
JavaとJavaScriptでどのように異なるかをコードで示してみます。
// あらかじめ"x"というプロパティを持つクラスを定義しておく
public class HasX {
private int x;
public HasX(int x) {
this.x = x;
}
}
public class Main {
public static void main(String args[]) {
// 先に用意しておいたクラスをnewすることで、初めて目的のオブジェクトが作れる
HasX hasX = new HasX(1);
}
}
// オブジェクトを意味する"{}"にKeyとValueをセットするだけ！1行で書けた！
var hasX = { x: 1 };
// 先にオブジェクトの箱だけ用意して、後からプロパティを追加することも可能
var hasY = {};
hasY.y = 2;
どちらが楽かは一目瞭然ですね。
関数の引数としてオプションを持ったオブジェクトを渡す時などに非常に便利です。
ちなみにクラスベースと同じような書き方もあり、こちらの場合はあまり差異はありません。
function HasX(x){
this.x = x;
}
var hasX = new HasX(1);
JavaScriptへの不満
- privateやpublicといったアクセス修飾子がないこと
- extendsやimplements(interface)といった継承・実装キーワードがないこと
- 名前空間がサポートされていないこと
- 処理系(ブラウザ)によって動作が違うといったことが日常茶飯事なこと
-
JQuery以外のデファクトスタンダードといえるフレームワークの不在→(※jQueryはライブラリとのこと)
1～3で挙げたように、JavaScriptの言語仕様に対する不足感は否めません。
また、ブロックスコープが無いため、グローバル汚染に気をを付けないと大変なことに…。
しかし、言語仕様の不足に関する諸問題は、大半がコーディング技術で補えるものです。
皆同じような壁にぶつかるのか、Google先生に聞けば大抵のことは教えてくれるはず。
IEとかいうポンコツは見なかったことにしましょう。心の健康の為に。
JavaScriptのつまづきやすそうなところ
- 関数はオブジェクトの一種
- 4種類のthis
- 関数スコープ
- 非同期関数
- コールバック関数
- クロージャ
- プロトタイプ継承
最後に、本題となる「JavaScript中級者への道」において必要となる知識の中で、
自分が実際につまづいた or つまづきそうだなと思った箇所について列挙してみました。
何を持って中級者かというと、微妙な感覚値になるのですが、
自分の中では「JavaSctiptでOOPが出来る」ことだと考えています。
また、JavaScriptでは非同期処理が珍しくないので、こちらも覚える必要があるでしょう。
次回以降の投稿では、これらの話題について取り上げていきたいと思います。
目指せ！脱・初心者！