読者です 読者をやめる 読者になる 読者になる

ぺーぺーSEのブログ

備忘録・メモ用サイト。

Git入門

Git Github

Gitのメモ。

環境構築

GitHubのアカウントを作成

下記でGitHubのアカウントを作成。

Gitクライアント環境の作成

Windowsへのインストール

Macへのインストール

以下を参照。

blog.pepese.com

Gitクライアント設定

  • ユーザ名とメールアドレスを登録( コミットログに残るユーザ名なので必ず設定する!
    • git config --global user.name "hoge"
    • git config --global user.email "hoge@email.sample.com"
  • プロキシがある環境の場合は下記を叩く
    • git config --global http.proxy http://[FQDN]:[PORT]
    • git config --global https.proxy http://proxy.example.com:8080
  • プロキシがある環境の場合は下記を叩く(ID、Passwordが必要な場合)
    • git config --global http.proxy http://[ID]:[Password]@[FQDN]:[PORT]
    • git config --global https.proxy http://[ID]:[Password]@[FQDN]:[PORT]
  • プロキシがある環境の場合は下記を叩く
    • git config --global url."https://".insteadOf git://
    • これでgitスキームを使えるようになる
  • Windowsのgitではデフォルトで改行コードがCR+LFへ変換されてしまうのでオフにする
    • git config --global core.autocrlf false
  • 設定が反映されていることを確認 git config --global -l

グローバル設定ではなく、単一Gitプロジェクトにのみ反映させたい場合は、 --global を外してコマンドを打つ。

core.symlinks=false
core.autocrlf=true
color.diff=auto
color.status=auto
color.branch=auto
color.interactive=true
pack.packsizelimit=2g
help.format=html
http.sslcainfo=/bin/curl-ca-bundle.crt
sendemail.smtpserver=/bin/msmtp.exe
diff.astextplain.textconv=astextplain
rebase.autosquash=true
http.proxy=http://[ID]:[Password]@proxy.example.com:8080
https.proxy=http://[ID]:[Password]@proxy.example.com:8080
url.https://.insteadof=git://

使い方

リモートリポジトリを作って、ローカルリポジトリにコピーして編集して更新するパターン

  1. リモートリポジトリをローカルリポジトリへコピー(clone)
  2. GitHub用のローカルリポジトリ領域を作成してカレントを移動
    • cd /d C:\Git\GitHub
  3. リモートリポジトリ(GitHub)をローカルリポジトリへコピー(初回のみ)
    • git clone https://github.com/pepese/Sample.git
    • C:\Git\GitHub\Sample」と「C:\Git\GitHub\Sample\.git ができる
  4. ローカルリポジトリへファイルを登録(add/commit)
  5. コピーしたローカルリポジトリへ移動
    • cd /d C:\Git\GitHub\Sample
  6. ファイルを作成
    • touch sample.txt
      • C:\Git\GitHub\Sample\sample.txt
    • このままだとファイルを作っただけでまだローカルリポジトリへは反映されていない
  7. ステージング領域へ反映
    • git add sample.txt
    • 全ての変更ファイルをaddしたい場合は git add --all
  8. ローカルリポジトリへコミット
    • git commit
    • Vimが起動してコミットコメントを求められるので適当に編集
    • コメント付きでコミットする場合は下記
      • git commit -m "コミットコメント"
  9. ローカルリポジトリの内容をリモートリポジトリへ反映(push)
  10. ローカルリポジトリの内容をリモートリポジトリ(GitHubのMasterブランチ)へ反映
    • git push origin master
  11. 確認
  12. ファイルを更新する
  13. 下記のファイルをエディタで更新
    • C:\Git\GitHub\Sample\sample.txt
  14. ステージング領域へ反映
    • git add sample.txt
  15. ローカルリポジトリへコミット
    • git commit
  16. ローカルリポジトリの内容をリモートリポジトリ(GitHub)へ反映
    • git push origin master
    • GitHubアカウントのIDとPasswordを求められるので入力
  17. 確認

ローカルリポジトリを作ってリモートリポジトリへ反映するパターン

リモートリポジトリが存在している前提で。

  • cd /d C:\Git\GitHub
  • mkdir Sample2
  • cd Sample2
  • git init
  • git remote add origin https://github.com/pepese/Sample2.git
    • リポジトリの参照先(origin)の設定
    • もちろんGithub上にあらかじめリポジトリを作成しておく必要がある
  • touch sample2.txt
  • git add sample2.txt
  • git commit
  • git push origin master

ブランチの作成からPull Request完了まで

$ git branch <branchname>

<branchname> を指定せずに実行すると現在のブランチ(*がついてる)が確認できる。
また、ブランチの切り替えは以下。

$ git checkout <branchname>

一連の流れは以下。

$ git branch issue1
$ git branch
  issues1
* master
$ git checkout issue1
$ git branch
* issues1
  master

Pull Requestマージ後の作業。

$ git checkout master
$ git branch -d issue1      #ローカルブランチの削除
$ git push origin issue1   #リモートブランチの削除

ファイルの変更を戻す

以下でコミットログのハッシュ値を取得。

git log [ファイルパス]

以下でコミットのハッシュ値を指定して戻す。

$ git checkout [コミット番号] [ファイルパス]

特定のコミットをマージする

以下でリモートリポジトリの変更をローカルリポジトリへ持ってくる。(ワーキングディレクトリの変更は行われない)

$ git fetch

コミットログのハッシュ値を指定してマージする。

$ git cherry-pick [ハッシュ値]

ブランチをマージする

issue1ブランチにmasterをマージしたい場合。

$ git checkout issue1
$ git merge master

ファイル、ディレクトリをgitの管理対象から外す

ファイルをgitの管理対象から外して且削除

$ git rm [削除したいファイル]

ファイルをgitの管理対象から外すがファイルを削除しない

$ git rm —-cached [削除したいファイル]

ディレクトリをgitの管理対象から外して且削除

$ git rm -r [削除したいディレクトリ]

もうちょっと知りたい人は以下を参照。

blog.pepese.com

JenkinsでMavenレポートを出力する

JenkinsでMavenレポートを出力する。

MavenとJenkinsを使ってJavaのレポート出力をやってみた。
下記を読んだテイで書く。

blog.pepese.com

Maven

mvn clean test site をたたいてHTML形式のレポートを出力する親POMを下記に作った。

親POM

※2017年2月17日時点での最新バージョンにしている。
javancss-maven-plugin はJava8未対応だったためコメントアウト。

プラグインの概要

reporting タグの部分だけ記載する。

  • org.apache.maven.plugins:maven-site-plugin
    • mvn site コマンドの実装
    • 以下の「Project Information」を出力する
      • Dependencies :依存ライブラリの一覧
      • Dependency Convergence :同一依存ライブラリの全てのバージョンを集約して表示
      • Dependency Information :このプロジェクトの依存の書き方
      • Dependency Management :最終的に適用される依存ライブラリの一覧
      • Distribution Management :配布するリポジトリの情報
      • About :POMのdescriptionの記載
      • Plugin Management :最終的に適用されるプラグインの一覧
      • Project Plugins :buildおよびreportingに使用されるプラグインの一覧
      • Project Summary :プロジェクト情報のサマリ
  • org.apache.maven.plugins:maven-javadoc-plugin
    • Project Reports の「JavaDocs」および「Test JavaDocs」を出力する
  • org.apache.maven.plugins:maven-surefire-report-plugin
    • Project Reports の「Surefire Report」を出力する
      • テストの件数、エラー数、失敗数等を出力する
  • org.apache.maven.plugins:maven-jxr-plugin
    • Project Reports の「Source Xref」および「Test Source Xref」を出力する
      • JavaソースコードをHTML形式で出力する
  • org.apache.maven.plugins:maven-pmd-plugin
    • Project Reports の「PMD」を出力する
      • PMDはJavaコードを分析して潜在的なバグを探すツール
  • org.apache.maven.plugins:javancss-maven-plugin
    • Project Reports の「JavaNCSS」を出力する
      • JavaNCSSはJavaコードの品質や複雑度に関するメトリクスを出力する
  • org.jacoco:jacoco-maven-plugin
    • Project Reports の「JaCoCo」を出力する
      • JaCoCo による単体試験のカバレッジ測定結果
  • org.apache.maven.plugins:maven-checkstyle-plugin
    • Project Reports の「Checkstyle」を出力する
  • org.codehaus.mojo:findbugs-maven-plugin
    • Project Reports の「FindBugs」を出力する
  • org.apache.maven.plugins:maven-project-info-reports-plugin
    • プロジェクトの情報を出力する
      • cim、help、issue-tracking、license等

以上の情報がHTML形式で target/site 配下へ出力される。

testFailureIgnore について

親POMのbuild⇒plugins⇒pluginのmaven-surefire-pluginの設定で testFailureIgnoretrue にするとテストでコケてもレポート出力するようになる。
と、同時に mvn test でコケてもSUCCESS となってしまう。
こうなってくると、Jenkinsで DailyTestで失敗しても気づかない ことになってしまう。
なので、 testFailureIgnore はPOMで設定せず、以下のようにするといい。

  • JenkinsによるDailyTest
    • mvn test -Dmaven.test.failure.ignore=false
      • これでテストでコケたら FAILURE になる(ちなみにデフォルトfalse)
  • Jenkinsによるレポート出力
    • mvn clean test site -Dmaven.test.failure.ignore=true
      • これでテストでコケても SUCCESS になり、レポートが出力される

Jenkins

Jenkinsのジョブで mvn clean test site をした後、Jenkinsの HTML Publisher Plugin で下記のように設定すればJenkinsのジョブのページにSiteで出力したレポートへのリンクが作成される。

  • Publish HTML reports :チェックボックスをオン
    • HTML directory to archive
      • 例) target/site/
    • Index page[s]
      • 例) index.html
    • Report title
      • 例) HTML Report

