「JavaScript開発環境」の版間の差分

提供: Node.js/JavaScript入門
移動: 案内検索
(ページの作成:「JavaScriptを書くための開発環境についてです。 __TOC__ == 概要 == JavaScriptのプログラムを書く環境ですが、統合開発環境、エディ...」)
 
(概要)
 
(同じ利用者による、間の7版が非表示)
行1: 行1:
JavaScriptを書くための開発環境についてです。
+
JavaScriptを書くための開発環境についてです。JavaScriptを書く環境として、エディタや統合開発環境があります。
  
 
__TOC__
 
__TOC__
行8: 行8:
 
* Vim
 
* Vim
 
* Eclipse
 
* Eclipse
* Visual Studio
+
* Microsoft Visual Studio
 +
** [[Node.js Tools for Visual Studio]]
 
* Aptana Studio
 
* Aptana Studio
 
* NetBenas
 
* NetBenas
  
 
== ツール ==
 
== ツール ==
* jshint
+
* lint
 
+
** [[jshint]]
 +
** [[jslint]]
 +
* ドキュメントジェネレータ
 +
** [[JSDoc]]
 +
* jsonフォーマット整形・絞込
 +
** [[jq]]
 
== Vimを統合開発環境 ==
 
== Vimを統合開発環境 ==
 +
=== .vimrc ===
 
vim を統合開発環境(IDE)っぽく使うために、補完やシンタックスチェックの機能を追加するための設定(.vimrc)です。
 
vim を統合開発環境(IDE)っぽく使うために、補完やシンタックスチェックの機能を追加するための設定(.vimrc)です。
 
<syntaxhighlight lang="vim">
 
<syntaxhighlight lang="vim">
行33: 行40:
  
 
let g:syntastic_javascript_checker = "jshint"
 
let g:syntastic_javascript_checker = "jshint"
 +
 +
" ドキュメントジェネレータ
 +
NeoBundle 'heavenshell/vim-jsdoc'
 +
 +
NeoBundle 'guileen/vim-node-dict'
 +
au FileType javascript set dictionary+=$HOME/.vim/bundle/vim-node-dict/dict/node.dict
 +
</syntaxhighlight>
 +
=== vim-javascript-syntax ===
 +
VimでのJavaScriptのシンタックスを改善します。
 +
<syntaxhighlight lang="vim">
 +
NeoBundleLazy 'jelera/vim-javascript-syntax', {'autoload':{'filetypes':['javascript']}}
 +
</syntaxhighlight>
 +
 +
=== vim-node-dict ===
 +
node 用の辞書を追加します。C-x C-k で補完できます。
 +
<syntaxhighlight lang="vim">
 +
NeoBundle 'guileen/vim-node-dict'
 +
au FileType javascript set dictionary+=$HOME/.vim/bundle/vim-node-dict/dict/node.dict
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== 開発環境構築 ==
 +
=== シンタックスチェック ===
 +
==== jshint ====
 
[[npm]]で[[jshint]]をインストールします。
 
[[npm]]で[[jshint]]をインストールします。
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
行48: 行76:
 
├── htmlparser2@3.7.3 (domelementtype@1.1.1, domutils@1.5.0, entities@1.0.0, domhandler@2.2.0, readable-stream@1.1.13)
 
├── htmlparser2@3.7.3 (domelementtype@1.1.1, domutils@1.5.0, entities@1.0.0, domhandler@2.2.0, readable-stream@1.1.13)
 
└── cli@0.6.4 (glob@3.2.11)
 
└── cli@0.6.4 (glob@3.2.11)
 +
</syntaxhighlight>
 +
=== テンプレートエンジン ===
 +
==== jade ====
 +
[[jade]]をインストールします。
  
 +
<syntaxhighlight lang="bash">
 +
$ sudo npm install -g jade
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== 実行環境 ==
 
== 実行環境 ==
* [[node.js]]
+
[[node.js]]を使用します。インストールについては、[[node.jsのインストール]]をご参照ください。
 +
<syntaxhighlight lang="bash">
 +
# FreeBSD
 +
$ sudo pkg install nodejs npm
 +
</syntaxhighlight>
 +
 
 +
実行方法は、以下の通りです。
 +
<syntaxhighlight lang="bash">
 +
$ node run.js
 +
</syntaxhighlight>
 +
 
 +
[[node.js環境をchefで構築する]]
 +
 
 +
== シンタックスチェック ==
 +
[[jshint]]コマンドでチェックします。
 +
