エンジニアの仕事に必要な開発環境を構築するのは、とても手間がかかります。
各種アプリケーションをインストールしたものの、他の環境では動いたのに自分のPCだと動かない、設定し終えてもバックアップが大変、複数プロジェクトを並行作業すると設定が複雑になってしまう……、いろいろな問題が発生することがあります。

上記のタイトルはエンジニアをしていると、１度は聴いたことのあるかもしれないフレーズですが、これは矛盾しているようである意味の真理です。
同じことを繰り返さない、繰り返さなければならないならば自動化する——そうしなければ本来集中すべき内容に手をつけられないためです。

では、どのようにすれば良いのでしょうか？

仮想環境を効率的に構築するためのVagrant

今記事においては解決策の１つとして、Vagrantを紹介します。
Vgrantとは、仮想環境を効率的に構築するためのソフトウエアです。
WindowsやMacといったOSのなかに、さらにOSをインストールするイメージとなります。

Vagrantの利点

Vagrantを使うことで、上記の問題を解決することができるようになります。

他の環境では動いたのに自分のPCだと動かない
→
動作が保証された環境を構築、配布することで、どのMacやWindowsを問わずに同じ環境を用意できる。

バックアップが大変
→
Vagrantは設定が１つのファイルにまとまっており、復元が簡単。

複数プロジェクトを並行作業すると設定が複雑に
→
プロジェクトごとにVagrantを用意することで、余計なツールが入らない安定した環境を使用できる。

Vagrantのインストール手順

注：この記事では仮想環境としてLinux（CentOS7.4）を構築するものとします

実際にVagrantをインストールするには、以下サイトからインストーラーをダウンロードして実行します。
Vagrantと合わせて、仮想環境を構築するためにVirtualBoxもインストールしてください。
Windows, Mac, Linux版それぞれ実行ファイルが用意されておりますので、環境に合わせてください。

http://www.vagrantup.com/
http://www.oracle.com/technetwork/jp/server-storage/virtualbox/downloads/index.html

VMの設定

インストールが完了したら、実際に設定してみましょう。

今回は次のようなフォルダを作成し、このなかで作業を行います。
Windows: C:\vagrant
Mac : /Users/ユーザ名/vagrant

ターミナルまたはコマンドプロンプトを開き、上記フォルダまで移動してから以下のコマンドを実行します。

vagrant box add bento/centos-7.4

これだけのコマンドで、インターネットからLinuxをダウンロード・インストールされ、最低限の設定が行われます！

次にVagrantの設定ファイルを作成します。

vagrant init

フォルダのなかにVagrantfileというファイルがあれば成功です。
このファイルにカスタマイズしたい内容を記述するのですが、動かすのみであれば不要のため省略します。

Vagrantの起動方法

vagrnt up

必要なコマンドはこれだけです。簡単ですね。
しばらく待つとLinux（CentOS）が起動します。

これで仮想環境のできあがりです。不要になったら以下コマンドで終了させ、Vagrantfileを削除すれば環境の削除も簡単です。

vagrant halt

まとめ

上記設定をすることで、プロジェクトごとの仮想環境を用意することができるようになりました。
しかし、Vagrantはすべての問題を解決するソフトウェアではありません。
Vagrantで仮想環境を用意しても、結局は各種ソフトウェアをインストールしなければならないという問題は残ったままです。
もちろん、解決策はあります。

今回はVagrantの紹介が長くなってしまったため、次回の記事で紹介できればと思います。

様々シーンにおいてシステムアテンドを行うITソリューション事業部はこちら

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

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

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

DBをGUIで操作するツールとして、phpMyAdminを便利に使っています。
ターミナルからmysqlにログインして、直接SQLを実行しても良いのですが、ちょっとしたSELECT文を試したいくらいのときにはおおげさです。
しかし、サーバの設定の都合上phpMyAdminをインストールできない場合があります。
あるいは、phpMyAdminをインストールすることが手間な場合もあります。

上記のような場合、がんばってターミナルからSQLを実行するしかないのでしょうか？
もっと、便利な方法があるはずので、探してみました。

Macならsequel pro

Mac環境の場合は、Sequel Proが定番のDBクライアントとなります（他にあったら教えてください！）。
基本的にMySQLのためのクライアントとなりますが、見た目のUIなどはphpMyAdminに似ているため、違和感なく移行できるかと思います。
テーブル操作やSQLの実行まで、一通りのことができるため、Mac環境であればSequel Proがあれば問題なく使えそうです。

WindowsではA5:SQL Mk-2, MySQL Workbench

