読者です 読者をやめる 読者になる 読者になる

理系ジン

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

node.jsとAtomの設定

はじめに

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

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

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

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

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

注意

MacXcodeがインストールされていなかったり、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/以下からパッケージに対応するリンクが張られます。

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

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

おすすめnpmパッケージ

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

jshintパッケージ

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

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

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

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

jsdocパッケージ

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

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で簡易サーバーを起動できるパッケージを3つ試してみましたが、余り使いやすくなかったので使わないことにしました。

インストール
$ 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-snippetsautocomplete-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を入れた時に若干ハマった話 - QiitaError 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などの記事を予定しています。