コーディングをする上で多くの人がお世話になっている機能として、補完機能があげられます。
補完機能を活用することで、入力する文字を減らすことで省力化し、すでにある文字列を再利用することでタイプミスを減らすことができます。
最近のエディタであれば使える機能ですが、vimは複数の補完機能を使い分けることでより効率化できます。
ここでは、筆者が多用する補完機能をいくつか紹介します。

キーワード補完

画面内・ファイル内の文字列を補完します。
補完機能というと、このイメージになるかと思います。
vimでは以下のように入力することでキーワード補完が実行されます。

Ctrl + xを押下してからCtrl + p
※vimの設定ファイルにはなどと記述されることもあります。

辞書補完

ここから、他のエディタではあまり見られない補完になるのかなと思います。
辞書補完とは、別ファイルに定義した文字列を補完するというものです。
例えば、text.dictというファイルに以下のような入力があったとします。

abcdefghijkl
aaaabbbbcccc

ファイルを読みこみ、abcまで入力してから以下のコマンドを実行すると辞書補完を行います。

Ctrl + xを押下してからCtrl + k

abc → abcdefghijklまで補完される

この補完方法は頻繁に入力するキーワードを登録しておくという使いかたをすると、効果があります。

ファイルパス補完

ライブラリのインクルードを行うとき、以下の入力でパス指定の補完ができるようになります。

Ctrl + xを押下してからCtrl + f

パスの補完はWindowsのような c:\Users\xxxxのような形式も、Linuxの/home/user/xxxxのような両方のパス指定形式を意識せずに実行できるため、ファイルパスが思い出せないようであれば、気軽にを実行していいでしょう。

まとめ

vimには他にも便利な補完機能がありますが、ここではプログラム言語に依存しない、代表的なものを取り上げました。
プログラム言語ごとの補完や、補完の自動化などより便利に使う方法については、別の記事で紹介できればと思います！

様々な分野で活躍するエンジニアが在籍するソリューション事業部はこちら

●Wantedly掲載情報(本当にやりたいことに辿り着きたい技術大好きエンジニア募集！)

●Wantedly掲載情報(エンジニア想いの環境でJavaやPHPにチャレンジしたいエンジニア募集！)

●Wantedly掲載情報(Angular/Reactを極めたいフロントエンジニア大募集！！)

ブラウザが表示されないブラウザと聞いて、どのようなものが想像できるでしょうか？
とはいえ、ブラウザを使わないブラウザというのは昔からあったりします。
Unixの世界においてはw3mやlynxといったテキストのみで表現するテキストブラウザが存在します。
実際のところ、ヘッドレスブラウザもまたターミナルで通常のブラウザ同様のhttpやりとりを行います。
それではテキストブラウザと同じではないかという疑問もあるでしょうが、ヘッドレスブラウザと別の名前がついていることには意味があり、役割が異なります。

なにに使うのか？

ブラウザ操作を自動化することで効率化を図るE2E（End to End）テストを実施するなかで感じる欠点を、ヘッドレスブラウザは解消することができます。
欠点とは、E2Eテストは実際にブラウザを操作するため時間がかかるというものです。
テストを行う上で、サイトの表示を確認できるならば、必ずしもブラウザを起動する必要はありません。
httpのやりとりを行い、htmlの構造だけを取得＆テストできれば良いのです。
そこで登場したのが、画面描画を行わない、ブラウザの処理だけを行う軽快に動作するヘッドレスブラウザが登場しました。

Chrome DevTools Protocol

PhantomJsやCasperという、node.jsを使うヘッドレスブラウザがありますが（実際はseleniumと組み合わせて使用）、最近ではGoogle Chromeが公式にヘッドレスモードを搭載することで、こちらが使用されています。
Firefoxもヘッドレスモードが入っており、主要ブラウザがヘッドレスモードを搭載する流れになっています（そのためPhantomJsは開発終了のアナウンスが発表されています）。

まとめ

ユニットテストでコードのテストを完全にしても、ブラウザで動かしてみないと正しく動作するかはわかりません。
最終的は目視と手動でのブラウザテストが必要となりますが、普段からヘッドレスブラウザでのテストを自動化することによって普段のテストを効率化しましょう！

様々な分野で活躍するエンジニアが在籍するソリューション事業部はこちら

●Wantedly掲載情報(本当にやりたいことに辿り着きたい技術大好きエンジニア募集！)

●Wantedly掲載情報(エンジニア想いの環境でJavaやPHPにチャレンジしたいエンジニア募集！)

●Wantedly掲載情報(Angular/Reactを極めたいフロントエンジニア大募集！！)

前回の解説では、本当に基礎的な部分を扱いました。
今記事では、移動に焦点を当てて解説できればと思います。
ソフトウェア開発をする上で、IDEやエディタの操作をざっくり分類すると、文字を入力するか、カーソルで移動するか、コピーや削除など編集するかのいずれかになるでしょう。

カーソル移動（応用）

前回の記事で、上下左右の移動は編集モード時にhjklを使って移動するものと解説しました。
今回はvimの特製と合わせて紹介します。
vimの編集モードを入力する前に、数字を入力することができます。
なんの役に立つのか？　という疑問は当然です。
例としては以下のように使用します。

10j → 10行下に移動
10l → 10文字左に移動

このような操作に慣れると、矢印キーを押しっぱなしにして移動するよりもずっとスムーズに移動できるようになります。
ここでのポイントは複数文字の移動よりも、数字の部分です。
数字＋操作の組み合わせは移動操作に限らず、vimの編集操作全般に活用できますので、ぜひ覚えておきましょう。

