新人が新卒研修でVue.jsを使ったプロダクトを作ってみた話

はじめまして！
株式会社ジークス東京開発グループの中川です。
ジークスでは2018年の4月に僕を含め7名の新入社員が入社しました。
そこで今回のフィードでは4月からジークスで行われた3ヶ月に渡る新卒研修の内容と、研修で実際に作った成果物についてを、新人の立場からの感想を踏まえてお伝えしたいと思います！

ジークスってどんな新卒研修やってるの？

ジークスでは新卒で入社した社員に対して4,5,6月と3ヶ月の新卒研修期間を設けています。
はじめの1ヶ月間のクリエイティブ研修では大阪オフィスに新人が集まってHTML,CSS(余裕があればJavaScript)といったフロントエンドの基礎を学び、残りの2ヶ月間の開発研修では各自の拠点に戻りJavaやSQLなどのバックエンドを学ぶといったカリキュラムになっています。
メンターの方のサポートを受けながら課題をクリアしていき、もし研修期間内に課題を全てクリアできれば残りの時間は自分の作りたいものを作ってよい自由課題に取り組めます！

新卒研修についてのざっくりした説明はこのくらいで、ここからは自分が実際に自由課題で作ったものについてお話します。

なに作ったの？

タスク管理 + 日報作成 + 日報提出ツール「Tasker」というものを作りました。
TASKER
(スマホ対応まだですごめんなさい。)

どんなものか簡単に説明すると...

自分がいま取り組んでいる目標を登録する。
その目標に関するタスクを追加する。(期限があるタスクの場合は期限も一緒に)
はたらく
終わったタスクはチェックボタンを押して完了する
…
(1日の終わりに)日報提出ボタンを押す
登録してある目標やタスク、期限が出力されるので、感想だけを記入する
名前とslackのチャンネルを選択して、送信ボタンを押す
slackに日報が投稿される！

といった流れで簡単に日報が出せちゃうものです。
slackへの投稿は認証をかけてるので弊社のslackアカウントが必要ですが、サイトだけでもざっくりと雰囲気は分かって頂けるかと思います！
↓こんな感じでslackの日報用チャンネルに投稿されます。

使った言語・フレームワークなど

html,css,js
Vue.js
php
firebase
AWS EC2
OAuth(slackの認証API)

今回の自由課題ではVue.jsに初めて挑戦してみました。
使ってみたところVue.jsの分かりやすさと出来ることの多さに感銘を受けたのでここからは少しVue.jsについて紹介します。

Vue.jsってなに？

そもそもVue.jsとはなにか？

...ということを詳しく説明するとこの記事には収まりきらないのでざっくり紹介すると、

データの制御やビューへの描画を担当するもの
今流行りのコンポーネント指向に則っている
データバインディングによってDOMの中身を制御できる

といった特徴があるJavaScriptのフレームワークです。

詳しい説明はVue.js公式リファレンスのチュートリアルが分かりやすいです。
はじめに — Vue.js

こういった特徴は今回のプロダクト(Tasker)にも分かりやすく現れていて...

タスクの入力欄, 追加した一つ一つのタスクをそれぞれコンポーネントとして取り回すことが出来るという考え方がコンポーネント指向、

一つ一つのタスクの状態（チェック済みかどうか,期限日,削除フラグなど）をデータとして持つことが出来て、日報を作成する時はそのデータをそのまま使うことが出来る、といった動きがデータバインディングです。

なんでVue.jsを使ったの？

よくReactやAngularなどと比較されがちなVue.jsですが、自分がVue.jsを選んだ理由は大きく分けて以下の3点がありました。

1. 日本のコミュニティが活発

1つ目の利点として日本のコミュニティを挙げましたが、活発だと何が嬉しいのかというとまず日本語の記事が充実してることです。
そもそも公式リファレンスが日本語（それも日本人の有志による丁寧な翻訳）対応していますし、Vue.jsだけでなくVue.jsのライブラリに到るまで日本語で読むことが出来るので最初のハードルがかなり低いです。
他にもコミュニティ的な目線だと日本語ユーザーで構成されたslackグループ(2018/6/10時点で参加者1464人！)がありますし、v-meetupというイベントも不定期で開催されています。
また、今年の秋には大型イベント「Vue Fes Japan」の開催も予告されており、スピーカーとしてVue.jsの作者であるEvan You氏の登壇がすでに決定しているなど盛り上がりを見せています。

Vue.js 公式リファレンス
 Vue.js Meetup - connpass
Vue Fes Japan 2018 | 2018年11月3日（土）
Vue.js 日本語ユーザーslackグループ

2. 導入の敷居が低い / 順を追ってモダンな開発ツールを学べる

2点目は他のフレームワークと比べてVue.jsを導入するハードルが低いことです。
これはhtml,css,jsの初歩的なスキルがある人にとって一番ありがたいのでは無いかと思います。
個人的に、こういった初歩的なスキルからwebpack,babel,es6,jsxといったモダンな開発スキルとの間に大きな壁があるなー（というか初心者にとってよく分からないものすぎる）と思っていたので、その二つの橋渡し的な意味でもVue.jsは良いです。
特に単一ファイルコンポーネントあたりに挑戦する段階になると、こういったモダンなツールを使わざるを得ないので自然と学べるかなと思います。

単一ファイルコンポーネント — Vue.js

3. 短期間でキャッチアップ出来る

3点目は他のフレームワークと比べ短期間で身につけられる点です。
2点目とも関連してくるのですが、よくあるこのフレームワークを使うためにこのツールを使って、このツールを使うためにはこの言語を入れて...といった技術の数珠繋ぎがVue.jsにはあまり存在しないので、Vue.jsそのものを理解することに意識を集中できます。
また、タイムリーなことに5月末に日本語で書かれたVue.jsの入門書が発売されました！
弊社でもさっそく購入したので僕も読ませてもらっていますが、丁寧に各機能について触れているので初心者の方がまず手に取るものとしてうってつけだと思います！(回し者ではないです)

基礎から学ぶ Vue.js

まとめ

今回はジークスの新人研修, 自由課題で作ったもの, Vue.jsについてをお話しました。

実はいろいろあって僕は1ヶ月目のクリエティブ研修しか受けずに現場に入ったのですが、それでも十分収穫の多かった研修だと感じています。
特に、今までなんとなくでフロントエンドエンジニアを目指していたところがあったのですが、クリエイティブ研修を通して自分はやっぱりフロントエンドのスキルを磨いていきたいんだなーと再確認できたことは大きな収穫でした。

また、前述したVue.jsで作ったプロダクトは実際に同期がこれを使って日報を投稿してくれたので、自分のプロダクトにユーザーが出来るという初めての経験が出来ました！今でも毎日使い続けてくれていて本当に感謝しかないです、ありがとうございます。

最近は業務に入ってバタバタの日々ですが、研修で身につけたことを思い出してこれからもトレンドの技術をキャッチアップしたり個人的なプロダクトを作ったりしてフロントエンドエンジニアとしての技術力を磨いていきたいです！