レポートの表示が崩れている(CSS/JSが適用されていない様子)場合は下記を参照。

blog.pepese.com

また、今回Mavenで出力しなかったJavaコード解析情報について、下記のJenkinsプラグインを使用するとカバーできる。

  • DRY Plugin
    • コピペコードのような重複したコードをチェックしてくれる
  • Task Scanner Plugin
    • ソースコードを任意の文字列で検索するチェックをかけることができる
      • FIXME、TODO、XXX、deprecated、System.out.printlnとかスキャンしてくれる
  • Warnings Plugin
    • コンパイラの警告をチェックしてくれる
  • Step Counter Plugin
    • ファイル行数をカウントしてくれる

Express入門

Express.js Node.js JavaScript npm

Node.jsのWebフレームワーク Express 触ってみた。
下記の記事を読んだテイで書く。

blog.pepese.com

インストール

Expressのインストール

$ npm install express --save

Express単体を入れる時はこれ。
以降の説明は express-generator を使うので上記はやらなくていい。

express-generatorのインストール

express-generator は Expressベースのアプリ雛形を作成するツール。
RailsのScaffoldのようなもの。

$ npm install -g express-generator
$ ndenv rehash # ndenvを使っている人は

サンプルアプリの作成

以下の順で記載する。

  • express-generatorの使い方
  • express-generatorで雛形作成
  • ディレクトリ構造
  • 実行と確認
  • コードを見てみる

