Laravel/Vue.js勉強会#6開催しました!

始めまして、2018年10月からSCOUTERでエンジニアとして入社しました@r_sato1201です。

昨日初めて参加させて頂いたLaravel/Vue.js勉強会#6のレポートを書こうと思います!

laravue.connpass.com

今回は、レアジョブさんに会場を提供して頂きました! f:id:ryonnsui1201:20181113163734j:plain

定員を大きく上回る方々に応募していただき、非常に盛況でした!

発表

スポンサー枠

vue-tourを使って心地よいチュートリアル画面を〜ユーザー体験の向上へ〜

f:id:ryonnsui1201:20181113172039j:plain スポンサー枠として、レアジョブの田原さんに発表していただきました。

vue-tourを使用したチュートリアル画面についての発表でした。 かっこいいチュートリアル画面が作れそうですね!

登壇

Nuxt generate Laravel Nova on AWSが綺麗にハマった話

弊社CTO @kotamatの発表です。

弊社で開発中の新規事業において、Nuxt.js・Laravel・Laravel Novaを取り入れているのですが、そこのインフラ構成で工夫した点に関しての発表でした。

俺の最強Vue.js環境

@k-okinaさんに発表していただきました。

storybook、Vue.jsコンポーネントパターン、Vue.js+OOPの話をして頂きました。 特に、Visual Regression Testに関してはVue.js #2 Advent Calendar 2018でも公開予定のようです。

LT

プログラミング初心者がVue.jsでwebサービスを作ってみたお話

@うなさんに発表して頂きました。

プログラミングを始めて3ヶ月で、Webサービスをどうやって作ったかという内容でした。 プログラミング初心者が、Webサービスを作り切るという姿勢に非常に触発されました。そして、初LTとは思えない素晴らしい発表でした。

electron vueでデスクトップアプリを作る

f:id:ryonnsui1201:20181113225328j:plain 会場を提供していただいた、 @jumbOS5さんに発表していただきました。

HTML/CSS/JS でデスクトップアプリケーションが作れる Electron を Vue.js で作成した話をして頂きました。Electron はJSが使用可能なのでモダンなJSでの作成が可能でReactやVue.jsの恩恵を受けることも可能で、とても便利です。

懇親会

発表後には、レアジョブさんに用意して頂いたピザを楽しみながら懇親会を行いました! f:id:ryonnsui1201:20181113230138j:plain f:id:ryonnsui1201:20181113230228j:plain

会場並びに、懇親会をスポンサーしてくださったレアジョブさん、本当にありがとうございまいた!

まとめ

Laravel×Vue.jsというテーマで発表して頂きましたが、2つを掛け合わせることで得られる知見を学ぶことができる、非常に有意義な会になったと思います!

次回

次回は日程、場所ともに未定です! 次回以降会場提供してくださる方いましたら弊社CTO @kotamatまでご連絡お願いします!

最後に

SCOUTER社では一緒に頑張ってくれる方を募集しております。 デザイン、エンジニアの皆さん興味のある方はご応募お願いします!

www.wantedly.com

11/1デザインイベントレポート

こんにちは、SCOUTERのデザイナーのたまご(@tamago_78)と申します。

SCOUTER開発者ブログに投稿するのは初めてです。よろしくお願いします!

 

先日11月1日に、グッドパッチさん・FABRIC TOKYOさんと合同でデザイナーイベントを開催しましたのでレポートさせていただきます。

エンジニア向けイベントを盛んに行なっているSCOUTER社ですが

実はデザイナーイベントは今回が初めてです。

 

今回、このイベントを開催するにあたり「デザイナーさんを採用したい!」という大きな目的がありました。 

どんなテーマにしたら人が集まるだろう?デザイナーが求めているものはなんだろう?

3社で話し合った結果、今回のイベントのテーマは

「業界構造を変えるデザイン」となりました。

【FABRIC TOKYO×SCOUTER×ReDesigner】業界構造を変革するデザイン - connpass

この、壮大すぎるテーマに私は資料作りにおいてとても苦労することになります。

 

 

