理系ジン

しばらくPythonに力を入れる予定です。

node.jsとAtomの設定

Atom node.js

はじめに

（HTML5アプリ開発ツール（Atom/Chrome/Firefox/CDE） - 理系ジンのアップデート・追記です。）

理系ジンが、HTML5アプリの開発に利用する予定のnode.jsとAtomの設定の紹介をします。

より詳しくは、node.jsを使ったプログラミングではなく、node.jsと一緒にインストールされるnpmコマンドを利用してインストールできるツール類と、Atomのパッケージの紹介になります。HTML5アプリの開発は色々なツールを組み合わせて行われることが多く変化が激しいですが、現時点での一つの方法として参考にしてください。

理系ジンは、npmを使わないつもりでしたが、意外に手軽だったので利用することにしました。

今回の記事は、Macでのみ動作確認しています。Windowsでは動作しないパッケージがあるかも知れません。

注意

MacでXcodeがインストールされていなかったり、Xcodeを一度も起動したことが無くて利用契約にOKしていない場合は、npmやAtomでパッケージがインストールできなかったと思います。App StoreからXcodeを入手して一度起動しておいてください。

node.jsのインストール

node.jsとそのパッケージを管理するnpmは、node.jsをインストールすると一緒にインストールされます。Webサイトの[INSTALL]ボタンから問題なくインストールできると思います。

また、node.jsやnpmは、Atomとも一緒にインストールされます。つまり、Atomをインストールしていれば、node.jsを別にインストールする必要はありません。

Atomをインストールすると、Atomのパッケージ管理などをするapmコマンドを利用できるようになります。ターミナルから次のように入力するとバージョンが表示されます。

$ apm -v
apm  0.109.0
npm  1.4.4
node 0.10.32
python 2.7.6
git 1.8.4

ファイルとしては（apm, npm, node）それぞれ/usr/local/lib/node_modules/以下にインストールされ/usr/local/bin/以下の対応するものからリンクを張っているようです。

経験上、npmはアップデートに失敗した場合などに消えてしまうことがあります。その場合は、node.jsを再インストールするか、Atomのメニューの[Atom]>[Install Shell Commands]でインストールすればいいと思います。

npmの初歩

npmでのパッケージの見つけ方、グローバルなインストール方法を説明します。

npmでのパッケージの見つけ方

npmのWebサイトの上部の[Search Packages]に使いたいパッケージ名などを入力して検索して目的のパッケージを見つけます。

Webサイトの[Most Starred]には、人気のあるパッケージが紹介されています。

npmパッケージのグローバルなインストール方法

次のようにして、パッケージをグローバルにインストールします。

$ npm install -g パッケージ名

ここで、-gオプションを付けないとカレントディレクトリにインストールされるはずです。理系ジンは、常に-gオプションを付けてグローバルにインストールします。

グローバルにインストールすると、/usr/local/lib/node_modules/以下にパッケージがインストールされ、/usr/local/bin/以下からパッケージに対応するリンクが張られます。

上記のinstallをupdate、uninstall、infoにすると、それぞれアップデート、アンインストール、情報の表示ができます。処理に失敗するとパッケージが消えることがあります。その場合は、インストールしなおしてください。

また、$ npm list -gにより、インストールされているパッケージのリストが表示されます。

おすすめnpmパッケージ

理系ジンが使ってみて良いと思ったnpmパッケージを紹介します。

jshintパッケージ

AtomのLinter Jshintパッケージから利用するために、jshintパッケージをインストールして、JSHintをインストールします。

JSHintはJavaScriptプログラムの問題点を表示してくれます。JSHintのWebサイト上で試しに使ってみることができます（表示されているソースを色々書き換えてみてください）。

インストール
$ npm install -g jshint
確認
$ which jshint
/usr/local/bin/jshint

色々設定ができるようですが、理系ジンはそのまま使うのでデフォルトのままにします。

jsdocパッケージ

JSDoc 3は、JavaScriptのコメントからドキュメントを生成してくれるツールです。JavaのJavadocと同様のものです。

jsdocパッケージをインストールすると、JSDoc 3がインストールされます。

インストール
$ npm install -g jsdoc
使い方（Use JSDoc: Getting Started with JSDoc 3より）

次のようなファイルを作ります。

~/Desktop/rikeizine/book.js

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}

次のようにコマンド入力します。

$ cd Desktop/rikeizine/
$ jsdoc book.js

カレントディレクトリにoutディレクトリが作られ、次のようなファイルやディレクトリが生成されます。

Book.html, book.js.html, index.html, scriptsディレクトリ, stylesディレクトリ

Book.htmlは次のようなものです。 f:id:rikeizine:20141104131835p:plain

かなり役に立ちそうです。

http-serverパッケージ

HTML5アプリ開発ツール（Atom/Chrome/Firefox/CDE） - 理系ジンでは、CDE（Chrome Dev Editor）による、簡易サーバーでのアプリ起動を紹介しました。

http-serverパッケージを使えば、ターミナルから簡易サーバーを起動できます。

ちなみに、Atomで簡易サーバーを起動できるパッケージを３つ試してみましたが、余り使いやすくなかったので使わないことにしました。

インストール
$ npm install -g http-server
使い方

HTML5アプリが、~/Desktop/HTML5/index.htmlにある場合、カレントディレクトリから次のようにしてhttp-serverを起動します。

$ http-server Desktop/HTML5/
Starting up http-server, serving Desktop/HTML5/ on: http://0.0.0.0:8080
Hit CTRL-C to stop the server

