1. IntelliJ IDEAで
Node.js素敵開発Life!
•ワンフットシーバス
田中正吾
1

2. はじめに
•IntelliJ IDEAに興味あるひと
•Node.jsに興味あるひと
•人がツールに出会う過程を知りたい人
•よりよいツールを探してる人
2

3. 自己紹介
3

4. 自己紹介
田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラク
ティブコンテンツを主に行い現在に至る。
最近はソーシャルゲーム制作界隈で
JavaScriptやHTML5アニメーション、
スマートフォン演出制作の
ワークフロー改善に関わったりしています。
4

5. 自己紹介
細々と技術ブログ書いてます。
http://ｗｗｗ.1ft-seabass.jp/memo/
Flash/CreateJS/Swiffy/EdgeAnimate/
JavaScript/自動処理 などなど…
5

6. はじめに
6

7. きいてみたい
IntelliJ IDEA または JetBrain社のほ
かの統合開発を知ってる or 使ったこ
とある方
7

8. きいてみたい
node.jsを知ってる or 使ったことあ
る方
8

9. 私がNode.jsを使うとき
9

10. 私がNode.jsを使うとき
10

11. 私がNode.jsを使うとき
サーバーサイドJavaScriptとして有名
ですが、他にもgruntのようなWEB制
作での面倒な作業を自動化するツール
としても使われます。便利。
11

12. 私がNode.jsを使うとき
私がよく使うのは、ファイル監視の
API(watch/watchFile)を使って独自
の自動処理を作ったりするのに利用中。
12

13. 私がNode.jsを使うとき
ファイルを更新した時に自動でやって
くれるので、実行のし忘れの手間が省
けて、作業が止まらなくていい！
13

14. 私がNode.jsを使うとき
例えば、Edge Animateのソースコー
ドをリアルタイムに使いやすく加工し
たり。
14

15. 私のNode.js制作環境（当初）
15

16. 私のNode.js制作環境（当初）
作業環境はWindows7。開発するエ
ディタはいろいろ。JavaScriptのカ
ラーリングがされればいいくらい。
16

17. 私のNode.js制作環境（当初）
実行はコマンドプロンプト。
17

18. 私のNode.js制作環境（当初）
こんなかんじ。
18

19. やりにくかった点
19

20. 私のNode.js制作環境（当初）
やりにくかった点
これで開発・自動処理実行はできる。
しかし、やりにくかった点も。
20

21. 私のNode.js制作環境（当初）
やりにくかった点
やりにくかった点
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、
Node.js用コードヒントなんてない。エラー
が起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際
に、どれ実行するか迷う。
21

22. 私のNode.js制作環境（当初）
やりにくかった点
とりあえず、起動するツールが多い。
作業始めるときに、いろいろ準備しな
いといけない。
22

23. 新たな開発環境 IntelliJ IDEA
23

24. 新たな開発環境 IntelliJ IDEA
IntelliJ IDEA
24

25. 新たな開発環境 IntelliJ IDEA
http://www.jetbrains.com/idea/
25

26. 新たな開発環境 IntelliJ IDEA
•現在、バージョン12。もうじき、13来る。
•インストールしてすぐに直感的に使える多言語統
一開発環境。
•強力なコーディング、デバッグ、リファクタリン
グ機能でで助けてくれる。
•Mac/Windows両対応
•Node.jsもプラグインを入れると、コードヒント
やアプリケーション内で実行できる。
26

27. 新たな開発環境 IntelliJ IDEA
•Node.jsもプラグインを入れるとコードヒントや
アプリケーション内でNode.js実行できる。
27

28. 新たな開発環境 IntelliJ IDEA
•Node.js用のコード支援加わる。
28

29. 新たな開発環境 IntelliJ IDEA
•アプリケーション内でNode.js実行できる。デ
バックもできる。
29

30. すごい。インストールしよう。
30

31. すごい。インストールしよう。
•インストール手順はブログに別途まとめました。
フォローアップページで見れるようにします。
http://www.1ft-seabass.jp/memo/
2013/11/16/intellij-idea-node-js-plugin-install/
31

32. IntelliJ IDEA を
導入したらどうなったか。
32

33. IntelliJ IDEA を導入したらどうなったか。
さっきのやりにくかった点、おさらい。
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、
Node.js用コードヒントなんてない。エラー
が起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際
に、どれ実行するか迷う。
33

34. IntelliJ IDEA を導入したらどうなったか。
•プロジェクトごとに1画面で作業が完結できるよ
うになった。
ファイル一覧
開発
実行
34

35. IntelliJ IDEA を導入したらどうなったか。
•プロジェクトごとに1画面で作業が完結できるよ
うになった。
解決！
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、
Node.js用コードヒントなんてない。エラー
が起きるとデバッグは自力。大変。
解決！
•node.jsができても複数の制作をしている際
に、どれ実行するか迷う。
35

36. IntelliJ IDEA を導入したらどうなったか。
•コードを書く時、いろいろな場所で支援してくれ
る。
そんなのないよ？
こんな候補があります
36

37. IntelliJ IDEA を導入したらどうなったか。
•コードを書く時、いろいろな場所で支援してくれ
る。
バグってます
37

38. IntelliJ IDEA を導入したらどうなったか。
•コードを書く時、いろいろな場所で支援してくれ
る。
解決！
•うっかりコマンドプロンプト実行し忘れる。
解決！
•JavaScriptのカラーリングはされるが、
Node.js用コードヒントなんてない。エラー
が起きるとデバッグは自力。大変。
解決！
•node.jsができても複数の制作をしている際
に、どれ実行するか迷う。
38

39. まとめ
39

40. まとめ
やりづらい点が解決し作業がスムーズ
に。たとえば...
•凡ミスが減って、丁寧に設計ができるよう
になった。
•ツールがひとつになったので作業の意識が
途切れにくくなった。
•出来上がったnode.jsの処理をプロジェクト
単位に適用出来るように。
40

41. まとめ
ざっくりいうと、ぽちっと1ツール起
動するだけで始められる！
その後の作業も快適！コードを書くの
が楽しくなった。
41

42. まとめ
ツール選び大事！
42

43. 今回のネタについては
アップします。
43

44. 今回紹介した内容について
•インストール手順はブログに別途まとめました。
フォローアップページで見れるようにします。
http://www.1ft-seabass.jp/memo/
2013/11/16/intellij-idea-node-js-plugin-install/
44

45. 今回紹介した内容について
• 今回紹介した内容は自分のブログに上げて、
CreatorMeetUpフォローアップページにも乗せてもら
います。
http://www.1ft-seabass.jp/memo/
45

46. ありがとうございました！
46