f:id:tamago_78:20181104172740j:plain

会場はグッドパッチさんをお借りしました。

相変わらずエントランスがおしゃれです。

  

 

f:id:tamago_78:20181104172854j:plain

参加者の応募可能数はMAX60名、先着順でした。

前日に49名の応募をいただき、当日欠席(連絡あり)が10名、
結果当日参加者数は25名でした。

 

 LT 

グッドパッチさん 

f:id:tamago_78:20181104175305j:plain

一番最初のLTは、グッドパッチさん。

「ReDesigner」というデザイナー特化型キャリア支援サービスの紹介とデザインプロセスなどをお話いただきました。

スライドのテーマは「ReDesignerを立ち上げた背景と想い」です。

同じHR業界なので、

よくある質問項目・求人票をデザイナー向けにリデザインした、というお話はとても興味深く、勉強になりました。

 

ReDesignerはSCOUTER社も登録させていただいているサービスです。

私個人としても登録しておきたく考えています!

 

redesigner.jp

 

 FABRIC TOKYOさん

f:id:tamago_78:20181104175805j:plain

二番目はFABRIC TOKYOさん。

ビジネスウェアのカスタムオーダーができるサービスです。

 

fabric-tokyo.com

 

CTOからの事業説明(写真がなかった・・・残念)のあと、

「デザイナーがD2Cビジネスに身をおいてわかったこと」というテーマでデザイナーさんにお話いただきました。

サイトもめちゃくちゃおしゃれですが、スライドもめちゃくちゃおしゃれでした・・・・!

 

f:id:tamago_78:20181104201303j:plain

D2Cというビジネス形態は初めて聞きました。

 「D2C」とは「Direct To Consumer」の略で
メーカーが直で顧客と売買取引するビジネス形態のことを指すそうです。

 

SCOUTER 

f:id:tamago_78:20181104201609j:plain

  

f:id:tamago_78:20181104201635j:plain

最後の発表は私たちSCOUTERです。

CTO松本からの事業説明のあと、「業務フローを変えるデザイン」というテーマでLTさせていただきました。

 

簡単に内容を説明させていただきますと、

エージェントさんの業務フローはアナログなことが多く、時間をかけてしまい

転職者に向き合う時間が少ない。

SARDINEというサービスを通し、エージェントさんの業務の負担を減らすことにより

転職者に向き合う時間を増やせるようにし、転職者さんがよりよい転職体験をできるように変えていきたい。 

といった内容です。

当日のスライドはこちらです↓

speakerdeck.com

 

 

 パネルディスカッション

f:id:tamago_78:20181104203814j:plain

各社LTのあとはパネルディスカッションです。

質問内容は以下。 

・joinしたきっかけ
・入社した時の事業およびチームの状況は?その中でデザイナーとしてまず何をやりましたか?
・専門性が求められる業界が故に推進が難しかったことは?
・業界変革をしている会社でデザイナーに求められるマインドセットとは?
・デザイナーもコードがかける方がいいのか(会場からのQ&A)

 

簡単に、私が話したことを以下にまとめます。

 

・joinしたきっかけ

→メンバー、特に代表と面談した際に「この業界はアナログだから変えたい」という話を伺いとても魅了されたので、元々toCのアプリケーションに興味があったが真逆のtoBWEBサービスをつくっているSCOUTERにjoinした


・入社した時の事業およびチームの状況は?その中でデザイナーとしてまず何をやりましたか?

→入社してすぐは、OKR決めでばたついておりとにかくmtgばかり。デザイン制作をしても翌週には方向性が変わりボツに、ということが毎週のようにあった。そもそもユーザー(エージェントさん)のことをよくわからずにデザインを作れないなと思いユーザーインタビューに積極的に行きユーザーを理解するところから始めた。


・専門性が求められる業界が故に推進が難しかったことは?

→エージェントさんは自分が考えている以上にアナログな業務をされており、インタビューで伺うことを全て鵜呑みにしてはいけない、というところが難しい。