普段仕事をする環境はWindowsなのでSequel Proを探してみましたが、Windows版がありません。
ただ、類似のアプリケーションとして、A5:SQL Mk-2, MySQL Workbenchがあります。
両方ともphpMyAdminに似たことができますが、A5:SQL Mk-2はどちらかというとDBのモデリングが主な機能であり、MySQL WorkbenchはMySQL専用でテーブル操作にはあまり向かないという印象があり、実際に業務で使用するならば使い分けることになりそうです。

Linuxでがんばるならmycli

上記はGUIでDBを操作できるものを取り扱いました。
しかし、どうでしてもターミナルから操作しなければならない場合もあります。
GUIに慣れていると、SQLのコマンドが思い出せずに検索して時間がかかることがよくあります（筆者がそうです……）。
そこで少しでもSQL入力を楽にする方法として、mycliがあります。
mycliはデフォルトのmysqlコマンドを代替するもので、mycli -u root -pなどとしてログインすると、コマンドやテーブルの補完機能を使うことができるようになります。
SQLの文法が思い出せいない場合、何文字かを入力してタブキーを押せば、それらしいコマンドをサジェストしてくれるので、いろいろはかどります。

まとめ

主要な環境で使えるDB操作アプリケーションを紹介してみました。
DBは１つ操作を間違えると大変な結果になるため、素早く正確に（しかも簡単に！）できるようにしておきましょう。

日々多様化・複雑化していくあらゆるシーンに於いて、シームレスにアテンドするソリューション事業部はこちら

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

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

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

開発をする上で、どうしても発生するのがバグです。
バグのない開発ができれば言うことありませんが、実際はいろいろな原因で問題が発生するものです。
発生してしまったバグをどのようにデバッグすればいいのか、普段気をつけていることを整理してみたいと思います。

バグの再現

バグを発見すると、反射的に修正したくなるかもしれません。しかし、ここを我慢しましょう。
修正しようとする前に、まずそのバグが確実に発生するのかを確かめましょう。
バグが発生したりしなかったりする状況は、なにを修正するのかすらあいまいになってしまうため、無駄な時間を使うことになりかねないためです。
再現させるための前提として、サーバや開発言語を可能な限りバグが発生した環境と同じに揃えるなどして、１つ１つ不確定要素を潰すようにすると良いでしょう。

原因の特定

バグを再現できるようになったら、次は原因を特定しましょう。
原因を特定する方法はエンジニアの数だけやりかたがありますが、おおむねのところ共通する手法は以下になるのではないでしょうか。

01．仮説を立てる
02．ログなど事実（データなど）を収集する

実際のデバッグにおいては、２つのうちどちらか１つを使うというものではなく、両方の組み合わせになるかと思います。

注意すべきは、なにを調べたら良いのかわからず、闇雲に原因を調査することです。
とはいえ、実際に調査する方針がつかめないこともあるため、闇雲に調べる場合はせめてどのようなことを調査したのかを書きだしておくと、１つ１つ原因を追いこんでいくための助けになるかと思います。

用途に応じた修正

原因が特定できたら、いよいよ実際の修正を行いますが、ここでも考慮したいポイントがあります。

01．簡単で根本的な修正
02．難しくて根本的な修正
03．簡単で場当たり的な修正
04．難しくて場当たり的な修正

※根本的な修正とは、今後の変更や拡張性などを考慮した修正であり、場当たり的な修正とはとりあえず問題が解決していれば良いものとする修正を表します。

基本としては根本的な修正を行うべきですが、実際は１から４のうちどれを選ぶかは状況に左右されます。

場当たり的な修正が良くないとわかっていても、時間的な制約で選ばなければならないことがあります。
そのような場合はコメントを残したりチケットに登録したりと、後に対応することになったとき、少しでも楽になるようにすると良いかもしれません。
なにしろ自分で記述したコードであっても、１カ月後には忘れていることもあるためです。

修正の確認

問題が修正できたら、実際に修正できているのかを検証しましょう。
修正したての状態だと、特定の条件下のみでは意図通りの動きをするが、条件を変えたとたんに動かなくなる場合が多いためです。
特に、場当たり的な修正を実施した場合は、修正したことの副作用として別の場所でバグが発生するということすらありえます。
ここでハマると、場当たり的な修正→別の場所でバグが発生→場当たり的な修正……というループにハマってしまわないように気をつけたいところです。

まとめ

デバッグ方法を整理しましたが、書かれていることは当たり前のことかもしれません。
しかし、どのような状況でも上記ステップを着実に踏んで進められるかとなると、話が変わってきます。
ハマってしまうと、気がつくと闇雲に原因を探してしまっている……、ということは良くあります。

