こんにちは、中途採用担当のシェリーです！
8月後半はイベントウィークでして、また懲りずに私からイベントレポートをお届けしますよっ。
既に主催者のおいちゃん（@inouetakuya）がブログに記載してくれていて、それがまたホットエントリーになっているということで、熱いイベントであったことが分かります。
第9回 ペパボテックカンファレンス Vue.js 特集を開催した #pbtech
遅ればせながらですが、こちらからも写真たっぷりでお届していきます！
第9回ペパボテックカンファレンス ～ Vue.js 特集 ～
イベント内容についてはconnpassページをご覧ください → こちら
8月28日（月）
月曜日にも関わらず、80名近くの方に参加いただきました！
参加希望者は200名近く、本当にありがたいです。
最近面接でもよく気になる環境で話が出るようになった「vue.js」ですが
今回はテックカンファレンスのテーマとして実施することになりました。
100人の募集に対して200名の参加希望者があるところからも、人気の高さが伺えます。
エンジニアに聞いてみたところ、まだ実際に導入して運用までがっつりやっているところは
少ないんだそう。
ごあいさつ＆LT おいちゃん（@inouetakuya）
なぜVue.jsをやるのかというお話。
一時期人気になったけれど、チュートリアルなどは充実しているのに現場の事例が少ない。
日本のVue.jsには事例が必要！
まずは事例を持っているペパボから発信していくぞ、というのが今回のイベントの趣旨になっています。
1人目 ： ばーちー（@hypermkt）
バーチーは埼玉県出身ですが、千葉出身ですか？と良く聞かれるそう。
初心者向けホームページ作成サービス「グーペ」のエンジニアとして働いています。
テーマ： 小さな課題解決から始める Vue.js
KPI、JSコード改善のためにVue.JSを導入した話で、その際に課題が3つありました。
課題１：チーム全員でKPIの改善を行っている
課題２：JavaScript
課題３：競合サービスに負けないUI
とある中で、今後の課題等含めて、Vue.jsを導入することに。
その理由とは、下記4点
- ビューの変更に特化している
- 学習コストが低い（日本語ドキュメントがある、シンプルな構文である）
- 既存コードに導入しやすい
- デザイナーと協業しやすい
導入までの準備として
- Vue.js導入説明会
- JavaScript勉強会
- Vue.jsハンズオン
を行いました。
Vue.jsとJQueryの比較もしています。
- ビューとロジックが分割できる
- テンプレートエンジンの用に使えた
- HTMLを見れば何が起きるか分かる
- デザイナと協業しやすい
- 開発、デザイナ共に少し使い方の共有のみで継続的な修正ができるようにりました！
発表資料はこちらから
２人目 ： きむさん（@kimromi）
きむさんは福岡支社でムームードメインのエンジニアとして働いています。
プライベートでは一児の父です。
テーマ： Vue.js on Rails
Ruby on Railsを使っている人は結構いて、その中でVue.JSも利用している人も会場の1割ほどいました。
今回は既にRailsでサービスを運用していたり、新しくサービスを作る人向けのお話です。
ムームードメインは14年目のサービスということもあり、8～9割はPHPで実装されています。
今はRuby on Railsに少しずつ移行しています。
先月新しくショッピングカート機能を実装するにあたり、Vue.jsを実装した話がテックブログにあるので読んでほしいということでしたので、こちらにリンク貼っておきます！
ムームードメインがショッピングカート機能をリリースしました！
現状のRailsのJavaScript環境では幾つか問題があるので「どげんかせんといかん！」と思っていたようです。
この時に Vue.js on Railsだ！ と。
なぜVue.js？
実はペパボのサービスで導入実績が増えてきたことや、ムームードメインの社内システムでも導入実績があったこと。
また、@inouetakuya や @hypermkt といった日本語ドキュメントの翻訳者がいたこともきっかけでした。
まずはやりたいことを整理し、導入に向けて取り組んでいくわけですが、技術的な内容や比較については是非資料でご覧ください！
発表資料はこちらから
３人目 ： ねっしー（@tsuchikazu）
2012年入社、カラーミーショップのシニアエンジニアで、ペパボの中ではフロントエンドに強みを持つエンジニアの1人です。
テーマ： 新規プロジェクトへの Vue.js x SPA x SSR の導入
新規プロジェクトで導入することになったけど、これらをどのように導入したのか、というお話。
みなさんには是非技術選定に活かしてほしいというメッセージがありました。
まず、新規プロジェクトにおける組織構成と開発時期について、またプロジェクトの概要を前提としてお伝えし、それぞれの選定背景を詳細にお話しています。
Vue.js
- 定期的なMeetup/Slackグループ
- 日本語ドキュメントが豊富
- 勉強会が豊富
今回使ったものと、使わなかったものについても記載されているので、必要なものを見極め、やりたいことにあった技術選定をしていきましょう。
発表資料はこちら
4人目 ： じょー（＠Joe_noh）
最後の登壇は入社3年目のカラーミーショップで働くエンジニア。
テーマ： Vuexと入力フォーム
Vuexとは、Vue.jsアプリケーションのための「状態管理パターン＋ライブラリ」のこと。
アプリケーション内のすべてのコンポーネントのための集中型のストアとして機能するものです。
入力フォームについて、流れを決めたら開発をしていくのですが、個々の詳細は図解されているので、是非発表資料でご確認ください！
開発が進んでいくにつれてめんどくささなどが出てくるようなのですが、楽するポイントがいくつか出てきたので、それを見つけることで、記述量が減って生産性が100倍になる！
・・・はずが後々全く楽になっていないことに気づき、立ちかえり修正したところうまく行ったという成功事例になります。
エンジニアリングの細かいところはこちらの資料にて！
先述のとおり、Vue.jsは日本語ドキュメントの豊富さから導入は検討しやすいものではあるものの、まだまだ企業やサービスでの活用事例が少なく、こういった事例を聞けるのはとても良い機会のようです。
この後に行われた懇親会も、帰られる方が少なく最後まで盛り上がりました！
（おかげさまで当初準備していたピザがものの数分でなくなり、追ピザをするほどに・・・笑）
ペパボはこういった事例等、どんどんアウトプットしていきますし、他社の事例が豊富でなかったとしても、技術的に検証し、良いと思ったものはどんどん積極的に取り入れていく風習があります。
開発環境でお悩みの方や、やりたいことがあるのになかなか受け入れられない、という方がいましたら、ペパボへの転職という選択肢も是非考えてみていただけると嬉しいです。
9月もイベント実施を積極的にしていきますよ～！
GMOペパボでは、新しい仲間を熱烈に求めています
積極採用中！詳細につきましては、以下をご覧ください。