そして、ブラウザを起動してhttp://0.0.0.0:8080/index.htmlにアクセスすればHTML5アプリが使えます。HTML5アプリを使い始めればサーバーは止めても構わないはずです。

便利ですが、CDEと比べてどちらが便利かは微妙なところだと思います。

その他のパッケージ

ファイルの結合（concat）や圧縮（minify）や開発の手助け（grunt, gulp）のパッケージが有名です。理系ジンは、Atomパッケージで十分だったり難しそうだったりしたので、今のところ使いません。

Atomのパッケージの初歩

Atomでのパッケージの見つけ方、インストール・設定方法、使用方法を説明します。

Atomのパッケージの見つけ方

Atomのメニューの[Atom]>[Preferences...]（[Command]+[,]）で[Settings]を開き、[Packages]タブに行き、[Search Packages]にキーワードを入力して検索します。

また、人気のあるパッケージが[Settings]の[Featured Packages]に表示されています。

AtomのWebサイトのPackagesからも検索できます。

目的に合いそうなパッケージが複数見つかった場合は、ダウンロード数やパッケージの[Learn More]ボタンをクリックしてパッケージのページを見たりして判断します。各パッケージには、GitHubのページもあります。

Atomパッケージのインストール・設定方法

基本的には、Atomの[Settings]の[Packages]タブに表示された目的のパッケージの[Install]ボタンをクリックしてインストールします。これは、次のコマンドと同じです。

$ apm install パッケージ名

Atomパッケージから利用するnpmパッケージのインストールが必要なものもあります（例：Linter Jshintパッケージ）し、別に作業が必要なものもあります（例：Term2パッケージ）。

各Atomパッケージの設定方法は、パッケージの[Learn More]ボタンをクリックして表示されるGitHubのページやREADME.mdに書かれています。

Atomパッケージの設定は、[Settings]の各パッケージのタブからできます。Atomのメニュー[Atom]>[Open Your Config]で、~/.atom/config.csonファイルを開いて設定することもできます。どちらで設定しても同じです。

Atomパッケージの使用方法

大抵のAtomパッケージは、Atomのメニューの[Packages]から使用できます。キー操作により使用することもできます（パッケージのページやメニューの右端に書かれています）。自動的に利用できるもの（例：Autocomplete Plusパッケージ、Linter Jshintパッケージ）や、設定により自動的に利用できるようになるもの（例：Minifierパッケージ）もあります。

おすすめAtomパッケージ

理系ジンが使ってみて良いと思ったAtomパッケージを紹介します。

Atom Beautifyパッケージ

Atom Beautifyパッケージは、Atomで、HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, SQLのコードのインデントなどを整えます。

Autocomplete Plusパッケージ

Autocomplete Plusパッケージは、Atomでタイプ中に補完してくれるようになります。

autocomplete-snippetsやautocomplete-pathsというプラグインもあります（まだ使っていません）。

Jsdocパッケージ

Jsdocパッケージは、JSDoc用のコメントを少し書いてくれます。少し役に立ちます。

Linterパッケージ

Linterパッケージによりコードを検証してメッセージを表示してくれます。プラグインがたくさんあります。Linterパッケージのページを見てください。

Linter Jshintパッケージ

LinterパッケージのプラグインであるLinter Jshintパッケージにより、JSHintの結果をAtomの画面に表示してくれます。

README.mdやページに従い次のように設定します。

Atomメニューの[Atom]>[Open Your Config]で~/.atom/config.csonファイルを開きます。

  'linter-jshint': {}

を次のようにします。

  'linter-jshint':
    'jshintExecutablePath': '/usr/local/bin/jshint'

Minifierパッケージ

Minifierパッケージにより、.jsや.cssファイルを、圧縮した.min.jsや.min.cssにしてくれます。設定によりファイル保存時に自動的に作成するようにもできます。

Term2パッケージ

Term2パッケージにより、Atomのタブとしてターミナルを実行できます。普通にMacターミナルを使えばいいのでそれほど有用でもありません。

Term2パッケージのインストール

理系ジンの環境では最初はインストールできませんでした。

GitHub - AtomにTerm2を入れた時に若干ハマった話 - QiitaやError installing the package within Atom in OSX 10.8.5 Issue #28 atom/terminalのjohnbonaさんに従って、次のようにしたらインストールできました。

node-gypパッケージをグローバルにアップデート（sudoは不要かも知れません）

$ sudo npm update -g node-gyp

Atomのnode-gypパッケージを削除（sudoは不要かも知れません）

$ sudo rm -rf ~/.atom/.node-gyp

Xcode Command Line Toolsをインストール（これだけで十分かも知れません）

Xcodeを起動し、メニューの[Xcode]>[Open Developer Tool]>[More Developer Tools...]をクリックして、AppleのDownloadsサイトに行き（ログインの必要があります）、Command Line Tools (OS X 10.10) for Xcode - Xcode 6.1をクリックしてインストールします。

この後、Term2パッケージのインストールをしたら成功しました。

Term2パッケージ用の設定

Term2パッケージでパスを設定するために、ホームディレクトリ（~）の.bash_profileファイル（理系ジンは無かったので作りました）に、（ターミナルの$ echo $PATHの結果を参考に）次のようにパスを設定しました。

~/.bash_profile

# .bash_profile

PATH=$PATH:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/git/bin

export PATH

これでTerm2から色々なコマンドが使えるようになりました。

まとめ

Atomやnpmは使いやすく便利です。

Git関連のパッケージは紹介しませんでしたが、Gitの理解が深まったら紹介することがあるかもしれません。

予定

進捗によりJavaScriptやGitなどの記事を予定しています。