express-generatorの使い方

$ express --help

  Usage: express [options] [dir]

  Options:

    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

express-generatorで雛形作成

ExpressのデフォルトのView Template Engine は Jade だが、 Jadeは Pug にリネームされた。
今後、ExpressのデフォルトのView Template EngineはPugに置き換えられるため、ここでは Pug を使用する。

$ express express-sample --view=pug --git

   create : express-sample
   create : express-sample/package.json
   create : express-sample/app.js
   create : express-sample/.gitignore
   create : express-sample/public
   create : express-sample/public/javascripts
   create : express-sample/public/stylesheets
   create : express-sample/public/stylesheets/style.css
   create : express-sample/public/images
   create : express-sample/routes
   create : express-sample/routes/index.js
   create : express-sample/routes/users.js
   create : express-sample/views
   create : express-sample/views/index.pug
   create : express-sample/views/layout.pug
   create : express-sample/views/error.pug
   create : express-sample/bin
   create : express-sample/bin/www

   install dependencies:
     $ cd express-sample && npm install

   run the app:
     $ DEBUG=express-sample:* npm start

$ cd express-sample/
$ npm install

express <プロジェクト名> コマンドでExpressの雛形プロジェクトが作成される。
npmのpackage.jsonが作成されているので「npm install」でモジュールをインストールする。
npm start コマンド(package.jsonにて定義)で node ./bin/www が実行され、サービスが起動する。
「./bin/www」には、Express.jsでHTTPサービス(3000番ポート)が起動するJavaScriptがコーディングされており、「app.js」に記述されたサービスが実行される。