・業界変革をしている会社でデザイナーに求められるマインドセットとは?

→開発に集中していると製作者視点になってしまうことがあるため、デザイナーは常にプロダクトを俯瞰してみることが大事。なのでチーム内でユーザーに一番理解があるのはデザイナーでないといけないと考えている。


・デザイナーもコードがかける方がいいのか(会場からのQ&A)

→かけるにこしたことはない(他のデザイナーさんも同意見)。ただ、実装のコスト・作りやすさがわからないと実装者にとって困るという部分だけにフォーカスすると、コミュニケーションでどうにでもできると考えている。

 

懇親会 

f:id:tamago_78:20181104203748j:plain そのあとは懇親会です。

ごはんのメニューは私が選びました。

まい泉のサンドイッチは間違いないです。

 

たくさんのデザイナーさんとお話することができました!

中にはちらほらとエンジニアさんもいらっしゃいました。

 他の会社のデザイナーさんとお話する機会はそう多くはないので

デザイナーあるあるの話をして共感したり

大企業で勤めているデザイナーさんのお話を聞いて驚いたり

とても有意義な時間を過ごさせていただきました。

お話させていただいたみなさん、ありがとうございました!

 

 

最後に

 60名定員のところ前日まで49名、当日蓋をあけてみたら25名になり

イベントの集客は大変なんだな、と改めて実感しました。 

お越しいただきましたみなさんにつきまして、

何か持ち帰っていただけるようなものが提供できていますと幸いです。 

次回のデザイナーイベントの予定は未定ですが、

また機会がありましたら開催したく考えております!

その際にもっと良いスライドとLT内容が提供できるようがんばります。

 

 

SCOUTER社ではデザイナーさんを大募集中でございます。

少しでも興味のある方はDMかwantedlyにご連絡いただけますと嬉しいです。

CDO候補と書いてありますがあまりそこはお気になさらず興味があったら声をかけていただけると嬉しいです。気軽にお話しましょう!

お待ちしております!

 

www.wantedly.com

 

 

 

 

フロントエンジニアが効率的にデザインツールの使用とデザインの感性を磨く方法

お久しぶりです

株式会社SCOUTERの石岡(id:masaakikunsan)です。 この度10月からフリーランスをやめてSCOUTER社に戻ってくることになりました。

はじめに

普段フロントエンドをやらない人や始めたばかりの人はフロントエンドエンジニアに必要なスキルと言えば、HTML・CSS・JSあたりをイメージするのではないでしょうか? 

もちろんこれらも必須ですが、デザインの知識やデザインツールの使用なども必要になってきます。

理由を社内にデザイナーがいる場合といない場合の二つの観点であげてみましょう。

デザイナーがいる場合

デザイナーがいる場合、SketchやPhotoshopを使用しデザインをあげてくるでしょう。 その場合、フロントエンドエンジニアがデザインファイルを開きコーディングをする上で必要な情報を見る必要があります。

開発をしてる上で開発の理由やUXの観点からデザインに変更が必要な場合、エンジニアがデザインファイルを更新できると効率的に開発が進みます。

さらに、デザインを見た上でそれらに理論的に意見出しができればデザインのクオリティもあがるでしょう。

デザイナーがいない場合

デザイナーがいない場合、フロントエンドエンジニアにデザインを求められることがあります。 そういった時にデザインツールを使ってデザインができればデザインファイルでのデザインの歴史を貯めることもできますし、他のフロントエンドエンジニアも楽にコーディングができます。

これらの理由で私はフロントエンドエンジニアもデザインの知識やデザインツールの使用方法を知る必要があると考えています。 

デザインの理論的な知識は、本などで読むとして今回はデザインツールの使用方法とデザインの感性を同時に磨く方法を紹介します。 

トレース

トレースとは、言葉の通りデザインをスクショし、撮ったスクショをそのままデザインツールを使って真似て作成することです。 トレースをすることのメリットは三つあります。

  1. デザインツールに慣れる
  2. デザインの引き出しが増える
  3. デザインを考える力が身につく

デザインツールに慣れる