上記ステップを踏んでデバッグを行い、その上でどうしても解決できないバグがある場合はどうすれば良いものでしょうか？

答えの１つとはしては、その日は切り上げて帰って寝てしまうことです。

身も蓋もない答えかもしれません。しかし１日かかって解決しなかった問題が、次の日すっきりした頭で取り組むと１０分で解決するということが意外とあるためです。
だいたいの場合、解決方法は複数あるものだったりします。
頭がすっきりしているときに改めて取り組むことも、立派な解決策の１つであることを思い出せるようにしておきましょう！

日々多様化・複雑化していくあらゆるシーンに於いて、シームレスにアテンドするソリューション事業部はこちら

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

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

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

データベースのパフォーマンスを考える上で、本でいう目次に相当する機能であるインデックスを適切に設定することは重要です。
インデックスはデータベースの検索速度に大きく影響し、引いてはWebサービスの快適さに直結します。
今記事ではインデックスについて整理してみましょう。

インデックスのメリットデメリット

先ほども記述しましたが、インデックス機能を使うメリットは検索速度の向上です。
使いかたによっては10倍以上も速度向上が見こめるため、適切なインデックスの使用は必須と言えるでしょう。

逆に、デメリットもあります。
インデックスはINSERT, UPDATE, DELETEを実施するたびに再生成されます。
そのため、変更の多いテーブルにインデックスを作ると、逆に動作速度が低下することもあります。
また、巨大なテーブルにインデックスを作ると、インデックスのファイルサイズが大きくなるという問題もあります。

インデックスをどこに使うか？

実際にインデックスを設置するには、どのようにすれば良いでしょうか？
もちろんデータベースのテーブル構造ごとに異なりますが、おおまかな指針を考えてみます。

01．WHERE句
インデックスは検索速度を向上させるため、実際にWHERE句に使うカラムに設定すると効率化が見込めます。
ただし、データ量が多く変更が多いカラムの場合は、インデックスの再生成が何度も実施されてしまうため、かえってパフォーマンス低下の怖れがあります。

02．結合条件
これは上記WHERE句と同様に、絞り込みを行う条件であるため、インデックスを効果的に使用できるためとなります。

03．カラムの値の種類が多い
区分などで0か1など、条件しかデータがない場合は、インデックスは効果を発揮しません。
名前など、データが複数あるもののほうがインデックスを使用するものとしては望ましいものとなります。

まとめ

データベースの速度はサービスの快適さに直結します。
ユーザに使いやすいサービスを提供するため、常に速度を意識したデータベースを構築しましょう。

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

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

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

大規模なシステム開発をしていると、そこそこの頻度で使用するコマンドがあるかと思います。
そのなかでも今回は、定義ジャンプを紹介します。

定義ジャンプとは

コーディングをしていると、メソッドの内容や使用時に必要な引数がどのようになっているか思い出せないことが発生します。
そのとき、都度メソッドがどのファイルのどこに記述されているかを探すのは手間となってしまうでしょう。
そんなとき、定義ジャンプ機能があれば簡単にメソッドなどの定義先に移動して、内容を確認することができます。

EclipseやといったIDEや、Atomなどのモダンエディタであれば大半の言語で実行可能な標準機能となりますが、歴史的なおさらいも兼ねて今までのやりかたも紹介してみたいと思います。

検索を容易とするインデックスを作成するtags

tagsとはメソッドや変数などの定義箇所のインデックスを作成するためのプログラムです。
そのなかでも複数の言語に対応したctagsが有名（Google検索でたくさんヒットする）なので紹介します。
以下のようなコマンドを実行すると、tagsというインデックスファイルが生成されます。

ctags -R –languages=PHP –langmap=PHP:.php.inc –php-types=c+f+d -f ~/tags

生成したファイルを読み取り、定義ジャンプを実現します。
元々がUnixプログラムである関係上、vimやemacsなどのCUIエディタで実行可能でしたが、近年はwindowsでも秀丸エディタなどで対応しています。

プログラムを解析して情報を提供するlanguage-server

tagsを使ってインデックスを作成する方式は、安定しているとはいえ古いやりかたなのは否めません。
そこで、MicrosoftがVisual studioとは対照的に、軽量なモダンエディタとして発表したVisual Studio Code（以下VSCode）ではどのように実現しているのかを紹介します。

2016年にMicrosoftはlanguage server protocolという仕様を公開しました。
これはプログラムを解析してコード補完、変数やメソッドの定義参照、コードのエラーチェックなどの機能を統一的に提供するプロトコルになります。