ディレクトリ構造

$ tree
.
├── app.js           # メインJavaScript
├── bin/             # サービス起動JavaScript(www)置き場
├── node_modules/    # npmモジュール置き場
├── package.json
├── public/          # 公開ディレクトリ
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
├── routes/          # ルーティング先のスクリプト置き場(MVCのCとロジックに相当)
│   ├── index.js
│   └── users.js
└── views/           # View用のコード置き場(MVCのVに相当)
    ├── error.pug
    ├── index.pug
    └── layout.pug

実行と確認

# 実行
$ npm start
# 確認
$ curl localhost:3000
<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body><h1>Express</h1><p>Welcome to Express</p></body></html>
$ curl localhost:3000/users
respond with a resource

コードを見てみる

app.js

  • 各種ライブラリのロード( var xxx = require('xxx');
  • ルーティング先コントローラ層ロジックのロード( var xxx = require('./routes/xxx');
  • Express本体オブジェクトの作成と設定( var app = express();
    • View Template Engine( Pug ) の設定
    • ロガー、パーサー、公開ディレクトリの設定
    • ルーティン部先ロジックの設定( app.use('/xxx', xxx);
    • エラーハンドリングの設定

index.js

users.js

Node.js(npm)入門

Node.js JavaScript npm

Node.js(npm)についてまとめる。

npm(Node Packege Manager)は、Node.js用のパッケージ管理コマンド。
JavaScriptエコシステムツール・ライブラリはnpmで導入できるものが多い。
npmはNode.jsと同時にインストールされるので、Node.jsを入れておけばいい。
また、Node.jsはJavaScriptの実行エンジン。

ちなみにここでNode.jsのES6対応状況がわかる。
v7.5.0で 99% カバーしている。

インストール

Node.jsのインストール方法は以下の「anyenv」を参照。

blog.pepese.com

プロキシの設定が必要な場合は以下。

$ npm config set proxy http://<username>:<password>@<proxy-host>:<proxy-port>
$ npm config set https-proxy http://<username>:<password>@<proxy-host>:<proxy-port>

ndenv

上記の手順でNode.jsを導入した場合、Node.jsのバージョンを ndenv でコントロールする。

$ ndenv install -l # インストールできるNode.jsのバージョン確認
$ ndenv install v7.5.0 # バージョンを指定してインストール
$ ndenv versions # インストールされたことを確認
$ ndenv global v7.5.0 # バージョンを切り替え
$ ndenv local v7.5.0 # 今いるプロジェクトだけバージョンを指定したい場合はこっち
$ node -v # 確認

npmの使い方

公式ドキュメントはここ

プロジェクトの作成

任意のディレクトリを作成して npm init を実行すると package.json が作成され、プロジェクトとなる。
いろいろ聞かれるが、全部Enterで問題無い。あとで変更可能。

$ mkdir nodejs-sample
$ cd nodejs-sample
$ npm init

package.json はMavenでいう pom.xml みたいなもの。(Javaの人向けでごめん)

パッケージのインストール

グローバルインストール

npm install -g <package_name>@<version> でパッケージのインストールが可能。
-g オプションがついてるのがポイント。
アンインストールは npm uninstall -g <package_name>
インストールパッケージ一覧の確認は npm list -g

インストール先は以下で確認できる。

# グローバルインストール先のディレクトリ
$ npm root -g

# グローバルインストール先の、コマンドディレクトリ
$ npm bin -g

ローカルインストール

npm install <option> <package_name>@<version> でパッケージのインストールが可能。
インストールしたパッケージは package.json に追記され、 node_modules/ 配下に配備される。
オプションは以下の通り。

  • --save-S
    • package.jsondependencies に追記される
    • npm install --production した時に mode_modules/ に配備される
    • 開発したソフトウェアを動かすのに必要な依存ライブラリ
  • --save-dev-D
    • package.jsondevDependencies に追記される
    • npm install --dev した時に mode_modules/ に配備される
    • ソフトウェアを開発する際に必要になるツール・ライブラリ
  • --save-optional-O
    • package.jsonoptionalDependencies に追記される
    • npm install した時に mode_modules/ に配備される(失敗してもスルーされる)

デフォルト設定の場合、 npm install (オプション無)すると、 dependenciesdevDependenciesoptionalDependencies の全てがインストールされる。
アンインストールは npm uninstall <package_name>
インストールパッケージ一覧の確認は npm list

パッケージの使い方

npmで導入したJavaScriptライブラリ( node_modules/ 配下にある)は、JavaScriptのソースコードからほぼ以下の形式で呼び出すことができる。

var req = require('request')

上記は request モジュールを呼び出して req 変数へ代入している例。

npmスクリプト

package.jsonscripts にスクリプトを登録することにより簡易に実行することができる。
例えば以下。

"scripts": {
  "test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/",
  "test-ci": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --require test/support/env --reporter spec --check-leaks test/ test/acceptance/",
  "test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
  "test-tap": "mocha --require test/support/env --reporter tap --check-leaks test/ test/acceptance/"
  }

上記のようにスクリプトを定義することにより npm testnpm test-ci といった具合で登録したスクリプトを実行することができる。

Node.jsの使い方

Node.jsのAPIリファレンスはここ

シンプルに動かしてみる

まず、Node.jsをJavaScriptエンジンとしてシンプルに動かしてみる。

■hello.js

■main.js

上記JSファイルを作成して下記を実行。

$ node main.js
Hello World !

node <JSファイル> コマンドで実行できる。

HTTPサーバ

Node.jsでHTTPサービスを立ち上げてみる。

■app.js

下記を実行してブラウザで http://127.0.0.1:1337/ へアクセスすると「Hello World !」と表示される。

$ node app.js

Ctr+C でサービスを停止できる。
この方法でHTTPサービスを起動した場合、ロジックでエラーが発生するとプロセスが終了する。
エラーが発生してもプロセスが終了しないようにする方法の1つとして forever の導入がある。

■foreverのインストール、起動、停止

$ npm install -g forever
$ forever start app.js
$ forever stop app.js

Node.jsに関する話題

Spring BootでJUnitテスト

Java Spring SpringBoot JUnit Maven

Spring Bootのテストについて書く。
spring-boot-starter-testを使用するとコントローラのJUnitテストも可能になる。
テストやコードインスペクションレポートのMaven設定は以下を参照。

blog.pepese.com

テスト対象アプリ

以下の記事で紹介した入門アプリをテスト対象とする。

blog.pepese.com

テストの作成

以下を作成する。

  • com.pepese.sample.service.HelloServiceTest
    • コントローラへDIされるサービスクラスのテスト
  • com.pepese.sample.controller.HelloControllerTest
    • コントローラのテスト

サービスのテスト(com.pepese.sample.service.HelloServiceTest)

ポイントは以下。

  • @RunWith(SpringRunner.class) アノテーション
    • Spring BootでJUnitテストするときはコレをつける
  • @SpringBootTest アノテーション
    • SpringのJava/XML Based Configurationなどの設定を読み込んでくれる

Springの設定(Java/XML Based Configuration)を読み込んでいるのでDIでテスト対象のインスタンスを取得できる。

コントローラのテスト(com.pepese.sample.controller.HelloControllerTest)

ポイントは以下。

  • @AutoConfigureMockMvc アノテーションをつけるとコントローラ層のモック( MockMvc )を作成でき、これでコントローラのJUnitテストが可能になる
    • @WebMvcTest(HelloController.class) としてコントローラクラスを指定することもできる
  • @MockBean でコントローラ内でDIされるモジュールのモック(Mockito)を作成できる
  • when メソッド等(Mockito)を使用してコントローラ内にDIされたモジュールの挙動を指定できる
  • HamcrestのMatchersを使用してassertする

テストの実行

基本的には mvn test で実行可能だが、特定のクラスを指定してテストしたい場合は mvn clean test -Dtest=*.HelloControllerTest のように指定して実行できる(正規表現の指定可能)。
また、 mvn clean test -Dtest=*.HelloControllerTest,*HelloServiceTest のようにカンマ区切りで複数指定することもできる。

webpack + Babel 入門

webpack Babel JavaScript

webpack + Babel で ES6(ECMAScript 2015)をトランスパイルしてブラウザで動くまでをまとめる。
以降を記載する。

  • サンプルが動くまで
    • サンプルが動くまでの手順
  • 説明
    • 上記の手順の説明

サンプルが動くまで

ブラウザに「Hello World !」とポップアップが出るサンプルを作成する。

前提

$ npm -v
4.0.2

プロジェクトの作成

$ mkdir es6-sample
$ cd es6-sample
$ npm init -y
$ npm install --save-dev \
      webpack \
      babel-cli \
      babel-core \
      babel-preset-env \
      babel-preset-es2015 \
      babel-polyfill \
      babel-loader \
      webpack-dev-server
$ mkdir src; touch src/app.js
$ mkdir dist; touch dist/index.html
$ touch webpack.config.js
$ touch .babelrc

トランスパイル後のディレクトリ構造は以下のようになる。

$ tree -a -I 'node_modules'
.
├── .babelrc
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.map
│   └── index.html
├── package.json
├── src
│   └── app.js
└── webpack.config.js

以降、各ファイルの内容を記載する。

package.json

npm run build でES6のトランスパイル、npm run start で簡易Webサーバが起動する。

.babelrc

ここでトランスパイル対象の種類を指定する。

webpack.config.js

webpackの設定ファイル。
npm run build でES6のトランスパイル、npm run start で簡易Webサーバが起動するように package.json にスクリプトを設定している。

index.html

トランスパイル後のJSコードをロードしている。

app.js

実行方法

  1. npm run build でトランスパイル
  2. npm run start で簡易Webサーバの起動
  3. http://localhost:8080/webpack-dev-server/ へブラウザでアクセス
  4. 「Hello World !」とポップアップが出れば成功

説明

Babelのインストール

npm install --save-dev babel babel-preset-es2015

babel はトランスパイラだが、これだけだとまだ何をトランスパイルするのか分からない。
babel-preset-es2015 を入れるとES6をトランスパイルできるようになる。
Babelは .babelrc というファイルがあると、その設定を読み込んでくれる。

Babel6での変更?

Babel5からBabel6で babelbabel-corebabel-cli に分割された模様。
CLIを使用しないのであれば、 babel-core だけでいい。

.babelrc

トラインスパイルする内容を指定する場合、以下のように プリセット(presets) を指定する。

{
  "presets": [es2015", "react"]
}

babel-preset-2015babel-preset-react を使用する場合は上記のように指定する。

Polyfill

$ npm install --save-dev babel-polyfill

Babelでトランスパイルすると古いブラウザでも動作する Javascript(ES5) を出力するが、古いブラウザのブラウザオブジェクトの中には標準オブジェクト(ES6で記述できるブラウザオブジェクトの扱い方)に対応していないものがある。
babel-polyfill を利用すると、古いブラウザでも動くように標準オブジェクトを拡張してくれる。
ちなみに、古いブラウザーに欠けている部分、新しいブラウザーでも足りない機能の穴を埋めることを、 ポリフィル (polyfill) という。

標準オブジェクトを拡張すると、既存の環境と互換性を失うことになるため、別ライブラリ babel-polyfill に分かれている。

babel-polyfill の他に babel-runtime というのがある。
babel-polyfill が標準オブジェクトを拡張するのに対して、 babel-runtime は標準オブジェクトの対応していない機能を、その場で別のコードにトランスパイルして解決する。
babel-polyfill を導入しているほうが多そうな肌感。

その他のBabelプラグイン

  • babel-preset-env
    • compat-tableを用いて、サポートされている環境に基づいて必要なBabelプラグインを自動で決定するライブラリ
  • babel-loader
    • webpackからbabelを使用できるようにするやつ
  • babel-preset-react
    • Reactをトランスパイルするプリセット
  • babel-preset-stage-0
    • ECMAScriptのステージを指定できる
    • ステージについては後述
  • bable-register
    • 通常のwebpackの設定ファイルは webpack.config.js というファイルだが、 webpack.config.babel.js というファイル名でES6で書けるようになる

ステージ(stage)

BabelはECMAScript2015 (ES6), ECMAScript7をECMAScript5に変換するが、ECMAScript2015 (ES6), ECMAScript7の仕様でもまだ議論中のものもある。
そこで、ECMAScriptの中でもまだ議論しきれていない仕様に関しては、stageという概念を使って安定度を示している。
初期値は2が指定されており、Draft版のものが使用できる。
基本的には初期値で問題無いが、それ以上のものを使いたい場合はリスクを加味して使用すること。
ステージは以下がある。

stage description
0 Strawman - アイデア
1 Proposal - 提案
2 Draft - ドラフト
3 Candidate- 仕様書と同じ形式
4 Finished - 策定完了

sourceMaps

トラインスパイル前後のコードをマッピングする。
デバッグなどする際、エラー箇所がトランスパイル前のコードのどこに対応するのかがわかるようになる。

webpack

webpackは、複数のファイルの依存関係を顧慮してビルドを行うツール。
設定ファイルは webpack.config.js

  • entry でトランスパイル対象を指定して、output で出力先を指定する。
  • Loaderという仕組みがあり、これでES6やReactをコンパイルできる。
  • Pluginという仕組みがあり、これでUglifyなど圧縮処理などができる。PluginはLoaderの前後で実行される。
  • WebpackDevServerという確認用簡易Webサーバがある。

Sublime Text 3のインストールとパッケージの導入

エディタ Sublime Text

インストール

公式から「portable version」を入手して展開するだけ。
(Windowsではportable versionでないとプロキシ環境下で何故か動かなかった)
MacユーザはHomebrewを使用して以下のようにインストール。

$ brew cask install sublime-text

Homebrewについては以下を参照。

blog.pepese.com

起動方法

アイコンクリックでもいいがコマンドラインで起動できる。

$ subl file

プロジェクト(カレントディレクトリ)で起動したい場合は以下。

$ subl .

Package Controlのインストール

パッケージの検索・インストールを簡単にしてくれる。
「View」→「Show Console」からコンソールを起動。
下記を実行。

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

プロキシ環境の場合は下記を実行。

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler({"http": "http://[username]:[password]@[proxy_server]:[port]", "https": "https://[username]:[password]@[proxy_server]:[port]"})) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

「[username]:[password]@[proxy_server]:[port]」の箇所はプロキシ環境に合わせて書き換える。
また、最新のインストールコマンドは公式を参照。
 
その他、以降のオペレーションなどでプロキシ関係でうまくいかないときは、

  • 「Preferences」→「Package Settings」→「Package Controll」→「Settings-User」

を選択して、 Package Control.sublime-settings ファイルを開き、編集する。

{
  "http_proxy": "プロキシサーバのアドレス:ポート番号",
  "https_proxy": "プロキシサーバのアドレス:ポート番号",
  "proxy_username": "プロキシのユーザ名",
  "proxy_password": "プロキスのパスワード"
}

その他設定はここを参照。(※プロキシの設定とか)

日本語化

Japanize というパッケージを導入する。

  • 「Preferences」→「Package Control」を選択( Command + Shift + P
  • 「Package Control: Install Package」を選択
  • 「Japanize」を選択
  • 「Package Control Message」の内容に従う

Macユーザは以下の手順で。

  1. ~/Library/Application Support/Sublime Text 3/Packages/Japanize にインストールされている*.jpファイルを、以下にコピー。
  2. ~/Library/Application Support/Sublime Text 3/Packages/Default
  3. Defaultフォルダがない場合は自分で作成
  4. コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換える。
  5. ~/Library/Application Support/Sublime Text 3/Packages/Japanize/Main.sublime-menu(.jpが付かない方)を、以下にコピー。
  6. ~/Library/Application Support/Sublime Text 3/Packages/User
  7. すると、他のプラグインで上書きされてしまっているトップメニューも日本語化される。

カスタマイズ

テーマの変更

  • 「Package Control: Install Package」で使用したいテーマを検索してインストール
  • 「Preferences」→「Settings」を選択して Preferences.sublime-settingsーUser ファイルを開く
  • 設定ファイルに各テーマ用のコードを記述・保存

ググって好きなテーマを探す。
筆者はMaterial Themeをインストールして以下の設定を行った。

{
  "theme": "Material-Theme-Darker.sublime-theme",
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme"
}

インデントの変更

  • 「Preferences」→「Settings - User」を選択して設定ファイルを開く
  • 「"tab_size": 2」(タブサイズが2)を追記
  • 「"translate_tabs_to_spaces": true」(タブをスペースに変換)を追記して保存

その他

基本には

  • 「Package Control: Install Package」( Command + Shift + P してInstall Package)
  • 好きなパッケージを入力・インストール

でパッケージをインストールできる。
プログラマな人は下記のパッケージ辺りを入れておくといいかも。

  • AdvancedNewFile
    • Option + Command + N で新規ファイルを作成できる
  • All Autocomplete
    • コード補完を補強するパッケージ
  • SublimeLinter
    • 下記の「SublimeLinter-XX」を使うためのフレームワーク
  • SublimeLinter-XX
    • リアルタイムに構文チェック
    • XXの部分に任意の文字が入っていろんな種類がある
  • BracketHighlighter
    • []、()、{}、””、”、などの開始、終了をハイライトしてくれるパッケージ
  • GitGutter
    • Git管理してるファイルを編集すると「+ -」で行番号のとこに表示
  • SideBarEnhancements
    • サイドバーのファイル/フォルダ操作を拡張
  • ConvertToUTF8
    • UTF-8以外の文字コードのファイルをUTF-8にしてくれる
  • SublimeCodeIntel
    • 補完機能を強化、Tabによるコード補完補完
  • BoundKeys
    • 複雑になったショートカットキーを確認できるパッケージ

便利機能

  • ショートカット
  • スニペット
    • 少しのキーボード入力をトリガーとして、よく利用するコードなどを手軽に書き込むことができる機能
  • キーバインド
  • [画面分割]
    • Alt + Shift + N で好きな画面の個数に分割できる。(Nは好きな数)
    • 変則的に分割したい場合はここ