トレースをする際にSketch等のデザインツールを使うことで実際にそのデザインツールの使い方を知ることができます。 トレースを重ねれば使い方やコツなどを覚えていきデザインを早く作成することが可能になってきます。

デザインの引き出しが増える

トレースをする度に色々なデザインを目にすることになります。 色々なデザインを見たことで自分が実際にデザインする時に、「あのTableデザイン使ったらいい感じになりそう!」とか引き出しを増やすことができます。

デザインを考える力が身につく

トレースの肝はトレースをした後になんでこうなっているのだろうとデザインの根拠を考えることです。 そうすることで色々なことが見えてきて色の使い方やレイアウトやフォントなどの知識が身につきます。 ここで自分なりにトレースしたデザインの根拠などを会社のドキュメントに貯めておくと会社の財産になるのでトレースしている人はドキュメントに書き溜めると良いでしょう。

毎日1サイトトレースしたら、一年で365サイト分の引き出しと知識が増えます。 そして、毎日デザインツールを使うことでデザインスピードはかなり上がるでしょう。

では、実際にトレースの仕方を教えていきます。

Sketchでトレースをする

まず、トレースしたいサイトを開きます。 今回は、弊社のコーポレイトサイトでやっていきます。 サイトを、開いたらスクリーンショットを取り、Sketchのアートボードの上に画像を貼り付けましょう。 そして、アートボードと画像のサイズをあわせれば準備は終了です。 あとは、同じパーツを画像の上に作っていきましょう。 下記は作業風景です。 f:id:masaakikunsan:20181001065743p:plain

スクショした画像の上に、要素を配置しそれを透過させ後ろを全く同じものを作っていく感じです。 全部できあがったら透過をなくせば全く同じデザインがSketchにできあがるでしょう。 できあがったら余白や色など色々観察してなぜを考えて見ましょう。

これらでデザインツールの使用方法とデザインの感性を磨くことができます。

最後に

フロントエンドエンジニアがデザインまでできたらValueはかなりあがると思います。 今回紹介した方法はあまりトレースの方法としては一般的ではないと思うのでもしやり方が合わなければUIトレースで検索してみるといいでしょう。 フロントエンドエンジニアでデザインスキルが欲しい方はぜひ試して見てください。

 

NuxtMeetup#5開催しました

こんにちは @hirokinishizawa です。

昨日10/18にNuxtMeetup #5を開催しました。

nuxt-meetup.connpass.com

今回はCyberAgentさんに会場をご提供頂きました。本当にありがとうございます。

f:id:hiroki-nishizawa:20181019113355j:plain

アンケート

今回参加枠100人という中総勢240名の方が応募してくださり誠にありがとうございます。

その中でアンケートを200人もの方が答えてくださいました。アンケート内容としてはVue.js、Nuxt.jsを業務、趣味どちらで使用しているかという内容なっております。

f:id:hiroki-nishizawa:20181019114313p:plain

結果はこのようになっており、Vue.jsと同じぐらいNuxt.jsを業務で使用しているそうで驚きました。Nuxt.jsの知見を共有したいという思いでNuxtMeetupを開催し始めたのでだいぶ広まっているのかなと思います。

発表

バンドルファイルの肥大化問題解消にみる_Nuxt.jsの成熟化 @wkm2134

speakerdeck.com

CyberAgentの若松さんがNuxt.jsのメリットや注意点について話してくれました。 Vue−cli3の登場で規約などの旨味は減ったがSSRを手軽に実装できる点はたしかになと思いました。

フロントエンジニア(実稼働まで)ひとりでできるもん @hiroki_yoshitugu

speakerdeck.com

DODAのサービスの説明と、どういう構成で実装されているのかというところを発表していただきました。

Vue or Nuxt @masaakikunsan

slides.com

弊社フロントエンジニアの石岡が発表してくれました。Vue.jsとNuxt.jsのどちらを採用するのかそれぞれのメリットについて話してくれました。 Nuxt.jsのメリット「規約があるのでプロジェクトを破壊しにくい」。とりあえずNuxt.jsを使っておけばいいと言うのは違うんだなと改めて思いました。