<syntaxhighlight lang="bash">
 +
$ jshint main.js
 +
</syntaxhighlight>
 +
 
 +
== ドキュメント作成 ==
 +
=== ドキュメントジェネレータ ===
 +
[[JSDoc]]などのツールを使用するとHTML形式のドキュメント作成が簡単になります。
 +
<syntaxhighlight lang="bash">
 +
$ sudo npm install -g jsdoc
 +
$ rehash
 +
$ jsdoc hoge.js
 +
</syntaxhighlight>
 +
=== ドキュメント作成補助 ===
 +
==== jsdoc.vim ====
 +
Vimの[[jsdoc.vim]]を使用するとコメントブロックが瞬時に作成できます。
 
== 関連項目 ==
 
== 関連項目 ==
 
* [[JavaScript言語解説]]
 
* [[JavaScript言語解説]]
 +
* [[jshint]]
 +
* [[npm]]
 
<!-- vim: filetype=mediawiki
 
<!-- vim: filetype=mediawiki
 
-->
 
-->

2015年11月24日 (火) 23:40時点における最新版

JavaScriptを書くための開発環境についてです。JavaScriptを書く環境として、エディタや統合開発環境があります。

概要

JavaScriptのプログラムを書く環境ですが、統合開発環境、エディタなどいろいろな選択肢があります。

ツール

  • lint
  • ドキュメントジェネレータ
  • jsonフォーマット整形・絞込

Vimを統合開発環境

.vimrc

vim を統合開発環境(IDE)っぽく使うために、補完やシンタックスチェックの機能を追加するための設定(.vimrc)です。

NeoBundle 'Shougo/neocomplete.vim'
 
NeoBundle 'moll/vim-node'
NeoBundle 'mattn/jscomplete-vim'
NeoBundle 'myhere/vim-nodejs-complete'
 
autocmd FileType javascript :setl omnifunc=jscomplete#CompleteJS
 
NeoBundleLazy 'jelera/vim-javascript-syntax', {'autoload':{'filetypes':['javascript']}}
 
NeoBundle 'scrooloose/syntastic'
let g:syntastic_enable_signs=1
let g:syntastic_auto_loc_list=2
 
let g:syntastic_javascript_checker = "jshint"
 
" ドキュメントジェネレータ
NeoBundle 'heavenshell/vim-jsdoc'
 
NeoBundle 'guileen/vim-node-dict'
au FileType javascript set dictionary+=$HOME/.vim/bundle/vim-node-dict/dict/node.dict

vim-javascript-syntax

VimでのJavaScriptのシンタックスを改善します。

NeoBundleLazy 'jelera/vim-javascript-syntax', {'autoload':{'filetypes':['javascript']}}

vim-node-dict

node 用の辞書を追加します。C-x C-k で補完できます。

NeoBundle 'guileen/vim-node-dict'
au FileType javascript set dictionary+=$HOME/.vim/bundle/vim-node-dict/dict/node.dict

開発環境構築

シンタックスチェック

jshint

npmjshintをインストールします。

$ sudo npm install -g jshint
...
jshint@2.5.5 node_modules/jshint
├── strip-json-comments@0.1.3
├── underscore@1.6.0
├── exit@0.1.2
├── minimatch@0.4.0 (sigmund@1.0.0, lru-cache@2.5.0)
├── shelljs@0.3.0
├── console-browserify@1.1.0 (date-now@0.1.4)
├── htmlparser2@3.7.3 (domelementtype@1.1.1, domutils@1.5.0, entities@1.0.0, domhandler@2.2.0, readable-stream@1.1.13)
└── cli@0.6.4 (glob@3.2.11)

テンプレートエンジン

jade

jadeをインストールします。

$ sudo npm install -g jade

実行環境

node.jsを使用します。インストールについては、node.jsのインストールをご参照ください。

# FreeBSD
$ sudo pkg install nodejs npm

実行方法は、以下の通りです。

$ node run.js

node.js環境をchefで構築する

シンタックスチェック

jshintコマンドでチェックします。

$ jshint main.js

ドキュメント作成

ドキュメントジェネレータ

JSDocなどのツールを使用するとHTML形式のドキュメント作成が簡単になります。

$ sudo npm install -g jsdoc
$ rehash
$ jsdoc hoge.js

ドキュメント作成補助

jsdoc.vim

Vimのjsdoc.vimを使用するとコメントブロックが瞬時に作成できます。

関連項目