フロントエンドエンジニア の @kazuyuki_ito です。
この記事は Photocreate Advent Calendar 2018 の 17日目 の記事です。
はじめに
昨日は @imunew が ららびゅう座談会を主催してみて というまとめで書いてますが、今日はフロントエンドエンジニアとして主にVue.js のところで印象に残ったことを書きたいと思います
@kotamats「SCOUTER社でLaravel+Vue.jsをどのように使っているか」
SCOUTER社のCTOの@kotamats氏からは Laravel+ Vue.jsを自社の事業でどのように使っているかをお話いただきました。
使うメリット
まずは Laravel+ Vue.jsを使っているメリットとして以下を挙げていました。
- 基本的な概念を理解していれば、複雑な理解は必要ない。
- どちらもゆるいフレームワークなので、設計力は求められるが、ある程度最初に整備しておけばある程度防げる。
- 採用面でも有利
私としてはVue.jsを始めたばかりなので、複雑な理解は必要ないとは思わないのですが、Vue.jsは難しいというより、初めてjQueryを覚えた時のワクワク感みたいなものを最初に味わったので学習コストは低いのかなと思います。
またゆるいフレームワークだから設計力が求められる部分とあったので、制作初期段階でチーム全体で細かい方針を決めて実装を進めないと終盤で苦しめられるのかなと勝手に想像・・・ここは経験も必要なんだなと思いました。
###2つの勉強会
@kotamats氏は「Laravue勉強会」と「Nuxt.js Meetup」の2つの勉強会を主催しており、開催している理由として以下を挙げていました。
- 半強制的に外部の登壇する優秀なエンジニアと交流する機会が生まれる。
- 日頃の業務で挑戦していることを発表し、各個人の技術的なプレゼンスが上がる。
- 登壇駆動開発ができる。
この点に関しては4日目に投稿したこちらの記事で書かせてもらいましたが、日頃インプットしている事を外でアウトプットすることで自身が学んだものの復習につながり、理解が深まるものだと体験を通じて感じています。
「アプリケーションを作る上では双方理解している必要があるので、統合的に勉強する機会が欲しかった」とも語っており、「自分も今後サービスでVue.jsを扱ってくにはLaravelへの理解も必要になってくるのか・・・」と身震いしておりますw
感想
@kotamats氏はLaravel+ Vue.jsを「最後のフルスタックフレームワーク」で、Webにおける実装するべき機能がほぼ揃っており、「事業に集中できるため」採択しているそうです。
ただし、Laravel、Vue.jsともにそれほど学習コストがかからなくなるが、その分、プロダクトをどうやって伸ばすかというプロダクト志向をフロント＋サーバーの知識で要件定義できるかが重要と語っており、学習コストが低くなったとしてもフロントエンドエンジニアとしてはまだまだ勉強しなければいけない事が盛りだくさんあると痛感しております。
また印象的だったのは@kotamats氏はNuxt.jsでSSR（サーバーサイドレンダリング）をしないスタイルだと語り、公演後にその理由が書かれたこちらの資料を読み、個人としてはなかなか興味深い内容でした。
@nunulk「A Startup meets Laravel + Vue.js」
フリーのアプリケーションエンジニア@nunulk氏からは 「A Startup meets Laravel + Vue.js」と題して初心者・初学者がどこからどうやって教えるかを中心にお話いただきました。
Vue.jsの特長
Vue.jsの主な特長として、
- HTML / CSS との最低限の結合
- 部分適用のしやすさ
-
Vuex（Flux）によるViewと切り離された状態管理 - 活発なコミュニティ＆巨大なエコシステム
- 公式ドキュメントの日本語訳の存在
- TypeScriptをサポート（
Vue CLI 3） Nuxt.js
を挙げていたのですが、特にVue.jsのライブラリであるVuexで状態管理ができることを一番に説明していました。
さらっと説明していたのですが、私はVue.jsを学習し、Vuexへとそのまま流れていったのですが、なかなかVuexのコアコンセプトの理解に苦しみました。
しかし学習するにつれて、Vue.jsにはVuexの理解が必要不可欠であり、Nuxt.jsの導入も容易になると思うので納得しながら聞いていました。
プロダクションに求められるもの
プロダクションに求められるものは「素早く作れること」「ラクに作れること」「少人数で作れること」であり、Laravel + Vue.jsは適していると語っていました。
特に一番印象に残っているのは「経験してきて、複数人で作る場合、水平方向（フロントエンド/バックエンド）で分けるのではなく、垂直方向（機能ごと）で分担すると効率がいい」と話されてたので、今後のリニューアルプロジェクトでもこの方向性を取り入れていければと思いました。
###Laravel + Vue.jsの学習プラン
詳細は割愛しますが、初学者〜中級者のレベルでVue.jsを取得したい人、Laravelを取得したい人、両方取得したい人向けに細かく勉強方法を指南してくれました。
そして両方共通して必要なのは「オブジェクト指向設計」「関数型プログラミング」の学習の大事さを挙げていました。
オブジェクト指向設計・・・関数型プログラミング・・・分かるけどスピード重視すると疎かになるところなので、意識した実装を心がけていきたいです。
余談ですが、Vue.jsとNuxt.js学習のオススメ書籍を2冊紹介してくれたのですが、両方とも現在自分が学習している書籍と同じだったのでちょっと嬉しかったですw
【オススメ書籍】
基礎から学ぶ Vue.js
Nuxt.jsビギナーズガイド
自由から制約へ
@kotamats氏が、Laravel+ Vue.jsはゆるいフレームワークなので、設計力は求められるとおっしゃっていましたが、@nunulk氏は自由な分、様々な状況の変化で制約が必要とおっしゃっていました。
アプリケーションの複雑化 → 変更にかかるコストの増大を抑える必要性
組織の拡大 → コミュニケーションコストの増大を抑える必要性
ビジネスの拡大 → プロダクト起因のビジネスリスクを減らす必要性
本編では様々なコストを抑えるパターンを紹介していただきましたが、やはりガイドラインや設計ポリシー、コーディングスタイルのドキュメント化の必要性を強く感じました。
私はドキュメント化はとても苦手ですし嫌いなので敬遠しがちなんですが・・・汗
頑張ります・・・
感想
Laravel+ Vue.jsでのリニューアルプロジェクトが進んでいるフォトクリエイトのエンジニアとしてはとても分かりやすく、学習方法から経験からくる開発での重要なポイントも織り交ぜながらの充実した内容でした。
講演後に質問させていただく機会があり、「プロダクトの内容関係なく設計でのポイントはありますか？」と聞いてみたところ、やはりパターンは様々あり具体的にこれがいいというものは言えないそうなのですが、一人で考えるものでもないので、最初はチーム全体で方針を決めていった方がいいとアドバイスをいただき少し安心しました。
##まとめ
座談会に参加して、第一回目に相応しい初心者にもわかりやすい内容で、とても有意義な時間を過ごさせていただきました。
第二回の開催を期待しつつ、その際は具体的なプロダクト事例を挙げていただき、その時の設計ポイントや技術的な面などたくさん聴くことができればと思っています。
フォトクリエイトでは一緒にLaravel + Vue.jsでサービスを作っていきたい方からのご応募をお待ちしております。