Vueを広めるためのNuxt.jsの可能性 @かめぽん

speakerdeck.com

Vue.jsを定着させる施策としてNuxt.jsを使用するというお話をしてくれました。 Vue.jsよりも前にとりあえずNuxt.jsを定着させるためにNuxt.jsを使用する。組織によっていろいろなやり方があるんだなと思いました。

Nuxtを使っていて地味にハマった小ネタ紹介 @yuki_terashima

speakerdeck.com

Nuxtを使って実際にハマったこと解決方法について話してくれました。

SSRをしている時は500系エラー発生時にlayouts/error.vueが読み込まれないのでapp/views/error.htmlで設定すると行けるらしい。知らなかった。。。 細かい所のハマりネタだったのでためになりました。

nuxt-i18nを使ったWebサイトの多言語化 @odan

speakerdeck.com

nuxt-i18nのお話をしてくれました。 nuxt-i18nの日本語情報がなく公式ドキュメントにp-rを投げる?という発表をする予定だったのに発表2日前にqiitaを書いた人が現れたのは面白かったですw ルーティングを自動生成してくれたりとても便利そうなので気になりました。

NuxtでのJAMStackな開発とポイント @tame

speakerdeck.com

Nuxt.jsでJAMStackな開発をするお話をしてくれました。 前回もお話いただいたtameさん。いろいろな技術的チャレンジをされている話は聞いていてとても面白かったです。

懇親会

LT後にはCyberAgentさんが用意してくださったお寿司とピザを囲みながら親睦会を行いました。

f:id:hiroki-nishizawa:20181019151139j:plainf:id:hiroki-nishizawa:20181019151210j:plain

会場提供並びに懇親会をスポンサーしてくださったCyberAgentの皆さん、ありがとうございました!

次回

次回はまだ未定です。

次回は株式会社SMSにて行われます。

次回以降会場提供してくださる方いましたら弊社CTO kotamatまでご連絡お願いします!

最後に

SCOUTER社では一緒に頑張ってくれる方を募集しております。 デザイン、エンジニアの皆さん興味のある方はご応募お願いします!

LaravelのAPI開発でPhpStorm以外使わなくなった話

こんにちは、 id:kotamat です。 現在SCOUTER社では、新規事業の開発も行っており、そちらのバックエンドを開発しているのですが、そちらでは様々な手法を導入し、効率化を図っています。 今回はPhpStormを使った効率化の紹介となります。 (ちなみに僕はIntelliJ IDEA派なので、PhpStormではないですが、基本的に同じことができるのでPhpStormとして紹介させていただきます。)

f:id:kotamat:20181019110817p:plain

APIに必要な開発フロー

基本的に下記のフローをAPI開発で行うかと思います。

  1. 実装の記述
  2. テストの記述、実行
  3. データベースの確認
  4. APIスペックの記述
  5. GithubのPR作成

こちらすべてPhpStormで構築しているので、そちらの紹介をさせていただきます。

今回使用したプロジェクトはこちらの方に反映しています。

github.com

実装の記述

まぁこちらは普通にPHPを書いていく感じなので、サラッと説明します。

PhpStormでは、型宣言している変数だけではなく、PHPDoc、assert、instanceofでのifガード下等型が明示的に推論できる箇所において補完が効いてくれます。

f:id:kotamat:20181019110006g:plain f:id:kotamat:20181019105831g:plain

Laravelでの開発では、基本的にDI(Dependency Injection)でのインターフェース定義をしながら環境によって実装クラスを分けるというような実装をよく行いますが、下記のようにインターフェースと実装はクリックひとつでそれぞれにジャンプすることができます。

f:id:kotamat:20181019105757g:plain

テストの記述、実行

PHPUnitのテストを記述すると、メソッドとクラス定義の左側に再生ボタンが表示されます。 こちらをクリックすることで、テストの実行が可能です。

また、対象メソッドやクラスのブロック内で、事前に割り当てたショートカットキーを実行すると、同様にテストを実行することができます。

