多くのWEBサイトで導入されているWebアプリケーションフレームワークのAngular。
この度、待望の最新シリーズ『Angular7』が2018/10/19にリリースされました。
この記事では、初心者でもすぐに使えるようなリリース内容に触れていきます。

Angular Materialは見栄えの良いサイトを作成するのに必要な便利な素材を用意しているツールです。
今回のAngular7リリースと同時にAngular Materialに便利なVirtual ScrollingとDrag and Dropが追加されたのでご紹介したいと思います

スクロールが長くても動作が重くならないVirtual Scrolling

公式より引用

上の画像の通り、表示されている部分のみがHTMLに構成されるようになります。スクロールが長くなりページが重くなってしまうようなサイトでパフォーマンス向上が期待される機能です。

こちらのリンクで公式のサンプルを公開しています。
https://material.angular.io/cdk/scrolling/overview

自由にレイアウトを組み替えられるDrag and Drop

https://material.angular.io/cdk/scrolling/overview

公式より引用

自由にドラッグしたり、リスト内で並べ替えたりと、アイテムを自由自在に動かすことができるようになりました。
各要素の配置を自由に動かすことができるようなサイトを簡単に作ることができ、ユーザーごとの配置をDBに保存しておくことで、カスタマイズ性の高いサイトが出来ます。

こちらのリンクで公式のサンプルを公開しています。
https://material.angular.io/cdk/drag-drop/example

まとめ

Angular7と同時にアップデートした、AngularMaterialの2つの機能について紹介しました。
今回は実装方法について触れませんでしたが、公式サイトの通りに実装していけばしっかりと機能を実装できるようになっています。
最近の技術は初心者にもわかりやすく、諸先輩方には感謝しかありません。
今後も新しい技術で便利なツールを作り皆様をシームレスにアテンドしていきます。

Angularを使用したWEBサイトを制作するソリューション事業部はこちら

2018年9月よりCPRのソリューション事業部にジョインしましたDと申します。
大学の法学部を卒業し、2016年の春より社会人となり、現在2年半が経過しました。
今回は新人SEとして入社した前職からCPRにジョインした理由を説明させて頂きます。

研修から「将来へのビジョン」との乖離

私が就職先として進んだ業界は司法の道ではなく、IT業界で小規模なソフトウェア開発会社でした。
SEという職種を選択した理由は、明確な将来へのビジョンがあったという訳ではなく、私の周囲の方々に『この業界の方々が多く在籍されていた』という単純な理由からでした。

就職後、3ヶ月の新人研修でSQLとJavaの学習を行なった後、物流関連のシステム開発現場へ配属され、6ヶ月間のOJTを経験しました。
OJT現場では社会人としての立ち振る舞い、開発方法、開発工程などIT業界の新人として非常に良い経験が多く積めたと感じています。

約半年間の業務を経て、次の現場では要件定義からJAVAでのコーディング、結合テストまでの一連の流れを経験いたしました。
この現場は既存のシステムへの追加開発ではなく、完全な新規案件で流用できるプログラムもなく、仕様書もフォーマットから作成を行うなど、まさしくスクラッチ開発を経験しました。
多くの苦労はありましたが、性能を上げることを意識したコーディング、DBの設定方法などよりステップアップした知識を多く吸収できた現場でした。

こういった知識を吸収すればするほど、より自分の作りたいものや、興味がより現実的に「将来へのビジョン」として実感できるようになりました。
しかしそれと同時に実際の業務としての経験がそう言った「将来へのビジョン」とは乖離していったのもまた事実でした。

CPRへジョインした理由

弊社代表とは以前から面識があり、自分の前職での仕事内容に関して気にかけてくださった事もあり、定期的に連絡を取り合っておりました。
そうした中で前職のままではスキルアップが見込めないと感じ、またプライベートを重視した働きやすい環境にも興味があり約2年半働いた会社を退職しCPRへジョインしました。

CPRにジョインした今、前職とは異なった最新言語や開発手法に触れ、また０からのスタートかのように感じます。(現在はJAVAからGO言語へシフトして開発を行っています)
新しいことへ挑戦することを恐れず、将来理想とするエンジニア像に近づけるように、日々努力していきたいと思います。

働きやすさややりたい仕事を重視するソリューション事業部はこちら

システム開発においてバグはないか、意図通りの動作を確認するテストは必須の工程となっています。
テストというと、受け入れテストや単体テスト、結合テストといったプロジェクト管理寄りのテストを想像しがちですが、今記事ではエンジニア寄りのテストを整理してみたいと思います。

エンジニア視線でのよくあるテスト

エンジニア寄りのテストと言われて、どのようなテストが思い浮かぶでしょうか。
よくあるテストとして、テストごとの操作を記述したものをエクセルに記述し、１つ１つ手作業で実施したことがある人がいるかもしれません。
システムは人間が使うものである以上、UIに関わるテストなどは人間の手で行うことになるでしょう。

一方で、ITエンジニアにとって重要な考えかたとして、自動化できるところは自動化すべきです。

メソッド単位でのユニットテスト

自動化できるテストのなかで、効果の高いものとしてユニットテストがあります。
単体テストを英語に言い換えただけに見えるかもしれませんが、コーディングをする上でのユニットテストは異なる意味を持ちます。
ここで言うユニットテストとは、メソッドごとにテストを実施するものであり、有名な言語ではユニットテスト用のライブラリがあると考えて差し支えありません。
例としてrubyであればtestunit、PHPはPHPUnit、JavascriptはJasmineなどがあります。

ユニットテストの特徴としては、テストの実行動作の負荷が軽く、気軽に実行できるというものです。
一方でデメリットとしては、すでにあるシステムにテストを導入することが難しく、テストのためにシステムの一部を修正するといった場面もありえます。
ユニットテストを導入する最良のタイミングは新規に開発を行うときでですが、Webフレームワークの仕組みにテスティングフレームワークがある場合は、途中からでも比較的テストコードを書きやすくなっているかと思います（興味のあるかたは検索してみましょう！）。

実際に画面操作するブラウザテスト

これはWebアプリケーションで使えるテストとなります。
ブラウザの操作を自動化することで、省力化や変更をした際に何度でもテストを行うことができるようにする、というものです。
Webアプリケーションの場合、同じテストをIEやchromeなど複数のブラウザで試すことが前提であり、この部分を自動化することで効果を見込むことができます。
ツールで言うと、古くはJMeterやSelenium、最近ではPhantomJSなどJavascript製のものもあります。

実際のブラウザ操作を自動化するブラウザテストですが、デメリットもあります。
ブラウザを操作するぶんテストに時間がかかること、あるいはテストの修正に手間がかかるというものです。
仕様の変更に応じてテストも修正する場合、ユニットテストよりもテストコードの修正が複雑になることが多いようです。

まとめ

テスト自体は開発するシステムの価値を増やすものではありませんが、エラーの発生するシステムは誰にも使ってもらえません。
テストのやりかたを効率化することで、システムの価値を増すことに集中できるようにしましょう！

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

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

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

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

コーディングをする上で多くの人がお世話になっている機能として、補完機能があげられます。
補完機能を活用することで、入力する文字を減らすことで省力化し、すでにある文字列を再利用することでタイプミスを減らすことができます。
最近のエディタであれば使える機能ですが、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を極めたいフロントエンジニア大募集！！)