単語移動

単語単位移動と言われてもぴんとこないかもしれません。
例えば、I have a pen.というテキストがあったとき、単語移動をすると以下のように移動できます。

※以下の文章において * をカーソル位置とします。

I * have a pen.
　↓単語移動
I have * a pen.
　↓単語移動
I have a * pen.
　↓単語移動
I have a pen * .

キーボードの矢印キーを連打するよりもずっと効率的に移動することができますね。

単語移動操作、実はWindowsでも可能です。
Ctrl + →で、右方向に単語移動ができます。メモ帳でもできるので、お試しください。

vimの場合は、編集モードのとき以下の入力で可能です。

w : 右方向に単語移動
b : 左方向に単語移動
e : 右方向に単語移動（単語の末尾へ移動）
ge : 左方向に単語移動（単語の末尾へ移動）

もちろんカーソル移動と同様に4wで4単語分右方向へ移動といったこともできます。
vimを使う人は普段、10jや4wといった一気に移動できる操作で「おおまかに移動」してから、hjklで移動先へ微調整するという操作をしています（vimを使っている人の画面を見せてもらうと、だいたいそうでした）。

行単位移動

これはvim特有の移動方法になります（他の主要エディタで使えるのを見たことがないため）。
例として、以下のようなテキストがあったとします。

* I like vim editor.

行頭にカーソルがあるとして、 fv と入力すると

I like * vim editor.

最初にvがある場所まで一気に移動します。
この操作法に慣れると、上記の単語移動よりも正確に狙った場所へ移動し、すぐ編集ができるようになります。
逆方向に移動する場合は Fl と入力すると、

I * like vim editor.

左方向に移動します。

まとめ

他にも便利な移動方法は複数ありますが、今回はすぐ使えそうなものを選んで紹介してみました。
vimは学習コストが高く、使いこなすまでに時間がかかるかもしれませんが、投資した時間に見合うリターンのある（と信じている）エディターなので、この記事を機に触ってみてはいかがでしょうか？

様々な分野で活躍するエンジニアが在籍するソリューション事業部はこちら

●Wantedly掲載情報(本当にやりたいことに辿り着きたい技術大好きエンジニア募集！)

●Wantedly掲載情報(エンジニア想いの環境でJavaやPHPにチャレンジしたいエンジニア募集！)

●Wantedly掲載情報(Angular/Reactを極めたいフロントエンジニア大募集！！)

以前記載したVagrantの記事より、Vagrantを使うことで開発環境構築の効率化をすることができるようになりましたが、面倒なアプリケーションのインストールや設定が必要であるという問題が残ったままであることを示しました。

今回はアプリケーションのインストール・設定を解決する方法として、プロビジョニングツールの紹介をします。

プロビジョニングツールとは

OSへのアプリケーションインストール・設定を自動化するツールとイメージしてもらえれば問題ありません。

大きな特徴としては、設定内容をコードとして表現できるところです。
Infrastructure as a codeという言葉をご存じでしょうか。
インフラ（開発基盤となるOSやミドルウェアの設定等）をコードで表現することで、何度でも、自動的に環境構築ができるというものです。

プロビジョニングツールにはChefやAnsibleなど代表的なものがありますが、今回はそのなかでもシンプルに使えるMItamaeを紹介します。

MItamaeとは

実はMItamaeにはitamaeという前身があります。
itamaeはクックパッドで開発・利用されているプロビジョニングツールで、MItamaeはitamaeのフォーク版となります。
実際のところ、itamaeとMItamaeは使用方法はまったく同じです（同じになるよう開発されている）。

では、どこが違うのでしょうか？

itamaeはrubyで開発されており、動作させるために複数のライブラリのインストールが必要なのに対して、MItamaeは１つの実行ファイルのみで依存ライブラリが必要ないところです。
面倒な事前準備なしにMItamaeのファイルと設定ファイルのみで良いので、見通しが良くなります。

どのように使うのか？

MItamaeはmrubyで記述されており、設定もrubyぽく記述できます。
例として、パッケージ管理システムからライブラリをインストールする例を紹介します。

execute “update yum” do
user “root”
command “yum -y update”
end

%w[gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel git libtool autoconf automake cmake gcc-c++ make pkgconfig unzip texinfo libevent-devel].each do |pkg|
package “#{pkg}” do
user “root”
action :install
end
end

……いきなり面倒そうなコードが出てきてとまどうかもしれませんね。
こちらをrecipe.rbというファイルに保存して、以下のコマンドを実行すると、CentOSのパッケージ管理システムであるyumでのライブラリアップデート、指定したライブラリの新規インストールが実行されます。

MItamae local recipe.rb

上記の要領で、必要な設定すべてをコードとして記述すれば、Vagrantをインストールし、仮想マシンでMItamaeを実行すれば開発環境の構築が完了します。

まとめ

前回のVagrantの紹介と合わせて、開発環境構築の自動化という切り口でMItamaeを紹介しました。
面倒な作業は自動化して、開発に集中できるようにしていきましょう！

最先端技術を扱うエンジニアが在籍するソリューション事業部はこちら

●Wantedly掲載情報(本当にやりたいことに辿り着きたい技術大好きエンジニア募集！)

●Wantedly掲載情報(エンジニア想いの環境でJavaやPHPにチャレンジしたいエンジニア募集！)

●Wantedly掲載情報(Angular/Reactを極めたいフロントエンジニア大募集！！)