機能ではなくプロトコル（規約）であるところがポイントで、プロトコルの形式を守ればどのようなエディタであっても同じ定義ジャンプ機能を実装可能となります。
実際にはVSCodeで使われていますが、vimやEmacsでもlanguage-serverを使用した言語ごとのプラグインが各種公開されており、ctagsなしでの定義ジャンプが可能となuものがあります。

まとめ

昔ながらのctagsを使用する例は減りましたが、VSCodeなどモダンエディタが使えない環境においてはまだまだ現役です。
既存のコードを検索する時間をtagsやlanguage-serverでなくして、新しいコードを書くことに集中できるようにしましょう！

システム開発時のよくあるパターンとして、機能を追加しようとすると既存のコードの複数箇所に修正をしなければならない、ということはよくあります。
修正をすることで別の箇所でエラーが発生して……、という頭の痛い展開を防ぎたいものです。

では、どのようにすれば良いでしょうか。

OCPのクラス設計方針とは

拡張に対して開いている（Open）
修正に対して閉じている（Closed）

上記方針を守った、クラスの設計方針のことです。
仕様変更に対して、機能追加は簡単にできるように、かつ既存のコードを変更しないでいいようにすることを指します。
巨大なシステムであるほど、既存のコードに対する修正はリスクが高まり、機能追加時に修正が不要になることは大きなメリットがあります。

OCPをどのように使うのか？

どのような方針で設計をすれば良いのでしょうか。
『アジャイルソフトウェア開発の奥義』の著者ロバート・C・マーチンがあげる例によれば、呼び出すクラスに依存させるのではなく、インタフェースや抽象クラスに依存させることを指針とすべきだ、というものです。
直接クラスを使用すると依存箇所ができてしまうため、インタフェースを実装したクラスを使用することで、インタフェースを実装したクラスであれば差し替え可能にすることで、変更を防ぐというものです。
差し替え可能にすることで柔軟性を保つという発想は、依存性の注入（Dependency Injection）とも重なります（ここでは割愛）。

まとめ

複雑なシステムを構成するには、機能追加に柔軟な設計になっていることが必要となります。
『アジャイルソフトウェア開発の奥義』には他にも有用な考え方が多数掲載されており、筆者も勉強中となります。

ところで、上記内容を解決するための根本的な発想はもう１つあります。
コードを書かないでいいようにすることです。
コードがなければバグもない、そんなの当たり前と考えるかもしれませんが、クライアントと相談するなどすれば意外とコードを書かないでも解決できてしまったりすることがあるのです。
OCPに沿ったコードそのものが本当に必要なのか、書かないでいい方法はないか、ここから問うようにしましょう。

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

株式会社CPR ソリューション事業部はこちら

４月になって時間もたち、新入社員の方は仕事に慣れようとしている時期かと思います。
弊社にも新しくメンバーが参加し、フロントエンド技術の研修を行っております。

メンバーにサーバ設定を教えるなかで、こんな会話がありました。

「設定ファイルをvimで開いて」
「vimってなんですか？」

筆者はvimを当然の前提知識として考えておりましたが、考えてみればフロントエンドからエンジニアになった人からすれば知らなくてもおかしくありません。
しかし、フロントエンドエンジニアとはいえ、最低限の知識はあったほうが良いということでvimの操作を教えることとなりました。

vimを使うには何を教えれば良いのか？

Windowsのメモ帳でやっていることができればいいだろうと考えました。
文字の入力と削除、コピー＆ペースト、キーの移動、ファイルの保存、エディタの終了です。

しかし、vimは上記操作を行う以前に知らなければならないことがあります。

用途に応じたモードの区別

vimにはモードという考え方があります。
どんなものかと言えば、文字入力をする挿入モードと、編集（削除など）をするノーマルモードとで明確に分離しています。
例をあげると、文字入力（インサート）モードのときに、Ctrl-C, Ctrl-Vでコピーや貼りつけができません。
逆に不便になっているのでは？　という疑問もあるでしょうが、たとえば編集モード2yyと押すだけで2行コピーできるなど、便利なことが多いためそうなっています。

モードの考えかたを教えた上で、最低限ファイルの編集をするためのコマンドを紹介します。

vimの基本操作

■移動
ノーマルモード時
h : 左へ移動
j : 下へ移動
k : 上へ移動
l : 右へ移動

■編集
ノーマルモード時
i : ノーマルモードから挿入モードにチェンジ
yy : １行コピー
p : 下にコピーした内容を貼りつけ
x : １文字削除
dd : １行削除

■保存と終了
挿入モード時にesc : 挿入モードからノーマルモードにチェンジ
:w : 保存
:q : vimを終了

まとめ

