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

20131116 creators meetup

Embed Size (px)

Citation preview

Page 1: 20131116 creators meetup

1

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

Page 2: 20131116 creators meetup

2

はじめに

•IntelliJ IDEAに興味あるひと

•Node.jsに興味あるひと

•人がツールに出会う過程を知りたい人

•よりよいツールを探してる人

Page 3: 20131116 creators meetup

3

自己紹介

Page 4: 20131116 creators meetup

4

自己紹介

田中正吾(たなかせいご)屋号:ワンフットシーバス

2004年よりフリーランス。

以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。

最近はソーシャルゲーム制作界隈で

JavaScriptやHTML5アニメーション、

スマートフォン演出制作の

ワークフロー改善に関わったりしています。

Page 5: 20131116 creators meetup

5

自己紹介

細々と技術ブログ書いてます。http://www.1ft-seabass.jp/memo/

Flash/CreateJS/Swiffy/EdgeAnimate/

JavaScript/自動処理 などなど…

Page 6: 20131116 creators meetup

6

はじめに

Page 7: 20131116 creators meetup

7

きいてみたい

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

Page 8: 20131116 creators meetup

8

きいてみたい

node.jsを知ってる or 使ったことある方

Page 9: 20131116 creators meetup

9

私がNode.jsを使うとき

Page 10: 20131116 creators meetup

10

私がNode.jsを使うとき

Page 11: 20131116 creators meetup

11

私がNode.jsを使うとき

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

Page 12: 20131116 creators meetup

12

私がNode.jsを使うとき

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

Page 13: 20131116 creators meetup

13

私がNode.jsを使うとき

ファイルを更新した時に自動でやってくれるので、実行のし忘れの手間が省けて、作業が止まらなくていい!

Page 14: 20131116 creators meetup

14

私がNode.jsを使うとき

例えば、Edge Animateのソースコードをリアルタイムに使いやすく加工したり。

Page 15: 20131116 creators meetup

15

私のNode.js制作環境(当初)

Page 16: 20131116 creators meetup

16

私のNode.js制作環境(当初)

作業環境はWindows7。開発するエディタはいろいろ。JavaScriptのカラーリングがされればいいくらい。

Page 17: 20131116 creators meetup

17

私のNode.js制作環境(当初)

実行はコマンドプロンプト。

Page 18: 20131116 creators meetup

18

私のNode.js制作環境(当初)

こんなかんじ。

Page 19: 20131116 creators meetup

19

やりにくかった点

Page 20: 20131116 creators meetup

20

私のNode.js制作環境(当初) やりにくかった点

これで開発・自動処理実行はできる。しかし、やりにくかった点も。

Page 21: 20131116 creators meetup

21

私のNode.js制作環境(当初) やりにくかった点

やりにくかった点

•うっかりコマンドプロンプト実行し忘れる。

•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。

•node.jsができても複数の制作をしている際に、どれ実行するか迷う。

Page 22: 20131116 creators meetup

22

私のNode.js制作環境(当初) やりにくかった点

とりあえず、起動するツールが多い。作業始めるときに、いろいろ準備しないといけない。

Page 23: 20131116 creators meetup

23

新たな開発環境 IntelliJ IDEA

Page 24: 20131116 creators meetup

24

新たな開発環境 IntelliJ IDEA

IntelliJ IDEA

Page 25: 20131116 creators meetup

25

新たな開発環境 IntelliJ IDEA

http://www.jetbrains.com/idea/

Page 26: 20131116 creators meetup

26

新たな開発環境 IntelliJ IDEA

•現在、バージョン12。もうじき、13来る。

•インストールしてすぐに直感的に使える多言語統一開発環境。

•強力なコーディング、デバッグ、リファクタリング機能でで助けてくれる。

•Mac/Windows両対応

•Node.jsもプラグインを入れると、コードヒントやアプリケーション内で実行できる。

Page 27: 20131116 creators meetup

27

新たな開発環境 IntelliJ IDEA

•Node.jsもプラグインを入れるとコードヒントやアプリケーション内でNode.js実行できる。

Page 28: 20131116 creators meetup

28

新たな開発環境 IntelliJ IDEA

•Node.js用のコード支援加わる。

Page 29: 20131116 creators meetup

29

新たな開発環境 IntelliJ IDEA

•アプリケーション内でNode.js実行できる。デバックもできる。

Page 30: 20131116 creators meetup

30

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

Page 31: 20131116 creators meetup

31

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

•インストール手順はブログに別途まとめました。フォローアップページで見れるようにします。

http://www.1ft-seabass.jp/memo/

2013/11/16/intellij-idea-node-js-plugin-install/

Page 32: 20131116 creators meetup

32

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

Page 33: 20131116 creators meetup

33

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

さっきのやりにくかった点、おさらい。

•うっかりコマンドプロンプト実行し忘れる。

•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。

•node.jsができても複数の制作をしている際に、どれ実行するか迷う。

Page 34: 20131116 creators meetup

34

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

•プロジェクトごとに1画面で作業が完結できるようになった。

実行

開発ファイル一覧

Page 35: 20131116 creators meetup

35

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

•プロジェクトごとに1画面で作業が完結できるようになった。

解決!

解決!

•うっかりコマンドプロンプト実行し忘れる。

•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。

•node.jsができても複数の制作をしている際に、どれ実行するか迷う。

Page 36: 20131116 creators meetup

36

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

•コードを書く時、いろいろな場所で支援してくれる。

そんなのないよ?

こんな候補があります

Page 37: 20131116 creators meetup

37

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

•コードを書く時、いろいろな場所で支援してくれる。

バグってます

Page 38: 20131116 creators meetup

38

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

•うっかりコマンドプロンプト実行し忘れる。

•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。

•node.jsができても複数の制作をしている際に、どれ実行するか迷う。

•コードを書く時、いろいろな場所で支援してくれる。

解決!

解決!

解決!

Page 39: 20131116 creators meetup

39

まとめ

Page 40: 20131116 creators meetup

40

まとめ

やりづらい点が解決し作業がスムーズに。たとえば...

•凡ミスが減って、丁寧に設計ができるようになった。

•ツールがひとつになったので作業の意識が途切れにくくなった。

•出来上がったnode.jsの処理をプロジェクト単位に適用出来るように。

Page 41: 20131116 creators meetup

41

まとめ

ざっくりいうと、ぽちっと1ツール起動するだけで始められる!

その後の作業も快適!コードを書くのが楽しくなった。

Page 42: 20131116 creators meetup

42

まとめ

ツール選び大事!

Page 43: 20131116 creators meetup

43

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

Page 44: 20131116 creators meetup

44

今回紹介した内容について

•インストール手順はブログに別途まとめました。フォローアップページで見れるようにします。

http://www.1ft-seabass.jp/memo/

2013/11/16/intellij-idea-node-js-plugin-install/

Page 45: 20131116 creators meetup

45

今回紹介した内容について

• 今回紹介した内容は自分のブログに上げて、CreatorMeetUpフォローアップページにも乗せてもらいます。

http://www.1ft-seabass.jp/memo/

Page 46: 20131116 creators meetup

46

ありがとうございました!