IntelliJ IDEAハンズオン

参加に必要なもの

ソフトウェア: IntelliJ IDEA 14 Ultimate Edition

ダウンロードはこちら

オープンソース、無償版のCommunity EditionではなくUltimate Editionを使います(30日の無償試用あり、試用版でもハンズオンにご参加いただけます)

ソースコード: Twitter4J

ダウンロードはこちら

コードブラウズの演習に使います

ハードウェア: 十分に充電されたラップトップPC

あると良い物

ソフトウェア: Live Editプラグイン、Chrononプラグイン

Preferences -> Plugins -> Install JetBrains plugin.. よりLiveEdit、Chrononプラグインをインストールしておいてください。どちらも無償でご利用いただける純正プラグインです。

ソフトウェア: Google Chrome/JetBrains Pulgin

LiveEdit機能によりHTML/JavaScriptのリアルタイム編集を行うのに必要です。 Chromeを開いてchrome web storeより"JetBrains"を検索してインストールしてください。無償でご利用いただけるChromeエクステンションです。

#プロジェクト内のナビゲート、の準備

Twitter4Jのプロジェクトを開くこちらからダウンロード、またはこちらからcloneしたTwitter4JのプロジェクトをIDEAで開く
インデックスが完了するまでHelloWorldやFizzBuzzを書く

#プロジェクトの作成

File->New Project...->Maven->(Create from archetypeは未チェックのまま)Next
GroupId: 任意、ArtifactId: 任意、Version:任意(1.0-SNAPSTOTのままでOK)→Next
Project Name: 任意、Project Location:任意→Next
プロジェクト作成ができたら"Maven projects need to be imported"と出るので"Enable Auto-Import"をクリック

クリックしそこねたら後からPreferences...->Maven->Importing->Import Maven projects automaticallyにチェックを入れる

#Hello Worldアプリの作成

Cmd + 1(プロジェクトペインへフォーカス移動)→[プロジェクト名]→src→main→javaへ移動
Ctrl+N(またはFile>New...)->Java Class
Name: Hello、Kind: Class
Helloクラスを作成できたらブレース内にカーソルを移動
"psvm"とタイプし、tab(LiveTemplate機能によりpublic static void mainに展開される)
"sout"とタイプし、tab
"Hello World"をタイプ
Shift + Ctrl + R(またはRun>Run...)より実行
Shift + Ctrl + Rでは今カーソルがあるクラスのmainメソッド、またはカーソルがある位置のテストメソッド、テストケースだけれどもテストメソッド内にカーソルがない場合はそのテストクラスのテスト全てを実行する設定を仮に作って実行してくれます。実行時のパラメータなどを指定したい場合は右上のプルダウンメニューよりEdit Configruations...を、実行設定を保存したい場合はSave *** Configurationを選びます。

#Fizz Buzz Fizz Buzzは数値を3で割り切れるときは"fizz"、5で割り切れるときは"buzz"、両方で割り切れるときは"fizzbuzz"、それ以外の場合は数値そのものをプリントするプログラムです。

FizzBuzzクラスを作成し、mainメソッドを作成
foriとタイプしてtab(LiveTemplate)、インデックスを0から99までループするコードを作成
i%3==0.ifとタイプしてtab(postfix completion)、"fizz".soutとタイプしてtab(postfix completion) postfix completionの一覧/編集はPrefernces > Editor > General > Postfix Completionより行えます
同様に5で割り切れる場合は"buzz"とプリントさせる
次にif(i%3!=0&&i%5!=0とタイプしてShift+Cmd+Enter(complete current statement)、3でも5でも割り切れない場合の条件部を完結させる
i.soutとタイプしてtab(postfix completion)
Alt + Cmd + L(Reformat code)によりコードをフォーマット通常fizz buzzでは3でも5でも割り切れる場合、"fizz buzz"のように一行にプリントしますが、演習をシンプルにするためこのコードでは途中で改行されます。

#Chrononを使ったデバッグ Run>Edit Configurations...>ChrononよりFizzBuzzタイムラインをダンプするをChrononのカバー対象として設定 Run *** with Chronon(実行ボタンの三つ右の黄色いアイコン)より実行

#HTMLファイルの編集

プロジェクトペインでCtrl+N->HTMとタイプし"HTML File"ダイアログを表示。indexと入力してindex.htmlを作成
bodyタグ内でdiv.myclass{Hello World}を記入、tab(Emmet/Live Template)
Shift+Ctrl+DでChromeでデバッグ(Chrome以外のブラウザが立ち上がる場合はindex.htmlのEdit Configurations->BrowserよりChromeを選択)
ブラウザとIntelliJ IDEAを横に並べる形にウインドウを整理。エディタペインが小さくなってしまうのでShift+Cmd+F12でエディタペインを最大化(もう一度Shift+Cmd+F12で戻ります)
myclassにカーソルを当て、Alt+Enter、Create Selectorを選択し、Current fileを選択。スタイルシートのmyclassを生成
myclass内で"color: r"と入力。redが候補として挙がるのでShift+Cmd+Enter(complete current statement)で選択とセミコロン入力まで行ってもらう。
"font-s"と入力。font-sizeが候補として挙がるので選択。100pxと入力
リアルタイムに編集結果が反映されているのを確認。LiveEditプラグイン(IDEA側)、JetBrainsプラグイン(Chrome側)がうまく働いている必要があります。LiveEditがうまく働かない場合(特にJetBrains IDEを複数開いている場合に発生する)はIDEAとChrome両方を再起動すると直ります
myclassにカーソルを当て、Shift+F6(Rename..)を押してリネームダイアログを出し、biggerという名前にする。スタイルシート側も、div側も同時に名前が変更されているのを確認
Alt+↑を押し(Extend SelectionまたはStructural Selection)、biggerを選択、Ctrl+G(Add Selection for next occurrence)。biggerのスタイル定義箇所と、利用箇所両方にカーソルを当てる(マルチカーソル)
クラス名を任意の名前に編集

#プロジェクト内のナビゲート

Twitter4Jのプロジェクトウインドウを開く
Shift二回でsearch everywhereポップアップを表示、twitterとタイプしてenter、Twitterクラスにジャンプ
interface Twitterの"Twitter"部にカーソルを当て、Alt+Cmd+B(Implementations、実装クラス一覧)を押し、TwitterImplを選択してジャンプ
Cmd+F12(File Structure)を押してファイル構造のポップアップを表示"ght"とタイプし、getHomeTimeLineメソッドを絞り込み、実装部にジャンプ
alt+F7(Find Usages)を押し、警告が出るのでYesを選択(実装クラスなのでインターフェース定義の使用箇所を検索するかどうかの確認)
画面下部にFindタブが現れるのでfrtとタイプ、FindResourcesTestを展開、ghtとタイプ、testFavoriteMethodsを絞り出しジャンプ
testFavoiteMethods内でShift+Ctrl+F9を押しデバッグ(テストに必要なファイルがないのでテストは失敗します)
Shift二回でsearch everywhereポップアップを表示、cbと入力してConfigurationBuilderを選択、ジャンプ

yusuke/ideahandson