必要最低限のものとなりますが、vimの操作を紹介してみました。
フロントエンドエンジニアでもVagrantのLinuxにログインして設定ファイルを編集するなどのケースがあるため、最初は慣れないかもしれませんが、チャレンジしてみましょう！

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

株式会社CPR ソリューション事業部はこちら

はじめに

皆さん、こんにちは。
ソリューション事業部のエディです。

私はオーストラリア出身で故郷はシドニーで3年前に来日しました。
今回は私がCPRに入社し、今まで仕事の経緯などをお話させて頂きます。
CPRで働くフロントエンドのエンジニアはどんな人物か、どちらかの参考になればと思います。

Greetings everyone.
My name is Daniel Eddy from the Solutions Department at CPR.

Originally from Sydney, Australia I came to Japan 3 years ago, in this article I will be explaining my background and previous working career. I believe this article could also be insightful for anyone interested in working with CPR as a Frontend Engineer.

Webスキルやコミュニケーションスキルを取得した専門学校・インターン

オーストラリアの専門学校に入学して、2年間勉強して卒業しました。
そこでWebスキルの勉強を始め、基本的なHTML、CSSとPHPを取得しました。
また大規模なWebデザイン会社で1年間のインターンシップを行い、チームとのコミュニケーションスキルが向上しました。
インターンシップでは様々なことに挑戦し経験することが出来て感謝しています

I entered Australian vocational school studying frontend web development for 2 years this is where I developed my first skills as a professional web developer covering basic HTML, CSS and PHP. While studying I did an internship with a large web design company working as a assistant web developer for 1 year this really helped be build my team communication skills.

Webエンジニア、マネージャーを経験した広告代理店での業務

専門学校後、広告代理店に就職しそこで私はJavaScriptアプリケーションエンジニアになりました。
オーストラリアの弁護士のための教育プラットフォーアプリケーション案件に参画し、22歳で5人のWeb開発者のチームを管理していました。
若い時にマネージャーを経験させて頂いて感謝しており、マネージャー時代には解決策のスキルを培うことが出来ました。

その後、2015年にオーストラリアから東京に移りました。

After my graduation I got a job with a advertising agency mainly developing apps as a Javascript engineer. I created a learning platform for a Australian law groups at this job and managed a team of 5 developers at the age of 22.

Getting experience as a young manager allowed me to develop my soft skills and resolving conflicts that occurred in the working environment.

Soon after that job In 2015 I made the decision to move to Tokyo, Japan

日本企業での新しい挑戦

来日後、日本のベンチャー企業のWeb開発(Angular、Reactなど)に携わりましたが、その時は本当に大変でした。
私は日本語を話せませんでしたので、日本語でのコミュニケーションは私にとっての大きな挑戦でした。
しかし毎日少しずつ日本語を学んだ結果、回りの方とコミュニケーションを取る事が出来るようになりました。

When I first arrived in Japan I was able to get a job with an Japanese internet venture company where I work mainly with Angular and React projects the cultural and language barrier was a big challenge in the beginning.Because I could not speak much Japanese and basic communicate with other team members was always difficult but I was able to push through.

Everyday I learn more and more Japanese intensively self educating myself, to the point where I could communicate efficiently with everyone in the company within 6 months I arriving in Japan.

最後に

今私は日本に住み始めて3年が経とうとしています。
今回CPRにジョインして私のスキルと経験を伸ばしたいです。

Now 3 years later I have experience working with different Japanese companies and projects. I’m looking forward to developing further skills and experience by being involved with the team at CPR.

こんにちは、株式会社CPRソリューション事業部です。
今回は2018年1月度の全体ミーティングについてお届けしたいと思います。

1月度全体ミーティング

1月度の全体ミーティングは2018年の始まりということもあり、ふぐ一郎様にてふぐコースを頂きました。
去年の冬の全体ミーティングでもこちらのふぐコースを頂き、大変好評だったので今年の冬もふぐを外すことが出来ません。

コース内容はふぐ皮煮凍り、てっさ（ふぐのお刺身）、ふぐ唐揚げ、ふぐちり鍋（ふぐ鍋）、ひれ酒と全てふぐ料理で思う存分に堪能しました。
特にひれ酒の炙ったひれから出る香ばしさとふぐ料理の相性もバッチリで、お酒の弱いスタッフもついつい進んでしまう程の美味しさです。

まとめ

弊社では毎月事業部の垣根を越えた全体ミーティングを行っており、全社員の交流の場を大切にして風邪通しの良い社内作りを目指しています。
オンオフをしっかりわける事が日々の業務の作業効率を上げることだと考えており、CPRではこうした取り組みを大切にしてます。

株式会社CPR