Re:ゼロから始める爆速コーディング生活


実践編：[Re:ゼロから始める爆速コーディング生活（フロントエンド実践編）](http://qiita.com/teradonburi/items/6c9bf156418faa153036#eqececleafebeepreapeqaev)

最近コーディングを早くするためにやったことを共有します。
初心者さんでもゼロから環境づくりから爆速コーディングするまでの一連の流れをやります。

前提としてMac OSXにて構築を行います。
サンプルではBracketsでのブラウザ側とサーバ（NodeJS）の簡易モックの作成を行いますが、
それ以外のウェブアプリケーション作成時にも役に立つと思います。

* 開発環境（Bracketsエディター）インストール
* Bracketsカスタマイズ（プラグイン、キーマッピング、半透明化）
* NodeJSインストール
* Bowerインストール
* gulpインストール
* サンプル作成

# 開発環境（Bracketsエディター）の導入
Adobeが作っているエディタで軽量でプラグインも豊富です。
Adobeというと有料のイメージが強いですが、無料のオープンソースです。
カスタマイズもしやすくウェブアプリケーション開発に向いてます。
他にもhtml色コードをマウスオーバ時に色を視覚化してくれたり、
画像urlをマウスオーバ時に画像のプレビューを表示する機能もあります。
もちろんコード補完の機能も完備されています。

下記からインストールします。
http://brackets.io/

![brackets.png](https://qiita-image-store.s3.amazonaws.com/0/55077/95062967-8a25-d07b-c546-a2d509e503af.png)

## 基本操作

編集時によく使うショートカット
Cmd+X：行カット、選択箇所カット
Cmd+C：行コピー、選択箇所コピー
Cmd+V：ペースト
Cmd+/：コメントアウト
Alt+→：単語単位右移動
Alt+←：単語単位左移動
Cmd+↑：行入れ替え上
Cmd+↓：行入れ替え下
Cmd+Enter:次の行追加

他にも色々あるんで
詳細は下記参考にしてくだしあ
[チートシート](http://lisacatalano.github.io/brackets_course/mac.html)

# Bracketsカスタマイズ（プラグイン、キーマッピング、半透明化）

## プラグイン
Bracketsの右側のブロックアイコンから
プラグインを追加できます。

![plugin.png](https://qiita-image-store.s3.amazonaws.com/0/55077/376609ae-ee49-ec20-80c3-46a97462bdd1.png)

![plugininstall.png](https://qiita-image-store.s3.amazonaws.com/0/55077/4be6cd58-7336-38dc-9e8a-81b23a987284.png)

ここではコーディングを早くするために使えるプラグインを導入します。
下記ワードで検索してインストールしてください。

* Tabs - Custom Working
* SideBar Plus
* Brackets Snippets(by edc)
* Beautify
* Themes for Brackets
* Overscroll

### Tabs - Custom Working
複数ファイルをタブで切り替えできるようになります。

![tabs.png](https://qiita-image-store.s3.amazonaws.com/0/55077/9f4fce51-5aa4-c35a-6bfa-a7ec3f4371f0.png)

### Sidebar Plus
コーディングにサイドバーを隠すことができます
「サイドバーを表示する」のチェックを外します。
ついでに「アクティブな行をハイライト」「行番号」「折り返し」にチェックを入れておいたほうがコーディングしやすくなります

![sidebar.png](https://qiita-image-store.s3.amazonaws.com/0/55077/1a70ecc8-837e-ca61-5b61-4af0e0f5044f.png)

非表示のときに左側領域をクリックすると再度表示できます。

![out.gif](https://qiita-image-store.s3.amazonaws.com/0/55077/ffc8df5a-7f90-86c4-e2be-2db62e3c21c8.gif)


### Brackets Snippets(by edc)
今回の肝といっても過言ではありません。
あらかじめ短いワードと対応するプログラムを登録しておき、
短いワード入力時にTabで展開（補完）することができます。

Snippetsプラグインインストール後、
右側の電球アイコンをクリックします。

![snippetspanel.png](https://qiita-image-store.s3.amazonaws.com/0/55077/5364b242-422c-b6f8-b3b7-1cb255c7faaa.png)

New+を押して、Snippets追加できます
Trigger:Textを呼び出すためのトリガー
Description:トリガーの説明
Scope:対象となるファイル拡張子
Text:展開する内容

登録すると、途中までタイピングすると選択肢が出るようになり、
tabで展開できます。

![snippetsdemo.png](https://qiita-image-store.s3.amazonaws.com/0/55077/00eefd55-61d4-4cd0-fa2a-725315e77fd1.png)

```
${1},${2}
```
はTabを押した時、カーソルが移るポイントです。

```
${1:link}
```
などやると予めlinkという文字がテンプレが入ってる状態で展開されるため、
局所的な編集がしやすいです。

このプラグインにはSnippetsファイル自体のエクスポート、インポート機能もあり、
エクスポートしたymlファイルをインポートすることで
他のBracketsでも使えるようになります
下記に私が使っているSnippetsファイルをアップロードしておきましたので、
もしよかったら使ってください。
[Snippets.yml](https://raw.githubusercontent.com/teradonburi/coding/master/export-snippets.yml "Snippets")

「Settings」の「import」からインポートできます。
![snippets.png](https://qiita-image-store.s3.amazonaws.com/0/55077/5d2cde00-35a8-4a65-b665-5935df74ee6e.png)

### Beautify
インテントを揃えてくれます。
メニュー欄の「編集」→「保存時にBeautifyする」のところにチェックを入れておけば、
ファイル保存時に自動整形してくれます。
ちなみに、「自動閉じカッコ」にもチェックしておいたほうが楽できます。

![beautify.png](https://qiita-image-store.s3.amazonaws.com/0/55077/0c0ed7c7-7a70-a75b-499e-bf8a881b6f0b.png)

### Themes for Brackets
Bracketsの見た目（スキン）を変えます。
メニュー欄「表示」→「テーマ」で変更できます。

![theme.png](https://qiita-image-store.s3.amazonaws.com/0/55077/ae0dfb52-3142-2d25-5e60-c2cb2836b1fa.png)

後でAfloatというウィンドウ半透明ツールを入れるので
デフォルトの背景白基調でなく、背景黒基調に変更するのがお勧めです。

![themeblack.png](https://qiita-image-store.s3.amazonaws.com/0/55077/da7c5c3a-13da-8c18-0d84-8ef253a14a08.png)

### Overscroll
ファイル末尾を超えてスクロールできるようになります。

![overscroll.png](https://qiita-image-store.s3.amazonaws.com/0/55077/07343cb5-86ca-245f-2891-00d9418d95f9.png)


これも半透明化した際に背後の画面確認に使えます。

### その他プラグイン
他にも色々使えるプラグインがあるので下記を参考にしてください。
[Brackets おすすめエクステンション集・解説](http://qiita.com/assialiholic/items/c7962f804cdb21a49327 "タイトル")

## キーマッピング
Brackets自体にショートカットキーの割り当てができ、拡張ができます。
メニュー欄「デバッグ」→「ユーザキーマップを開く」

![keymap.png](https://qiita-image-store.s3.amazonaws.com/0/55077/a173b23b-904f-a1aa-c086-d7b3a6e450ee.png)

デフォルトで画面分割に関してショートカットが追加されていないので
次のように設定を追加しておくと作業が捗ります。

```keymap.json
{
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
    "overrides": {
        "Cmd-Shift-T": "cmd.splitViewNone",
        "Cmd-T": "cmd.splitViewVertical",
        "Alt-T": "cmd.splitViewHorizontal"
    }
}
```

* Cmd+Shift+T→画面分割解除
* Cmd+T→画面縦分割
* Alt+T→画面横分割


## 半透明化
Macbook Airとかだと画面が狭いということが多々あると思います。
Afloatというツールを使うとウィンドウを半透明にすることができます。
gulpの項で編集保存時に自動ブラウザリロードするモジュールをインストールするので
合わせて使うとコーディングしながら背後のブラウザ画面の確認が即座にできるようになります。

Afloatのダウンロード
http://mac.majorgeeks.com/mg/getmirror/afloat,1.html

Afloatインストール
![Afloat.png](https://qiita-image-store.s3.amazonaws.com/0/55077/b15c6a62-59b2-3729-b2fb-9a15b43cbbbd.png)

インストール後、半透明化したいBracketsを終了して、再度開きます。
メニュー欄「ウィンドウ」→「Transprancy」→「Make More Transparent」で半透明化します。

![transparency.png](https://qiita-image-store.s3.amazonaws.com/0/55077/ebb44d5f-d8b1-b482-6e89-2c7e1c1c2d71.png)


# Homebrewインストール
Mac OSXのパッケージ管理ツールです。
主にnativeなソフトウェアをインストールするときに重宝します。
(imagemagick,ffmpeg・・・などなど)
今回はgitが必要なのでgitをインストールしておきます。

「Control」キー＋「スペース」キーでSpotlightを起動
![spotlight.png](https://qiita-image-store.s3.amazonaws.com/0/55077/61cbccf8-8140-8dc4-74b6-1c727cff1137.png)
「ターミナル」を入力し、Enter
ターミナルより下記コマンドでインストールします。

HomeBrewインストール

```
$ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

gitインストール

```
$brew install git
```

# NodeJSインストール
NodeJSはJavascriptでサーバサイドのプログラムをかけるという環境です。
裏側はV8というエンジンで解釈して動いています。
NodeJSはバージョン更新が早いので
後々を考えるとNodeJSのバージョン管理ツール経由でインストールしたほうが良いです。
nvmというNodeJSバージョン管理ツールがあるのでインストールします。

nvmインストール

```
$git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
$. ~/.nvm/nvm.sh
```
. ~/.nvm/nvm.shシェルはPC起動時に毎回実行しないといけなくなるため
以下を、~/.bashrcに追記して、PC起動時に自動的に読込むようにします。

```~/.bashrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
```

NodeJSをインストールします。

```
$nvm install v4.3.2
$nvm use v4.3.2
```

NodeJSにはnpmという強力なNodeJSパッケージインストールツールがあるため、
npm経由で様々なNodeJSモジュールをインストールすることができます。
bowerやgulpもNodeJSモジュールですのでnpm経由でインストールします。

試しにNodeJSのサーバを作ってみましょう

```app.js
require('http').createServer(function (req, res) {

    res.writeHead(200, {
        "Content-Type": "text/html"
    });
    res.end('Hello World');

}).listen(3000);
```

次のコマンドで起動できます。

```
$node app.js
```

ブラウザから
http://localhost:3000
にアクセスしてみてください

ついでにNodemonもインストールしておきます。
Nodemonはサーバ側プログラムの変更があったタイミングで
NodeJSを再起動してくれるツールです。

Nodemonインストール

```
$npm install -g nodemon
```

NodemonでのNodeJS起動は次コマンドで行います。

```
$sudo nodemon app.js
```

nodemonで起動中にapp.jsを編集保存するとサーバが再起動することがわかります。
![nodemon](https://raw.githubusercontent.com/teradonburi/coding/master/nodemon.gif)


# Bowerインストール
bowerはブラウザサイドのJavascriptライブラリのパッケージインストールツールです。
jQueryやAngularJSやらBootStrapやらブラウザサイドのJavaScriptライブラリを
ダウンロードすることができます。

bowerインストール

```
$npm install -g bower
```

jQueryダウンロード

```
$bower install jquery
```

bower_componentsフォルダが作成され、jQueryがダウンロードされます。
ダウンロード先は
bower_components/{ライブラリ名}/dist/（ライブラリ）.js
という形式が多いです。

# gulpインストール
タスクランナーと呼ばれ、
スクリプトを書くことで雑務な処理を自動化することができます。
（いわゆるバッチ処理）

gulpインストール

```
$npm install -g gulp
```

browser-syncというモジュールを使えば、
ファイル編集保存時にブラウザを自動リロードすることができるので
飛躍的にコーディングの生産性があがります。

gulpのタスクはgulpfile.jsに記述します。
下記にリソースファイル変更時にブラウザ自動リロードするgulpfileのサンプルを記述します。

```gulpfile.js
var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    nodemon = require('gulp-nodemon');

gulp.task('nodemon', function (cb) {
    var called = false;

    return nodemon({
            script: 'app.js',
            ext: 'js html css less', // 監視するファイルの拡張子
            ignore: ['node_modules'] // 監視しないファイル
        })
        .on('start', function () {
            // サーバー起動時
            if (!called) {
                called = true;
                cb();
            }
        })
        .on('restart', function () {
            // サーバー再起動時
            setTimeout(function () {
                reload();
            }, 500);
        });
});

gulp.task('browser-sync', ['nodemon'], function () {
    browserSync.init(null, {
        proxy: 'http://localhost:3000',
        port: 7000
    });
});

gulp.task('default', ['browser-sync'], function () {
    // クライアント側のwatchタスクを記述

});
```

gulp関連モジュールインストール

```
$npm install gulp
$npm install gulp-nodemon
$npm install browser-sync
```

gulp実行

```
$gulp
```

今回はやっていませんがgulp.watchモジュールなどを使ってファイル変更監視を行い
cssやjs修正時にminifyさせるといった使い方もできます。


# サンプル
今までの含めて爆速コーディングしてみましょう。
ゼロから次のようなサーバから
JSONデータを返してもらうシンプルなサンプルを作ります。
デモのソースコードです。

クライアント側

```index.html
<!DOCTYPE html>
<html>

<head>
    <title>爆速コーディング</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">


    <script>
        window.onload = function (e) {
            // init
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:3000/api", true);
            xhr.onload = function (e) {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        var body = document.querySelector("body");
                        var div = document.createElement("div");
                        div.innerHTML = xhr.responseText;
                        body.appendChild(div);
                    } else {
                        console.error(xhr.statusText);
                    }
                }
            };
            xhr.onerror = function (e) {
                console.error(xhr.statusText);
            };
            xhr.send(null);


        };
    </script>

</head>

<body>
    <!-- tag -->

</body>

</html>
```

サーバ側

```app.js
var html = require('fs').readFileSync('index.html');
require('http').createServer(function (req, res) {
    var header = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Method": "GET",
        "Access-Control-Allow-Headers": "Content-Type"
    };

    if (req.url.indexOf('/api') != -1) {
        header["Content-Type"] = "application/json";
        res.writeHead(200, header);
        res.end(JSON.stringify({
            msg: "爆速コーディング"
        }));
    } else {
        header["Content-Type"] = "text/html";
        res.writeHead(200, header);
        res.end(html);
    }

}).listen(3000);
```

## デモ

![コーディング](https://raw.githubusercontent.com/teradonburi/coding/master/coding.gif)

サンプル一式は次のコマンドでダウンロード＆起動できます。

```
$git clone https://github.com/teradonburi/coding
$npm install
$gulp
```