f:id:kotamat:20181019105717g:plain

一度実行したものは、右上の再生ボタンで再実行することができます。 これはどのファイルを開いていても、最後に実行したものが実行されるため、 TDDなどテストを確認しながら実装していく開発手法を行っていると良さが実感できます。

どちらもとても良く使うので、ショートカットキーに登録して気軽に実行できるようにするとよいかと思います。

LaravelでのTDDに関しては、最近発売されたLaravel本にとてもわかり易く記述されているので、参考にしていただけるといいかなと思います。

techblog.scouter.co.jp

データベースの確認

データベースを接続するようなテストを書く場合、実際にどのようなデータが挿入されているかを確認したいことがあるかと思います。

その際も、右側のDatabaseというところから、必要なデータソースを登録することで、テーブルの一覧から簡単にその中身を見ることができます。

f:id:kotamat:20181019105627g:plain

もちろん書き込み権限のあるユーザでログインすればデータベースの中身も編集することができるため、デバッグ時に特定の条件を再現したい場合などもサクッとできてしまいます。

APIスペックの記述

今までは通常のPhpStormの使い方でしたが、下記のブログで紹介したAPIスペックの自動出力のプラグインを使うことによって、APIスペックの生成から挙動確認までPhpStormで行うことができます。

techblog.scouter.co.jp

composer require --dev kotamat/laravel-apispec-generator

上記をインストールし、routes/api.phpをこんな感じにして、

<?php

Route::get('/', function () {
    return ['success' => true];
});

下記のようなテストファイルを実行すると

<?php

namespace Tests\Feature;

use ApiSpec\ApiSpecTestCase;
use Tests\CreatesApplication;

class ExampleTest extends ApiSpecTestCase
{
    use CreatesApplication;

    protected $isExportSpec = true;

    /**
     * A basic test example.
     *
     * @return void
     */
    public function testBasicTest()
    {
        $response = $this->getJson('/api/');

        $response->assertStatus(200);
    }
}

storage/app/ディレクトリに、APIスペックが出力されます。

f:id:kotamat:20181019104244p:plain

こちら.httpという拡張子になっているのですが、これはPhpStormで認識できるRFC準拠のhttpプロトコルの記述で書かれたものだと、実行することができます。 もちろん出力されるAPIスペックは上記仕様に準拠しており、出力されたものをそのまま実行できます。

まず、php artisan serveでサーバーを立ち上げ、出力されたファイルの左側にある再生マークをクリックすると、下記のようにレスポンスが表示されます。

f:id:kotamat:20181019105552g:plain もちろん生成されたファイルは編集可能であるため、テストで記載しなかった細かい挙動の確認や、テストデータの手動流し込みなどを簡単に行いたいときは、リクエストボディをいじって実行するだけです。

Gitでコミット、GithubのPR作成

各種テストを行い、PRを出せるタイミングになったら、PhpStorm上から差分を確認してコミットしていきます。

下記のように必要な変更箇所だけチェックを付けてコミットします。

f:id:kotamat:20181019105527g:plain push, PR作成もそれぞれコマンドが用意されており、自由にショートカットキーを割り当てることができるので、PR文を作成してsubmitすると、ポップアップで対象PRのリンクが出現し、そのままPRの詳細に遷移することができます。 f:id:kotamat:20181019105452g:plain f:id:kotamat:20181019105348g:plain f:id:kotamat:20181019105235p:plain

まとめ

実装からPRの作成まで、一連の流れをすべてPhpStormで行う方法をお伝えいたしました。 こちらに記載しているのはあくまで表面的なところであり、もっとたくさんの便利機能が備わっているので、いろいろ触ってみながら自分にとって良い開発環境を整えてみてはいかがでしょうか?

最後に

SCOUTERではLaravelエンジニアを絶賛募集しております!

www.wantedly.com

興味のある方は https://twitter.com/kotamats のほうに気軽にご連絡ください!

