20131116 creators meetup
TRANSCRIPT
1
IntelliJ IDEAでNode.js素敵開発Life!•ワンフットシーバス 田中正吾
2
はじめに
•IntelliJ IDEAに興味あるひと
•Node.jsに興味あるひと
•人がツールに出会う過程を知りたい人
•よりよいツールを探してる人
3
自己紹介
4
自己紹介
田中正吾(たなかせいご)屋号:ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。
最近はソーシャルゲーム制作界隈で
JavaScriptやHTML5アニメーション、
スマートフォン演出制作の
ワークフロー改善に関わったりしています。
5
自己紹介
細々と技術ブログ書いてます。http://www.1ft-seabass.jp/memo/
Flash/CreateJS/Swiffy/EdgeAnimate/
JavaScript/自動処理 などなど…
6
はじめに
7
きいてみたい
IntelliJ IDEA または JetBrain社のほかの統合開発を知ってる or 使ったことある方
8
きいてみたい
node.jsを知ってる or 使ったことある方
9
私がNode.jsを使うとき
10
私がNode.jsを使うとき
11
私がNode.jsを使うとき
サーバーサイドJavaScriptとして有名ですが、他にもgruntのようなWEB制作での面倒な作業を自動化するツールとしても使われます。便利。
12
私がNode.jsを使うとき
私がよく使うのは、ファイル監視のAPI(watch/watchFile)を使って独自の自動処理を作ったりするのに利用中。
13
私がNode.jsを使うとき
ファイルを更新した時に自動でやってくれるので、実行のし忘れの手間が省けて、作業が止まらなくていい!
14
私がNode.jsを使うとき
例えば、Edge Animateのソースコードをリアルタイムに使いやすく加工したり。
15
私のNode.js制作環境(当初)
16
私のNode.js制作環境(当初)
作業環境はWindows7。開発するエディタはいろいろ。JavaScriptのカラーリングがされればいいくらい。
17
私のNode.js制作環境(当初)
実行はコマンドプロンプト。
18
私のNode.js制作環境(当初)
こんなかんじ。
19
やりにくかった点
20
私のNode.js制作環境(当初) やりにくかった点
これで開発・自動処理実行はできる。しかし、やりにくかった点も。
21
私のNode.js制作環境(当初) やりにくかった点
やりにくかった点
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際に、どれ実行するか迷う。
22
私のNode.js制作環境(当初) やりにくかった点
とりあえず、起動するツールが多い。作業始めるときに、いろいろ準備しないといけない。
23
新たな開発環境 IntelliJ IDEA
24
新たな開発環境 IntelliJ IDEA
IntelliJ IDEA
25
新たな開発環境 IntelliJ IDEA
http://www.jetbrains.com/idea/
26
新たな開発環境 IntelliJ IDEA
•現在、バージョン12。もうじき、13来る。
•インストールしてすぐに直感的に使える多言語統一開発環境。
•強力なコーディング、デバッグ、リファクタリング機能でで助けてくれる。
•Mac/Windows両対応
•Node.jsもプラグインを入れると、コードヒントやアプリケーション内で実行できる。
27
新たな開発環境 IntelliJ IDEA
•Node.jsもプラグインを入れるとコードヒントやアプリケーション内でNode.js実行できる。
28
新たな開発環境 IntelliJ IDEA
•Node.js用のコード支援加わる。
29
新たな開発環境 IntelliJ IDEA
•アプリケーション内でNode.js実行できる。デバックもできる。
30
すごい。インストールしよう。
31
すごい。インストールしよう。
•インストール手順はブログに別途まとめました。フォローアップページで見れるようにします。
http://www.1ft-seabass.jp/memo/
2013/11/16/intellij-idea-node-js-plugin-install/
32
IntelliJ IDEA を導入したらどうなったか。
33
IntelliJ IDEA を導入したらどうなったか。
さっきのやりにくかった点、おさらい。
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際に、どれ実行するか迷う。
34
IntelliJ IDEA を導入したらどうなったか。
•プロジェクトごとに1画面で作業が完結できるようになった。
実行
開発ファイル一覧
35
IntelliJ IDEA を導入したらどうなったか。
•プロジェクトごとに1画面で作業が完結できるようになった。
解決!
解決!
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際に、どれ実行するか迷う。
36
IntelliJ IDEA を導入したらどうなったか。
•コードを書く時、いろいろな場所で支援してくれる。
そんなのないよ?
こんな候補があります
37
IntelliJ IDEA を導入したらどうなったか。
•コードを書く時、いろいろな場所で支援してくれる。
バグってます
38
IntelliJ IDEA を導入したらどうなったか。
•うっかりコマンドプロンプト実行し忘れる。
•JavaScriptのカラーリングはされるが、Node.js用コードヒントなんてない。エラーが起きるとデバッグは自力。大変。
•node.jsができても複数の制作をしている際に、どれ実行するか迷う。
•コードを書く時、いろいろな場所で支援してくれる。
解決!
解決!
解決!
39
まとめ
40
まとめ
やりづらい点が解決し作業がスムーズに。たとえば...
•凡ミスが減って、丁寧に設計ができるようになった。
•ツールがひとつになったので作業の意識が途切れにくくなった。
•出来上がったnode.jsの処理をプロジェクト単位に適用出来るように。
41
まとめ
ざっくりいうと、ぽちっと1ツール起動するだけで始められる!
その後の作業も快適!コードを書くのが楽しくなった。
42
まとめ
ツール選び大事!
43
今回のネタについてはアップします。
44
今回紹介した内容について
•インストール手順はブログに別途まとめました。フォローアップページで見れるようにします。
http://www.1ft-seabass.jp/memo/
2013/11/16/intellij-idea-node-js-plugin-install/
45
今回紹介した内容について
• 今回紹介した内容は自分のブログに上げて、CreatorMeetUpフォローアップページにも乗せてもらいます。
http://www.1ft-seabass.jp/memo/
46
ありがとうございました!