連載のはじめに

みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎⁠」⁠ の連載を担当させていただく本橋佑介です。

本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。

現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。

第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。

JavaScript

JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。

また、今ではNode.jsをサーバサイドで利用することが増え、さらにAltJSの台頭により以前より生のJavaScriptに触れる機会が減って来ています。

この中で、今一度JavaScriptの基本について再確認したいと思います。

JavaScriptのコーディング規約

JavaScriptを開発する際にチームでの記法を合わせるための規約設定は最初に行われるべきです。

個人で開発するする際でも記法がブレるとリファクタリングや読み直しが面倒です。

世の中には正しい書き方として色々なものが提示されています

• googleが提唱しているGoogle JavaScript Style Guide
• GitHub上で強く支持されているAirbnb JavaScript Style Guide
• 他にもNode.js style guideやjQuery JavaScript Style Guideなど

その中で、実際のプログラマの意見としてこんなものがあります。

1. JsHintを導入（JsLintは厳しすぎるのでJsHintくらいがちょうどよい）
2. "use strict"厳格モードで記述する

補足ですが、文法のチェックが厳格すぎ作者の流儀を多分に取り込んだJSLintをフォークして作られたのがJSHintであり、JSLintより柔軟なオプション設定が存在します。

• 例) 中括弧でブロックされているか、 ==ではなく ===を使用しているか、など

• 参考：https://teratail.com/questions/5924

thisの使い分けができていますか？

JavaScriptのthisは呼び出し元によって意味が変わります。

1. グローバルオブジェクトとしてのthis
2. コンストラクタ内のthis
3. メソッドに所属しているthis
4. apply,callから変えられるthis

簡単に分類すると上のようになります。

ここで以下の質問を見てみましょう。

JavaScriptにおけるthisの振る舞いがわかりません。

やりたいこと

下のコードでresizeTouphone.ratio.wを正常に出力したい

現在のコードでresizeToiphone.ratio.wを出力するとundefinedになってしまいます。

var resizeToiphone = {
  wWidth  : document.documentElement.clientWidth,
  wHeight : document.documentElement.clientHeight,
  iWidth  : 320,
  iHeight : 568,
  ratio   : {
    w : this.iWidth/this.wWidth,
    h : this.iHeight/this.wHeight
  }
}

ここでのthisはwindowオブジェクトを指すため、１のグローバルオブジェクトとしてのthisになります。

そのため iWidthやwWidthと行ったプロパティがUndefinedとなり、正しく取得出来ません。

var resizeToiphone = {
  wWidth  : document.documentElement.clientWidth,
  wHeight : document.documentElement.clientHeight,
  iWidth  : 320,
  iHeight : 568,
  ratio   : function () {
    return {
      w : this.iWidth/this.wWidth,
      h : this.iHeight/this.wHeight
    };
  }
};

他にもコンストラクタ内のthisとして扱う方法もありますが、

シンプルに行うのは上記でしょう。

• 参考：https://teratail.com/questions/5093

イベントハンドラーとイベントリスナーの違いをご存じですか？

JavaScriptでボタンのクリックなどのイベントに応じて処理を追加する際に、イベントハンドラーやイベントリスナーを利用します。

なんとなく、onclickと記述した処理をイベントハンドラー、addEventListenerとした処理をイベントリスナーと使い分けてはないでしょうか。

まずイベントとは、ブラウザ上などで発生したアクション全般を指します。

よく利用される click、 changeイベントなどの他に印刷を検知する beforeprint、通信のオンオフによって発生する online/offlineイベントなど様々なものが与えられています。

他にもよく使われるものでこのようなものがあります。

イベンハンドラーとイベントリスナーについては参考文献により、説明の関係上2つの言葉を処理の仕方が違うだけで同じ意味として扱うものもあります。

w3cでは、イベントハンドラーはイベントを捕捉し処理する関数であり、イベントリスナーはそのハンドラ関数を処理する仕組みです。と記述されてます。

実際にエンジニアは以下の様な概念での使い分けをしています。

• イベントハンドラー：イベントに対して紐付けられる処理
• イベントリスナー：イベントにイベントハンドラを紐付ける仕組み

• 参考：https://teratail.com/questions/4024

AltJSは何を使えばいい？

AltJSとは

様々な記法のあるJavaScriptの代替プログラミング言語で、コンパイルしてJavaScriptを生成するプログラミング言語の総称です。

なぜAltJSが必要なのでしょうか？

JavaScriptは言語仕様が柔軟すぎ、記述する人や使用するライブラリによってコーディングスタイルが大きく変わってしまいます。

そのため、保守性が低下し学習コストも上がってしまっているのが現状です。

それらを回避するために、ルールのしっかりした代替プログラミング言語で開発をし、JavaScriptは生成しようというのがAltJSを利用する理由です。

自分のスキルや、チームに併せて選択しましょう。

最後に

本稿では、JavaScriptの言葉の定義について現場エンジニアの見解を含め解説しました。

JavaScriptは進化の歴史上、曖昧な形や柔軟さを求められてきたため人によって解釈の違いが生まれるような形になっています。

その中で、様々な機関が制定してるスタンダートだけでなく、実務で利用している方の見解を紹介することにより再理解が進めば幸いです。