コンパイラかく語りき

import { Fun } from 'programming'

Web開発のためのIDE「WebStorm」を導入したのでメモ

chuckです。ついに、自宅環境にIDEを入れたのでメモ。

 

なぜ入れたの??

いまUnderscore.jsというJavaScriptのライブラリを読んでいるのですが、これがなかなか関数型っぽいんですよね。

つまり、return functionとか、function(function)みたいな感じです。

 

その処理を追っていくのが大変なので、コードジャンプ?を求めてIDEを導入しました。

一応、今つかっているSublimeTextでもできるっぽいのですが。

qiita.com

 

WebStormを選んだ理由

WebStormというIDEを導入しました。

www.jetbrains.com

 

まず「JavaScript IDE」で最初にヒットしました。(けっこう自分にとっては重要なポイント)

それ以外に、「coffeeやsassにも対応」とのこと。ちょうど、僕はこの半年でsassとcoffeeに慣れてきたので、すごくジャストタイミングなウリ文句でした。

Web開発にもってこいのIDEとのことで、すごくわくわくです。

 

ダウンロード

公式からダウンロード。

f:id:chuck0523:20151009235934p:plain

 

dmgファイルが落ちます。

f:id:chuck0523:20151010000031p:plain

 

さっそくAlfredから起動します。

f:id:chuck0523:20151010000411p:plain

ドキドキ…。

 

f:id:chuck0523:20151010000433p:plain

購入か評価版(無料)を選べるようですね。

とりあえず評価版を選択します。ただ、個人用だったら5000円なので、いい感じだったら多分購入すると思います。

 

設定

キーバインディングが選べるようですね。僕は無宗教なのでとりあえずMacOSでいきます。

f:id:chuck0523:20151010000658p:plain

 

エディターカラー!これは重要かも。

f:id:chuck0523:20151010000752p:plain

 

デフォルトではこんな感じです。これはちょっと…。

f:id:chuck0523:20151010000830p:plain

プレビュー機能

 

というわけで、慣れ親しんだmonokaiを選択。

f:id:chuck0523:20151010000926p:plain

 

「ターミナルから開けるようにする」にチェックを入れておきます。

f:id:chuck0523:20151010000956p:plain

 

TOP画面

これがTOP画面のようです。

f:id:chuck0523:20151010001036p:plain

かわいいですね!

 

おー!バージョン管理と連携できるんですね…(感動)

f:id:chuck0523:20151010001122p:plain

 

でもとりあえずは新規プロジェクトを選択。

 

プロジェクト作成

こんな感じ。

f:id:chuck0523:20151010001252p:plain

いいですね。最初はEmpty Projectを選択します。

 

これが作業画面のようです。

f:id:chuck0523:20151010001433p:plain

 

なにやら左端からコメントが出ていますね。

カーソルを合わせると、メニューが登場しました。

f:id:chuck0523:20151010001554p:plain

おー、すごい。

ターミナル開けるんですね!

f:id:chuck0523:20151010001634p:plain

これ地味に便利かもしれません…。

 

えーと、全体の画面に戻ります。

f:id:chuck0523:20151010001433p:plain

まだファイルが1つもないので、右側に何やら案内が出てますね。

 

丁寧にショートカットを教えてくれています。

f:id:chuck0523:20151010001812p:plain

 

ファイルをインポート

f:id:chuck0523:20151010002154p:plain

インポートしました。

 

すると、、

f:id:chuck0523:20151010002215p:plain

このディレクトリはgitで管理されてるし、まずはバージョン管理の設定したら?とのこと。ふむ。

 

バージョン管理設定

先ほどのウィンドゥでConfigureをクリック。

f:id:chuck0523:20151010002332p:plain

設定画面に来ました。

 

f:id:chuck0523:20151010002528p:plain

まずはGitHub連携から。

 

諸々入力。

f:id:chuck0523:20151010002544p:plain

接続できました。

設定を適用して終了。

 

ファイル操作してみる

さあ、いよいよIDE上でファイルを操作してみます。

ちゃんとインポートできていますね!

f:id:chuck0523:20151010002713p:plain

 

 いざ!jsファイルを展開!

f:id:chuck0523:20151010002958p:plain

 か、かっこいい…!

 

f:id:chuck0523:20151010003116p:plain

肝心のメソッドジャンプもできました!コマンド+クリックで、定義場所までジャンプできます。これがないとね!

 

 まとめ

Web開発用のIDEとしてWebStormを導入してみました。もう設定をいじるだけですごく時間が経ちそうです。これでまた開発がスムーズにできそうです。

また新発見があったら記録したいと思います。