プログラミングスクールでJavaScriptを学ぶときに考えたいリンターのこと
プログラミングスクールで人気のJavaScriptは簡単なようでいて、深い洞窟のような性格をもった言語です。
最低限の環境であればメモ帳とブラウザでも書けるのですが、やがてそうした開発方法では様々な理由によって破綻するでしょう。
そんなときに便利なのが「リンター（Linter）」という機能。
今回はこのあたりをチェックしていきましょう。
C言語から生まれた構文チェッカー
リンターというのはプログラムの一種で、簡単に言えば「厳密な構文チェッカー」と言うことができます。
元々リンターは1978年にC言語用のものとして誕生したツールです。
現在では様々なプログラム言語で使われるようになっています。
名前の由来となった「lint」はヒツジからとれる羊毛に相応しく無い「糸くず」を意味している形です。
綺麗なコードを羊毛に見立て、そこにくっついているあるべきではないコードを糸くずと考えているのかもしれません。
また、リンターはあくまでも厳密な構文チェッカーであり、必要不可欠なツールというわけではなかったりします。
C言語などのコードにおける基本的なチェックはコンパイルで行われるものです。
具体的にリンターでは以下のようなことをチェックしています。
●宣言されているのに使われていない変数・関数が戻り値を返すケースと返さないケースが混同・初期化されていない変数を参照してしまうまず宣言されているのにその変数が使われてない場合、その変数が存在する意味はありません。
特にその変数が存在していても何か問題が起こることはまずありませんが、構文上は無い方が望ましいといえるでしょう。
そのためリンターによって警告が出されます。
その他の例は厳密な構文チェックというよりは当たり前のように修正したい要素といえるでしょう。
戻り値を宣言しているのに戻り値の無い関数は適切ではありませんし、初期化されていない変数を参照するのは危ない事です。
ただ現在ではあまりリンターに触れる機会は少ないかもしれません。
なぜならこうしたリンターの役割はもうコンパイラがやってくれているからです。
プログラムを書いていれば警告をいくつか目にすることになるものですが、それらはコンパイラがリンターの役目を担っている証拠ともいえるでしょう。
ただこの話、PHPやJavaScriptといった世界では事情が異なります。
構文チェックが存在しない言語
Cを始めとして、JavaやC#などはコードをコンパイルして実行ファイルを作成するという流れになります。
そこに確固たるコードという存在と、それを解析してできる実行ファイルに分けられているのです。
そのため、コードに対して構文チェックをすることが当たり前のようにできます。
ですがPHPやJavaScriptなどは、コードを直接実行するタイプの言語となります。
丁度コードと実行ファイルが密接に繋がっているような形なので、実行するまで何が起こるかは分かりません。
つまるところ実行していない状態ではチェックも何もできないのです。
この特性の違いを示す言葉に「静的型付け」と「動的型付け」というものがあります。
静的型付けとは実行する前に既に変数の型が決まっているという仕組みを指す形です。
動的型付けとは実行時に変数の型が決まるという仕組みを表しています。
こうして見ると動的型付けな言語は不便なように思われるかもしれませんが、非常に柔軟であるという利点も併せ持っていたりします。
いちいち厳密に型を指定せずにプログラムを書いていけるので、長い記述が必要な処理を書くときには便利だったりするのです。
ただその利便性が柔軟すぎて色んなところでエラーの原因となるのも事実。
動的型付けは暴れ馬な特性ともいえるでしょう。
では動的型付け言語では構文チェックができないのかというと、実はそうでもなかったりします。
確かに言語の仕様上は不可能なのですが、外部ツールを使えばできるのです。
そしてその外部ツールこそがリンターとなります。
様々なJavaScriptのリンター
本来動的型付けの言語では構文チェックをすることはできないのですが、リンターを使えばできるのです。
標準では構文チェック機能を有していない言語でもこうした構文チェックができるのはありがたいこと。
リンターは動的型付けな言語の文脈では静的解析を行うツールなどと呼ばれていたりします。
JavaScript用のリンターの種類としては以下の3種類が有名です。
●JSLint：歴史の長いJavaScript用のリンター、最もベーシック・JSHint：JSLintの厳しすぎる構文チェックを緩和したバージョン・ESLint：独自のルールを追加できるカスタマイズ性のある最もホットなリンター今からJavaScriptのリンターを使う場合はESLintをおすすめします。
何しろ流行していますし、ノウハウも多く集積されてきているのでエラー時の対応も直ぐに見つかるはずです。
また、これらのリンターはそのほとんどがエディタの拡張機能から追加するような形となっています。
ただこの適用作業が一筋縄ではいかず、最初は苦労することになるでしょう。
Visual Studio CodeにESLintを導入
最近話題のエディターであるVisual Studio CodeにESLintを導入するには以下のようにします。
1：node.jsをインストール2：npmをインストール3：npm上でESLintをインストール3：npmとESLintの初期化4：ESLint拡張機能をエディタ上でインストール大まかに言うとこのような流れとなるのですが、インストールの仕方がコンソール上でのコマンド入力となるものがいくつかあるので注意が必要です。
初めてこうした作業を行うと戸惑うかもしれませんが、興味があったらチャレンジしてみて下さい。
デフォルトでESLintを搭載しているBrackets
HTTP・CSS・JavaScriptに特化したエディタにBracketsというものがあります。
このBracketsにはデフォルトでESLintが搭載されているので簡単に使う事ができたりするのです。
使い方はただメニューバーの「表示」から「保存時にファイルを Lint チェック」にチェックを入れておけば使えるようになります。
構文チェックのある快適な世界
リンターを使えば例えば大括弧の付け忘れや試しに用意した変数の消し忘れなどがきちんとチェックされます。
それこそ静的型付けな言語を使っているような気分でコードを書いていくことができるでしょう。
ちょっとした間違いも直ぐに警告してくれるので目視で間違いを探さなくて済みます。
設定ファイルを覗いてみよう
リンターの設定は設定ファイルで行われています。
これはリンターの種類やエディターによって多少変わるのですが、基本的には対応したjsonファイルやjsファイルに記述されているはず。
そこにはずらっとリンターの設定が書き込まれているものです。
どんな設定でリンターが動作しているのか一度確認しておくと良いでしょう。
リンターの知識は共同作業で光る
プログラミングスクールではリンターについてあまり触れないかもしれないのできちんと尋ねておくことをおすすめします。
リンターは共通のルールで複数人が作業するという仕事現場において非常に役立つツールだからです。
もしリンターについて知らないまま仕事をするようになった場合、戸惑うことは間違いないので担当となる講師の方に分からないことを聞いておきましょう。
まとめ
JavaScriptの開発には欠かせないリンターについてみてきました。
動的型付けな言語であるJavaScriptにリンターを導入すると非常に開発しやすくなるので、開発に慣れてきたら導入しておくと良いでしょう。
初学者の場合はリンター由来のエラーにも悩まされることになるので、学び始めは触れなくても良いかもしれません。
開発の規模が大きくなればなるほどリンターの役割が重要になってきます。
プログラミングスクールへ通う場合はJavaScriptのみならずリンターの使い方についても学んでおきましょう。