Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

JavaScriptのコード補完できていますか?

こんにちは.JavaScriptにハマっている maxmellon です.

この記事では,javascriptをちょっと楽に書けるようになる、Ternを紹介したいと思います.Ternは,javascriptのコードをIDEのように補完するツールです.

この記事を読まれている方も,それぞれ好きなエディタがあるでしょう.

私は,普段は Vim を利用しています.

補完から連想されるイメージは,それぞれエディタ別のプラグインを想像しがちですが, 今日は,EmacsもVimもsublimeもAtomも仲良くなれるような画期的なツールを紹介します.

補完とはなにか,補完があると何が嬉しいか

よく補完と総称されるものは,オートコンプリートや入力補完のことを指しています.

入力補完があって嬉しいことはたくさんあります. その中でも個人的に特に嬉しいものを挙げます.

  • スペルミスがなくなる
  • 入力する文字を減らすことができる
  • 別ファイルのメソッドや属性を確認する必要性がなくなる

EclipseやVisualStudioといったIDEには,文脈を考慮した強力な補完が,標準で搭載されています.

IDEの利用者が多い理由の一つにも補完があると思います. // もちろん,リファクタや単体テストなどの機能でIDEを選択している人もいる

なんと,その便利な補完機能を,JavaScriptのコードに対しても自分の好きなエディタに搭載する方法ががあるのです.

それを実現するのに利用するツールが "Tern" です.

JavaScriptを静的に解析する "Tern"

github

github.com

homepage

http://ternjs.net/

Ternは,JavaScriptの言語に対して静的に解析を行ってくれます. それをエディタの補完機能から扱いやすくするためのAPIを提供しています.

Ternに対応しているエディタは,

  • Emacs
  • Vim
  • SublimeText
  • Atom

  • and more...

です.ホームページには記載されていませんがAtomも利用可能です. 今回は,数あるエディタからAtomの導入例を挙げたいと思います.

Vim を選択しなかった理由は,Vimを贔屓したくないのと,Vimの導入手順は

qiita.com

に記載したためです.

余談ですが,Atomはこの記事を書くまで,利用したことはありませんが, いつか使ってみたいと思っていたので,この記事の執筆をきっかけにダウンロードしました.

導入手順・方法

Mac を使ってるのでbrew使ってCaskroomからAtomを落とします.

もしWindowsを使っているのであれば,公式サイトからzipをダウンロードして アイコンをダブルクリックしAtomを起動します.

$ brew cask install atom

Atom を導入した際に,apm (Atom package manager) コマンドも入るので, このコマンドを用いて,packageをインストールします.

// npm の Atom 版 使い方も結構似てるから覚えることも少なくてイイね

$ apm install atom-ternjs

もし,Windowsを使っているのであれば,Atomを起動し,File > Settings をクリックしてください. // Mac でもこのインストールの仕方ができる

テキストボックスに,atom-ternjs と入力し,Install ボタンを押すことでインストールすることができます.

// uninstall のあたりに青いinstallボタンが出現する

Pluginのインストール が完了したら,Atomを立ち上げる.Atomの中からインストールした場合は,再起動する brew を通してインストールした場合,PATHが通ってるので,

$ atom で Atomを起動することができる.

PATHが通っていない場合は,アイコンをダブルクリックして起動してください.

デモ

consoledocument はもちろん当たり前のように, 本当にすごいのは,

自作クラスが補完できる!!!

さらに,require() で読み込んだモジュールの保管もできます

lodash, ramda.js は少し重かった.規模が大きい物は少し重くなってしまう

かなりすごいですよこれ!初めてAtom使ったんですけどめっちゃ感動しました.

jsdocをちゃんと書けば,補完時に見ることができる.これはVim版もできますが何より見た目が良い.

大きいなと感じたのは,

More... をクリックするとMDNのドキュメントを開いてくれる!

これは,JavaScriptの開発がはかどりますね!

// 私は,Ternは利用したことがあり,Atomは初めての利用だったので,Atomに驚いた点のほうが多かったです

インストールが非常に簡単な点や,設定の必要が殆ど無い,保管が強力,ドキュメントにすぐに飛べるなどを考慮すると.

javascriptに慣れていない人にもオススメできますね!

これを機会に,Atomでjavascriptの開発を始めてみるのはいかがでしょうか?

設定例

atom-ternjsの場合,設定ファイルを勝手に作ってくれますが,他のエディタでternを利用する際には,プロジェクトルート(package.jsonがある場所)に,.tern-project という設定ファイル(10~20行程度)を作る必要があります.

設定ファイルがなくてもある程度の補完が可能.

他のエディタでternを利用される方のために,汎用的な .tern-project の例を貼っておきます. (日本のternユーザーが少ないのかほとんどググってもヒットしなかったので)

{
  "ecmaVersion": 6,
  "libs": [
    "browser",
    "jquery"
  ],
  "loadEagerly": [
    "app/**/*.js"
  ],
  "dontLoad": [
    "bundle/**/*.js"
  ],
  "plugins": {
    "requirejs": {},
    "node": {},
    "modules": {},
    "es_modules": {}
  }
}

大体見たとおりです.変更する必要が出てくるのは,プロジェクトごとの ディレクトリ構造に影響する, loadEagerlydontLoad です. それ以外は基本的に同じで大丈夫です.

loadEagerly には,これから編集するソースコードを指定してください.

dontLoad には,webpack や browserify 済みのものを指定してください.

読み込むと固まる可能性があります.注意してください.

まとめ

Ternを導入することで,JavaScriptのことを曖昧にしか覚えていなくても,

補完機能を使えば,スペルミスを防げ コードのことを曖昧にしか覚えていなくても, インスタンスからメソッドや属性を参照しようとしたとき,. を タイプした時点で そのインスタンスが持っているメソッド,属性一覧が表示されるのでとても便利.

AtomとTernの組み合わせは,Windowsユーザーでも難解なキーバインドを覚えることなく, テキスト編集ができ,ドキュメントも即座に確認できるので, JavaScript初学者に特におすすめできるのと思います.

おわりに

JavaScriptにかぎらず,プログラムを開発する環境はとても重要だと私は考えます.

テニス部が,ラケットやボール,シューズにこだわるように,

エンジニアもシェルの設定とエディタの設定にはこだわるべき

というのが持論です.

今一度,開発環境を見なおして,作業が少しでも短くできる環境を構築してみてはいかがでしょうか?

参考サイト

qiita.com