また、いくつかイベントを開催しております。 もしご都合つく方いらっしゃればお気軽にご参加ください! Laravueに関しては、次次回以降の会場提供してくださるところも募集しております!

techscouter.connpass.com

laravue.connpass.com

「Nuxt.js ビギナーズガイド」のご紹介

こんにちは、hirokinishizawaです。

f:id:hiroki-nishizawa:20181017212448j:plain

10/17に「Nuxt.js ビギナーズガイド」がついに発売されましたので読んで思ったことについて書こうかと思います。

全体の感想

自分はコードを初めて触ってから8ヶ月になるのですが、progateを一通り終えて初めて触ったフレームワークがNuxt.jsだったので、Nuxt.jsのドキュメントが豊富でも書いてあることの意味が分からなかったりすることが多く、始めた当初にあればなと思うぐらいわかりやすく書かれているので初学者の方にはオススメ出来るなと思いました。

CHAPTER1

冒頭でも言いましたが初めて触れたフレームワークがNuxt.jsで、その後もNuxt.jsとVue.jsで開発を進めてきたのでフロントエンド開発の情勢について全くの無知のまま過ごしてきました。

ここ数年間のトレンドを俯瞰してみると、流れが早いといわれたフロントエンドは今は昔であり、非常に安定し、停滞した状態が続いているといえます。

SPAとAPIによるWebアプリケーションが自分の中では当たり前だったので、他の方法を知ろうともしていませんでした。

他にも「Nuxt.jsがフロントエンドにもたらすもの」という項目で、

Nuxt.jsが利用されているのはどこに理由があるのでしょうか。そこには、筆者は規約という概念が大きく関わっていると考えています。

自分がVue.jsでプロジェクトを作成している時には自由に書いていました。実際にはNuxt.jsでは無意識ではありますが、これがルールだというぐらいの認識で書いていました。

CHAPTER2,3,4

CHAPTER2,3では実際にコードに触れながらQiitaのNuxt.jsタグのビューアーを一緒に作っていくような感じになっています。

この2つのCHAPTERを理解できれば基本的な開発は問題なく出来るようになるのではと思いました。仮に詰まったりしても完成品のサンプルがあるので見直すことが出来ます。

CHAPTER4ではさらに実用的になっていて、ブログの投稿サイトを作成していきます。こちらでもしっかりと完成品のサンプルが乗っているので分からなくなったら確認しましょう。

Nuxt.jsとは関係無いのですがこのCHAPTERの終わりのところでLinterの話を少ししています。自分的に環境の話まで含めてくれるので実際に新規プロダクトを作成するのにとてもいいのではないかと思いました。

CHAPTER5

自分はフロントのテストを書いたことがなく先日e2eテストというものを知りました。

CHAPTER5ではテストの必要性や実際にvuexのテストコードの書き方などが書かれていました。

その中でどこまでテストを書くのかという項目があったので引用させてもらいます。

Vuexデータストアと、挙動が複雑なコンポーネント、そしてフレームワークに依存しないレイヤのコードに絞ってテストを書くべき。

CHAPTER6

3つのモード「Universal」,「generate」,「SPA」のそれぞれメリット、デメリットについて書かれています。実際のメリット、デメリットについては本書を読んで見てください。

自分も3つのモードについてはドキュメントに書かれていますがメリット、デメリットだったり運用コストについては理解できていませんでした。適切なデプロイ方法の選定をするのに知って置くべき内容だなと思いました。

最後に

冒頭でも話しましたがビギナーズガイドというだけあって初学者の方や自分のように実際にどんな理由で使用されているか分かっていないまま開発を進めている人にとってレベルアップにもなるし、中級者の方でもNuxt.jsが出来るまでの経緯だったりフロントエンド開発の情勢についても知れると思うのでとてもオススメできる本だと思いました。 全部で200ページの軽い本ですので読んでみてください。

弊社SCOUTERでは隔月でNuxtMeetUpというものをやらせて頂いています。今日10/18の19時30分からNuxtMeetUp #5を行います!YouTubeで生配信もいたしますのでよければご視聴ください。 始まった際にこちらTwitterアカウントでアナウンスを行いますのでフォローしていただければと思います。

