こんにちは、中途採用担当のシェリーです!
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人目のLT
1人目 :
ばーちー(@hypermkt)。バーチーは埼玉県出身ですが、千葉出身ですか?と良く聞かれるそう。
初心者向けホームページ作成サービス「グーペ」のエンジニアとして働いています。
テーマ: 小さな課題解決から
始める Vue.js。
KPI、JSコード改善のためにVue.JSを導入した話です。その際に、課題が3つありました。
課題1:チーム全員でKPIの改善を行っている。
次に課題2:JavaScript。
そして課題3:
競合サービスに負けないUI。とある中で、今後の課題等含めて、Vue.jsを導入することに。

その理由とは、下記4点。
- 学習コストが低い(日本語ドキュメントがある、シンプルな構文である)。
ビューの変更に特化している。
既存コードに導入しやすい。
デザイナーと協業しやすい。導入までの準備として
Vue.js導入説明会。
JavaScript勉強会。
Vue.jsハンズオン。これらを行いました。Vue.jsとJQueryの比較もしています。
- 開発、デザイナ共に少し使い方の共有のみで継続的な修正ができるようにりました!
ビューとロジックが分割できる。
テンプレートエンジンの用に使えた。
HTMLを見れば何が起きるか分かる。
デザイナと協業しやすい。
発表資料はこちらから。
2人目のLT
2人目 :
きむさん(@kimromi)。きむさんは福岡支社でムームードメインのエンジニアとして働いています。
プライベートでは一児の父です。

テーマ:
Vue.js on Rails。
Ruby on Railsを使っている人は結構いました。その中で、Vue.JSも利用している人も会場の1割ほど。
今回は、既にRailsでサービスを運用している人向け。または、新しくサービスを作る人向けのお話です。
ムームードメインは、14年目のサービス。そのため、8~9割はPHPで実装されています。
今はRuby on Railsに少しずつ移行しています。
先月、新しくショッピングカート機能を実装しました。その際にVue.jsを実装した話がテックブログにあります。読んでほしいということでしたので、こちらにリンク貼っておきます!
ムームードメインがショッピングカート機能をリリースしました!
Rails環境をどげんかする
現状のRailsのJavaScript環境では、幾つか問題がある。だから「どげんかせんといかん!」と思っていたようです。
この時に Vue.js on Railsだ! と。
なぜVue.js?
実はペパボのサービスで導入実績が増えてきたことや、ムームードメインの社内システムでも導入実績があったこと。
また、@inouetakuya や @hypermkt といった日本語ドキュメントの翻訳者がいたこともきっかけでした。
まずはやりたいことを整理し、導入に向けて取り組んでいくわけですが、技術的な内容や比較については是非資料でご覧ください!
発表資料はこちらから。
3人目のLT
3人目 :
ねっしー(@tsuchikazu)。2012年入社、カラーミーショップのシニアエンジニア。ペパボの中では、フロントエンドに強みを持つエンジニアの1人です。
テーマ: 新規プロジェクトへの Vue.js x SPA x
SSR の導入。
新規プロジェクトで、導入することになった。これらをどのように導入したのか、というお話。
みなさんには是非技術選定に活かしてほしいというメッセージがありました。
まず、新規プロジェクトにおける組織構成と開発時期について。プロジェクトの概要を前提に、それぞれの選定背景を詳細にお話しています。
Vue.js
定期的なMeetup/Slackグループ。
日本語ドキュメントが豊富。
勉強会が豊富。今回使ったものと、使わなかったものについても記載されています。必要なものを見極めて、やりたいことにあった技術選定をしていきましょう。
発表資料はこちら
from Kazuyoshi Tsuchiya。
4人目のLT
4人目 :
じょー(Joe_noh“>@Joe_noh)。最後の登壇は入社3年目のカラーミーショップで働くエンジニア。
テーマ:
Vuexと入力フォーム。
Vuexとは、Vue.jsアプリのための「状態管理パターン+ライブラリ」のこと。
アプリ内の、すべてのコンポーネントのための集中型ストアとして機能するものです。
入力フォームについて、流れを決めたら開発をしていきます。個々の詳細は図解されているので、是非発表資料でご確認ください!
楽するポイントを探す
開発が進んでいくにつれて、めんどくささなどが出てくるようです。しかし、楽するポイントがいくつか出てきました。それを見つけることで、記述量が減って生産性が100倍になる!
・・・はずが、後々全く楽になっていないことに気づきました。立ちかえり修正したところ、うまく行ったという成功事例になります。
エンジニアリングの細かいところはこちらの資料にて!
Vuexと入力フォーム from Joe_noh。
先述のとおり、Vue.jsは日本語ドキュメントの豊富さから導入は検討しやすい。しかし、まだまだ企業やサービスでの活用事例が少ない。そのため、こういった事例を聞けるのはとても良い機会のようです。
この後に行われた懇親会も、帰られる方が少なく最後まで盛り上がりました!
(おかげさまで当初準備していたピザがものの数分でなくなり、追ピザをするほどに・・・笑)
ペパボはこういった事例等、どんどんアウトプットしていきますし、他社の事例が豊富でなかったとしても、技術的に検証し、良いと思ったものはどんどん積極的に取り入れていく風習があります。
開発環境でお悩みの方や、やりたいことがあるのになかなか受け入れられない、という方がいましたら、ペパボへの転職という選択肢も是非考えてみていただけると嬉しいです。
9月もイベント実施を積極的にしていきますよ~!
GMOペパボでは、新しい仲間を熱烈に求めています
積極採用中!詳細につきましては、以下をご覧ください。