nuxt-meetup.connpass.com

「PHPフレームワーク Laravel Webアプリケーション開発」のご紹介

こんにちは、 id:nunulk です。

いま話題の「PHPフレームワーク Laravel Webアプリケーション開発」が SCOUTER 社に置いてあったので、ざっと読ませていただきました。

f:id:nunulk:20181014111718j:plain

主に「Chapter 3 アプリケーションアーキテクチャ」や「Chapter 7 処理の分離」の章について読んだ感想を書こうと思います。

全体の感想

まず、全体の感想ですが、 Laravel 自体の解説については、公式ドキュメントが充実しているのと、日本語訳も追従が早いので、個人的には書籍の必要性はあまり感じてはいませんでした。

ただ、本書は、JWT を使った認証だったり、Elasticsearch を使った全文検索の例だったりが載っていて、Laravel だけにとどまらず、Laravel を使ってウェブアプリケーションをつくる上で参考になる情報がたくさん掲載されているので、公式ドキュメントだけでは得られないものが得られるんじゃないかと思います。

アプリケーションアーキテクチャについて

ウェブサービスや業務システムでは、チュートリアルや公式ドキュメントに載っているような単純なサンプルコードでは単純すぎて参考にならなくなってきますが、本書ではアプリケーションアーキテクチャについての記述が多くあり、実際に業務で書くような複雑なアプリケーションにも適用可能なアイデアが手に入るんじゃないかと思います。

本書に載っているアーキテクチャ関連のセクションについて、いくつか紹介します。

ADR

ADR がなにか、というのは本書を読んでいただくとして、以下の文を引用しておきます。

ADRパターンを適用すると、実際にはMVCパターンと大きな相違はなく、MVCパターンよりも、より処理の内容が具体化したように感じられる。 (略) ここで重要なことはパターン名ではなく、どのような考え方でクラスや処理グループを分割し、責務を与えることであり、「どうしたらよりよいアプリケーション設計が行えるか」です。

アプリケーションが複雑になり、依存関係が増えてくると、どんどんクラスが大きくなってきて、見通しが悪くなってきますので、こうした分割手法は知っておいて損はないと思います。

レイヤードアーキテクチャ

Laravel は素晴らしいフレームワークですが、アプリケーション独自のクラスや処理(ドメインモデル、ドメインロジック)を書く際の指針は、自分で、あるいはチームで決めないといけないので、試行錯誤が必要かと思います。

それでも、先人たちの知恵を参考に、そうした複雑さを分解して、あるいは特定のクラスに閉じ込めることで、コントロールしやすくなるので、ドメイン駆動設計を理解している著者による、本書のサンプルコードは参考になるはずです。

この章以外にも、「5-5 リポジトリパターン」のところに詳しく載っているリファクタリングのところとか、既存のアプリケーションにリポジトリパターンを適用するようなケースで参考になるんじゃないでしょうか。

実用的な非同期処理の例

Laravel には、キューを使った非同期処理を行う仕組みがありますが、実用的な例、というのはインターネットではなかなか見かけないので、実際の使い方に不安を持っている方も多いんじゃないかと思っているんですが、本書では、supervisor の設定や、ElasticsearchClient の使い方も載っていて、実用的と思います。

本書でアプリケーションアーキテクチャについておおまかに理解したら、Chapter 3 の章末に載っている参考文献を片っ端から読んでみるのもいいかもしれません。

おわりに

全体で 500 ページを超える本ですが、Chapter 2 以降は一度目を通すのをおすすめします。どの章にも、公式ドキュメントを読んだだけでは得られない、へーこんな使い方もできるのかーという発見があるんじゃないかと思います。

SCOUTER では、不定期に「ワイワイLaravel語る会」というのを開催していますので、本書を読んだ感想とか、本書の記載を元にした議論とか、Laraveller のみなさんと語り合えたらうれしいです。

詳しくは Connpass のグループを見てみてください。

techscouter.connpass.com