Vue on Laravelというモノリスを解体してNuxtへ移行しました!

こんにちは、株式会社SCOUTERの開発部の小平(@ryotakodaira )です。

f:id:ryotakodaira:20181212011618p:plain 以前Twitterにてこのようなツイートをして、Nuxt移行の記事を書くと宣言してしまっていたので、書く書く詐欺で終わらないように今回の開発の背景などを含めて記事にしてみました。

弊社では、SARDINEという法人向けの業務管理ツールを提供していますが、そのアプリケーションはLaravelがベースにあり、その中でVueを使う構成で運用されていました。

今回、そのようなLaravelに依存しているVueアプリケーションからフロントエンドのみを切り出す形でLaravel API+Nuxtアプリケーションに置き換えを行いました。

この記事では、なぜNuxtに移行したのかや、その時に少し躓いた点について記していこうと思います。

なぜフロントを切り出す選択をしたのか

今回リニューアルをしたアプリケーションはリリースから1年6ヶ月程が経過しており、当然のことながら同期間立て続けにシステムの追加開発/運用を続けてきました。

当初は立ち上げから間もないサービスということもあり、スピード重視での開発体制であったため、アプリケーション構成も最小構成のLaravel(bladeテンプレート)の中でVueを使う構成で開発を進めていました。

機能追加を繰り返しコードベースの量が増えたり開発に関わるメンバーが増えたことによって以下のような問題が顕在化してきました。

ページ読み込みにかかる時間が長いことによるユーザビリティの低下

  • 前述の通り、Laravel(bladeテンプレート)の中でVueを使う構成で作られていた
  • そのためクライアント側のルーティングをLaravel(PHP)が握っている構成でアプリケーション自体が構築されておりvue-routerなども使用していなかったため、ページ遷移のたびに「JS/CSSファイルのダウンロード→Vueインスタンスの初期化」が行われてしまっていた

採用要件を高めてしまっている

  • バックエンド、フロントのコードが完全に分離出来ていないため、LaravelとVueの両方に理解がないと1つの機能開発を行うことが出来ない状態になっていた
  • 仮に両方出来たとしてもバックエンド、フロントのそれぞれの責務範囲がはっきりしていなかったためキャッチアップにも時間がかかってしまう

開発効率の低下

  • はるか昔に導入した化石のようなパッケージ群の影響範囲が分からず毎回影響範囲を調査する必要があった
  • ESLintやPretterを入れていなかったためコードスタイルが無法地帯
  • モノリシックな構成になっているためバックエンド、フロントの両方を気にかけて開発を行わないとならない
  • コードが増えるにつれてjavascriptのビルドの時間が長くなり開発中の待ち時間が増加(laravel-mix)

ということでそれらを一気に解決するために、フロントを切り出す開発に踏み切りました。

移行時に気をつけたこと

VuexStoreの設計

  • NuxtのSPAモードで開発するので、今までとは違ってページ遷移するたびにStoreが初期化されない(元々はページ遷移でどうせ初期化されるからちゃんとやってなかったw)
    • ページ遷移してもStoreは引き継がれるため遷移先の挙動に影響を及ぼさないように調整
  • コンポーネント内にdataプロパティーとして状態を持っている場合、ページ遷移でコンポーネントが破棄されると当然dataプロパティーも破棄されるので同じページに戻ってきた時に再度リクエストが走り、無駄が生じてしまう可能性がある
    • Vuexをフル活用しグローバルに状態を持つように変更して該当ページに再流入してきた時はAPIにリクエストを送らずにVuexからデータを降ろしてくるように処理を修正する

移行時に躓いたこと

驚くべきことにNuxtへの移行に大きな問題には遭遇しませんでしたが、 唯一少し躓いたところがありましたので、その部分の説明をします。

this.$router.pushの仕様

this.$router.push('hoge', {
  query: {
    params: ['foo', 'bar']
  }
})

Nuxtで上記のようにルーティングのプッシュを行うと、デフォルトでは http://example.com?params=foo&params=bar のようなURLになります。

ただ、このクエリーパラメータのフォーマット形式だと弊社のサービスにとっては問題が有りました。

Nuxtのページコンポーネントで受け取った query のオブジェクトが意図した形では無いという問題でした。

// http://example.com?params=foo&params=bar

query = {
  params: ['foo', 'bar']
}

// http://example.com?params=foo

query = {
  params: 'foo'
}

👆配列で欲しいが文字列になってしまう

要件としてはparamsが一つだったとしてもパースした結果は配列として受け取りたいので、nuxt.config.jsに以下のような記述を追加してvue-routerを拡張して解決しました。

query-stringというnpmパッケージを通すことによってクエリパラメーターのフォーマットを指定できるのでその方法を採用しました。

ちなみにquery-stringを通すとURLは http://example.com?params[]=foo&params[]=bar のようになります。

module.exports = {
  router: {
    parseQuery(query) {
      return require('query-string').parse(query, {
        arrayFormat: 'bracket',
      })
    },
    stringifyQuery(params) {
      if (Object.keys(params).length === 0) {
        return ''
      }
      const query = require('query-string').stringify(params, {
        arrayFormat: 'bracket',
      })
      return `?${query}`
    },
  },
}

まとめ

VueをNuxtへの移行は今回が初めてでしたが、移行中は大きな問題は特に発生せずNuxtはまさにかゆいところに手が届くという言葉がふさわしいなと実感しました。

弊社と同じような課題を抱えている開発チームにはぜひ取り組んでみて欲しいと思います!

今回のNuxtへの移行にはエンジニアメンバー4人で3週間かかりましたが、顕在化していた問題は無事解決されたため、リターンとしては十分で合ったと思います。

ただ、Nuxtへ移行する前のLaravel(bladeテンプレート)の中でVueを使う構成のアプリケーションが他にも存在しているためタイミングを見てそちらもNuxtに移行していきます。

次は2回目なのでもっと早く終わると信じて。

さいごに

SCOUTER社の開発チームの取り組みを紹介させていただきました! サービスが成長していくにあたって、これからもメンバーを増やしていきたいと思っています。

興味のある方は下記から応募いただくか、@ryotakodairaにご連絡ください!!

www.wantedly.com

www.wantedly.com

www.wantedly.com

Frontend Conference Fukuoka 2018 に参加してきた

こんにちは、 @masaakikunsan です。

カンファレンス代及び、交通費等を会社が負担してくれ、されに土日の参加でも出勤扱いになるので気軽に地方でのカンファレンス参加が可能になり感謝です。 今回は福利厚生を使い、12/08 のFrontend Conference Fukuoka 2018 に参加してきましたので、カンファレンスの模様を伝えます。

frontend-conf.fukuoka.jp

初開催となる今年のテーマは、開発現場の「イマ」を知って、フロントエンドをもっと楽しもう でした。 そのテーマに相応しい登壇者と発表内容だったのでとても満足度の高いカンファレンスでした!

それでは、僕が聞いた内容をまとめていきます。

発表

2019年までに見直しておきたいCSSJavaScriptの手法 @tonkotsuboy_com

speakerdeck.com

鹿野さんが CSSJavaScriptの「イマ」を採用事例も交えながら発表してくれました。 モダンなフロントエンド開発をできていない人は一度目を通した方がいい「イマ」が詰まっていました。 簡単に内容をまとめていきます。

  • CSS の見直し
    • ボックスレイアウトには float より Flexbox や CSS Grid を使う
    • Flexbox は複数行レイアウトが苦手なのでその場合は CSS Grid で対応する
    • Edge が Chromium ベースになったことにより CSS の新機能の普及が進む可能性がある
    • CSS の最新機能や対応状況は各ブラウザーの公式ブログと Can I useで追える
  • JavaScript の見直し
    • ES2016~2018 の便利な機能の紹介
    • 2019年以降の新機能は AltJS で対応可能
    • JS の最新機能や対応状況は tc39/proposals と ECMAScript 6 compatibility table と各ブラウザーの公式ブログで追える
  • ツールの見直し
    • IEのサポートはまだまだ続くので IE 対応が必要なものは Autoprefixer で自動変換
    • コードフォーマットは開発者任せではなく Prettier を使う
    • パッケージマネージャーは npm から yarn に!
  • Build 環境はツールに任せる

これからのWebアプリケーションに求められるアクセシビリティの設計と実装

ヌーラボさんとディーゼロさんが backlog のアクセシビリティ向上においての問題点・実際の様子などを踏まえアクセシビリティの重要性について発表してくれました。 この発表を聞くまで、サービスの使用者において健常者の方が圧倒的に多いだろうとアクセシビリティをないがしろにしてきました。 この発表内容を聞き考えを改め、優先順位こそ高くないかもしれないがこれは会社で取り組まないといけない問題だとものすごく反省しました。

  • スクリーンリーダー
    • 全盲の人がまずどうやってサービス・WEBを使っているか調査した
    • スクリーンリーダーは読み上げがものすごく早く健常者はほぼ聞き取れないが全盲の人はこれを聞き取れている
    • テキストでの説明はしっかりと合ったほうがスクリーンリーダーを使っているユーザーには良いのでは?
  • alt 属性
    • 地図の画像のalt 属性に地図とだけ書いても全盲の人にはなにもわからない
    • 地図の詳細を記入しても情報量が多く伝わらない
    • 電話での道案内をイメージ。目立つ場所から目的地までを説明でわかりやすくなる
    • 視覚情報がなしでどうやれば伝わりやすいかを考える
  • 一時的障害
    • 例えば、突然骨折をしてキーボードが使えなくなったり、キーボードやマウスが壊れたりも一つの障害
    • アクセシビリティは以外と身近な話
    • 自分がもし普段どおりのことができなくなったらと考えることが大事

この発表は今回の Frontend Conference Fukuoka で一番個人的に刺さった発表でした。 弊社はHRTech事業を展開していて、全人類が対象ユーザーになっているので僕が率先して社内でアクセシビリティの取り組みをやっていきます!

500日のトライエラーから生まれた大規模設計ノウハウ @okunokentaro

speakerdeck.com

奥野さんが初期から長期に渡っての設計のノウハウを発表してくれました。 エンジニアは目を通しておくノウハウが詰まっていました。 設計はプログラミングだけではなく、チームのことも考える必要があるという内容には確かになぁとなり、今後 PM としてDXにももっと注力しないとなと感じました。

  • 設計とは
    • 負債は生まれるもの、返済を常に意識する
    • 設計に終わりはない
    • 根本的設計から始まり中長期設計から短期設計の繰り返し
    • フェーズごとにヤバいを予見することが大事
  • 根本的設計
    • 根本的設計は基本的に返済が難しいので慎重に取り組む必要がある
    • 本質を見抜きどういう技術選定をするべきか考える
    • 少人数で高速な意思決定を心がける
  • 中長期設計
    • 開発メンバーが変わったり無茶振りの対応だったりと日々流動的である
    • ここから設計スキルより、開発する上での環境の設備が大事
    • コードレビューをする
    • コードだけではなくチームの品質にも目を光らせる
    • メンバーの得手不得手を理解し円滑な開発を進めるにはどうすれば良いか
    • 意思決定を減らすために規約の導入・客観的な根拠を導入する
    • リファクタリングを目的にせずなぜするのかを考える
  • 短期設計
    • 捨てやすい開発をする
    • 中長期設計が苦手なメンバーに開発をさせて中長期設計が得意なメンバーがレビューすると良い
  • まとめ
    • 自分が心がけて良きレビューと良き仕組みを設計しよう

仕組みを作る仕組みを、作る仕組みを作る @agektmr

えーじさんが web 2.0 から 「イマ」に至る流れを通し WEBの進化と今後について発表してくれました。 自分の知らない機能やイマのWebを知れてとても勉強になりました。 個人的にAMPの話とWeb Authenticationの話をとても聞いててよかったです。

  • Webの進化
    • 誰もがデバイスを持ち、Webを見れば欲しい情報が手に入る時代に
    • Web Authentication
      • 指紋での本人認証をサービスに導入できる。Yahoo!がプロダクトに導入したらしい(すごい)
  • AMP
    • 規約を設けることで高速でコンテンツの表示を可能にしている
  • PWA
    • web share target等の紹介

Webは誰にも所有されない唯一のプラットフォームという内容には確かになぁと感じました。 メモが少なくこれぐらいしかまとめられませんすみません...

感想

最後は運営委員長の @mya_ake さんが今回のカンファレンスの目的や2019やるかもという発表をしてくれました。 福岡のフロントエンドがもっと盛り上がるといいなぁ東京から思っております(福岡で仕事したい) 久々に参加して良かったと心から思える勉強会でまた来年も開催をお願いします!

P.S.

LINE Fukuoka まじぱないの! (オフィスが神すぎた)

f:id:masaakikunsan:20181210125511j:plain

f:id:masaakikunsan:20181210125741j:plain

さいごに

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

www.wantedly.com

www.wantedly.com

NuxtMeetup#6 開催しました

こんにちは! @masaakikunsan です。

昨日、NuxtMeetup #6を開催しました。

nuxt-meetup.connpass.com

今回は、株式会社エス・エム・エスさんに会場をご提供いただきました!

f:id:masaakikunsan:20181207131546j:plain

アンケート

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

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

f:id:masaakikunsan:20181207175317p:plain

結果はこのようになっており、前回の NuxtMeetup と比較しても業務利用者が増えており Vue.js / Nuxt.js がどんどん普及されていっているのを実感できました。

発表

NuxtとTSと私 @mobcov

slides.com

スポンサーセッションでは、Nuxt + TS か Nuxt (SSR) のどっちの話が聞きたいかを会場で挙手してもらい多い方のスライドを発表するというすごいLTでした。 Nuxt + TS の知見はまだ全然世の中に出回っていないのでとてもためになる内容でした。 実際に開発した人にしかわからない話が聞けてよかったです。

Nuxt.jsでSPA_Webアプリを初期構築した話 @kanbo0605

speakerdeck.com

Nuxt 歴二ヶ月での登壇でしたが、Nuxt + Laravel でどのように SPA アプリケーションを作ったかという内容の濃い発表でした。 JWT でのログインフローなども説明されており、これから Nuxt + Laravel で開発をしようとしている方はぜひ目を通して欲しいです。

初心者エンジニアがSPAサイトを作ってみた @r_sato1201

speakerdeck.com

弊社エンジニアの佐藤が発表してくれました。 2ヶ月前に SCOUTER に入社し、ほぼ初心者の状態から Nuxt に触れ、そこから自分のバンドの HP を Nuxt + Contenful で作った話でした。 入社からものすごいスピードで成長をしていて今後の活躍が期待できる新人ですので、Twitterなどフォローしてあげてください(笑)

Nuxt.js with Apollo Client 2018 @takanoripe

speakerdeck.com

徐々に普及していっている Apollo の話をしてくれました。 GraphQL に興味はあるもののまだ開発で使えていなかったので、Nuxt.js での設計方針・可能性・課題の話は勉強になりました。 GraphQLはものすごく期待のできるものなので、どんどん採用事例などが増え現場での使用が増えるといいなぁと思います。

Nuxt で写真ギャラリーを作った話 + α @mtmtkzm

speakerdeck.com

先日の event-streem の件は LIG とは関係ないよという最高の掴みから、Nuxt で写真ギャラリー作った話をしてくれました。 最後には公開リリースをしようとしたのですが、リリースに失敗し残念ながら完成品を見ることができませんでした。 NuxtMeetup 後リリースに成功したみたいなのでぜひ見てみてください。

RoomClip の Nuxt.js の移行の話

speakerdeck.com

RoomClip を Nuxt でリニューアルした話をしてくれました。 Nuxt での移行で何が良かったのかどうやったかという内容なので、これから Nuxt の使用を検討している方におすすめできる内容でした。

破壊しやすい Nuxt プロジェクトの作り方 @masaakikunsan

slides.com

LT 枠が一個埋まっていなかったので @masaakikunsan がイベント中にスライドを作成し、飛び込みで発表をしました。 司会をしながらのスライド作成でしたのでかなり雑な作りになってしまってはいますが、新規プロダクトにおいて作り直しやすい環境で最速で開発を行うコツと作り直しやすく作る必要性についてはある程度書けたとは思います。

懇親会

LT 後に、エス・エム・エスさんが用意してくださったピザとお酒を囲んで懇親会を行いました。

f:id:masaakikunsan:20181207140213j:plain

f:id:masaakikunsan:20181207135934j:plain

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

次回

次回はまだ未定です。

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

最後に

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

www.wantedly.com

www.wantedly.com

SCOUTERの開発メンバーを紹介します!

SCOUTERの開発メンバーを紹介します!

f:id:kotamat:20181207124005j:plain

こんにちは、 @kotamat です。

弊社の開発のメンバーは個性的な方が多く、なかなか紹介する機会もないので、紹介させていただきます!

  • 入社・ジョインまで何をやってきたのか
  • 入ってから何をしているのか
  • 今後の展望

を紹介させていただきます。

まずは僕の自己紹介から。

kotamat

kotamat | SCOUTER CTO エンジニア採用活動中 (@kotamats) | Twitter

入社・ジョインまで何をやってきたのか

大学在学中にクーポンサービスを立ち上げたり、ソシャゲの運用や立ち上げ、ベトナム法人の立ち上げ、CVC事業の技術責任者、高知県の地方創生プロジェクト、ブロックチェーンのラッパーサービスの構築等多方面でやってきました。 負荷分散やインフラ構築などが得意なサーバーサイドエンジニアでした。

入ってから何をしているのか

CTOやってます。フロントエンドからサーバーサイド、インフラまで構築しており、NuxtMeetupやLaravue勉強会・技術ブログなどの情報発信をはじめたりしました。最近はセキュリティーや採用活動をメインで行っています。

今後の展望

技術的にもビジネス的にも面白いことをやっていて、みんなが憧れる会社にしていきたいと思っています。 個人的には、スタートアップにおける勝ちパターンを仕組み化し、社会に還元できるようにしていきたいと思っています。

RyotaKodaira

RyotaKodaira | SCOUTER VPoP (@ryotakodaira) | Twitter

入社・ジョインまで何をやってきたのか

SCOUTER社で「営業職」としてインターンをしていました。 3ヶ月間くらい飛び込み営業をしていましたが、僕には営業の才能がなく契約を獲得することができませんでした。そんな時に取締役に「君は営業に向いていないから辞めろ」という言葉を頂きエンジニア職として働くことを決意しました。 その後は、毎日10時間以上の勉強と制作会社でのwebエンジニアインターンを経てSCOUTER社に正式に入社することとなりました。

入ってから何をしているのか

1人目のエンジニアとSCOUTER社に入社し、入社直後は自身で企画〜開発までを行った「SCOUTER」というソーシャルヘッドハンティングサービスを立ち上げ、開発組織を発足しました。 その後はコーディング業務の量を増やしリードエンジニアとして「SCOUTER」「SARDINE」の両サービスの開発に従事。 現在はSARDINE事業部の開発責任者/プロダクトオーナーとして、プロダクトを最速で成長させるための施策の考案や開発組織のマネジメントを中心に行っています。

今後の展望

プロダクトの成長とともに開発組織を拡大させて大規模開発でのプロダクトマネジメントをやっていきたいです。そしてまた新たなプロダクトを次々と世に送り出すプロダクトメーカーを目指しています。

kuwausk

鍬裕介 / SCOUTER (@kuwausk) | Twitter

入社・ジョインまで何をやってきたのか

大学で機械科学を専攻していました。海外インターンや就職活動をするうちに、今すぐ社会で活躍したいと思うようになり、「アーリーステージ前後のスタートアップで&当時の自分が社会的価値を理解できて&難易度が高そうだが面白いと思える事業会社」を探していました。TechCrunchでSCOUTERを見つけ、すぐにWantedlyで応募、2週間後に面談して即内定&即決、その2週間後に大阪から上京して働き始めました。

入ってから何をしているのか

webエンジニア未経験で入社したので、最初の半年はとても苦労しました。HTML,CSSの勉強から始め、サーバーサイドエンジニアとして毎日修行しました。入社半年後に、新規事業の立ち上げメンバーになるチャンスがあり、インターン2名を率いてSARDINEを開発しました。現在はSARDINEのプロダクトオーナーとして、スクラムの啓蒙や開発施策の企画・検証などを務めています。

今後の展望

SARDINEを立ち上げた1人として、事業単体でも上場を目指せる規模までサービスをグロースさせたいと思っています。

masaakikunsan

まさあき (@masaakikunsan) | Twitter

入社・ジョインまで何をやってきたのか

入社するまでは、フリーランスで色々な会社でエンジニアや PM をやっていました。フリーランス時代は Vue.js や React による SPA 開発をメインで行っており、必要に応じてデザインやマネジメント、ハンズオンでのメンターや講師など数多くの経験をしました。フリーランスから正社員で SCOUTER に入社した話をすると驚かれるのですが、フリーランスを続けるより SCOUTER に入社する方が僕が求めているものが得られると思い入社を決断し現在働いております。

入ってから何をしているのか

現在、PMとして back check という新規事業の立ち上げをしています。開発メンバーは3人で全員フロントエンジニアという偏ったチームですが、開発スピードはかなり早く円滑に進められています。普段は back check の開発等をしていますが、フロントの質問に答えて初心者の育成なども行っています。もっとフリーランス時代の経験や知識をうまく会社に還元していきたいです。

今後の展望

back check を成功させSCOUTER社・社会に貢献するというのが現在一番僕が望んでいることです。もう少し個人的なところでいうと、僕は開発がそんなにしたいわけではないので早くリリースし、開発から手を離しもっとPMらしい動きをしていきたいと思っています。あとは、代表の中嶋から色々なことを盗み圧倒的成長をしていきたいです。

tamago

たまご🍳webデザイナー (@tamago_78) | Twitter

入社・ジョインまで何をやってきたのか

  • iphoneアプリの会社でデザイン
  • 制作会社でデザイン デザイナーになる前はウェディングプランナーとして人々の幸せに携わっていました。

入ってから何をしているのか

主にSARDINEのUIデザインなどをやっています。新しい事業のデザインを担当できたりデザイナーからの提案も聞いてもらえる環境なので、現状1人デザイナーですがやりにくい環境ではないです。

今後の展望

1.設計に強いデザイナーになる 2.web以外のデザインに携わる 3.情熱大陸に出る 会社としてはもっとデザインを強くしたいのでデザインチームをいずれ作りたいです。

hiroki

にしざわ ひろき@SCOUTER (@hiroki_2438) | Twitter

入社・ジョインまで何をやってきたのか

高校を卒業し大学には行かずに高卒で屋上防水屋としてお家に水が漏れないようにしていました。 ある時に身内の関係で代表の中嶋と出会いエンジニアという職業を知りインターンを経てSCOUTER社に正式に入社しました。

入ってから何をしているのか

機械系をまともにやってこなかったのでタイピングやコード関係はprogateで勉強し、現在SARDINEというサービスのフロントエンジニアとしてVue.js,Nuxt.jsで機能開発をしています。

今後の展望

サーバーサイドはプロダクトのタスクは卒なくこなせるようになる。フロントエンドはコード設計をしっかりできるようになりたいです。自分みたいに未経験で入った人に最速でタスクをこなしてもらえるように分かりやすく答えれるようになりたい。

RyoSato

RyoSato / SCOUTER (@r_sato1201) | Twitter

入社・ジョインまで何をやってきたのか

中小Sierで業務系システム(ビルの施工管理システム、物流システム)を開発・運用していました。携わっていた工程は基本設計〜総合テストまでで、言語は主にJava,VB.NETなどを使用していました。

入ってから何をしているのか

自社で開発・運用している「SARDINE」の開発に携わっています。SARDINEで使用しているLaravel,Vue.js,Nuxt.jsは使ったことがなかったので現在は日々学習しながらフロントのみ開発しています。

今後の展望

現在はフロントのみですが、ゆくゆくはLaravelも学びフルスタックエンジニアになることを目指しています。 また、開発だけでなく、サービスの企画や運用もできるようになりたいと考えています。

ktraoy

Kotaro Aoyama (@ktraoy) | Twitter

入社・ジョインまで何をやってきたのか

新卒で入社した半導体部品メーカーを退職し、個人事業主のエンジニアに弟子入りしてプログラミングを始める。創業メンバーとしてジョインしたベンチャーで自社サービスの立ち上げとマザーズ上場を経験。その後ファッションテックの開発部長を経験し、現在はフリーランス。POイベントで鍬氏と同じチームになったことがきっかけでSCOUTER社に2018年10月からジョインしました。

入ってから何をしているのか

SARDINE事業の成長に貢献できるように、PMの経験をいかし開発メンバーとしてマーケティングチームとの連携やプロダクトの開発を行なっています。新しい環境と経験のない業界で刺激を受けつつ、エンジニアとして事業に対してどういう価値を提供できるかを大切にしています。

今後の展望

技術は大切にしつつも、その技術でどういう価値を提供できるか、何が本当に求められているかを追求していきたいです。

nunulk

ぬぬるく (@nunulk) | Twitter

入社・ジョインまで何をやってきたのか

SIerの下請けやったり、社内SEやったり、ウェブサービスつくったりしてました。 ここ2,3年は、主にスタートアップで Laravel + Vue.js 案件のみに絞って参画しています。

入ってから何をしているのか

Sardine の開発(フロントエンド/バックエンド)を行っています。

今後の展望

メンバーが増えてきたので、マネジメントにもう少し時間を割きたいな、と思っております。 個人としては、引き続き Laravel の普及(導入とか移行とか)を支援していきたいです。

shimada

入社・ジョインまで何をやってきたのか

学生時代に理論化学系の研究室でC/Mathematicaを使っていたことがきっかけでプログラミングに興味を持ちました。その後は人材系の小さな会社でVue/Djangoを使った小さなサービスを開発に携わり、ちょっと飽きていた頃にご縁がありSCOUTERにジョインしました。

入ってから何をしているのか

入社当時はPythonでデータ収集などを行なっていましたが、現在はSARDINEチームでフロント/サーバサイドの開発を行っています。マネジメントやチーム開発より技術についての関心が強いです。

今後の展望

機会学習でお金を生成するプログラムを開発し早期リタイアすることを夢見ていますが、その前にドメイン駆動でイベント駆動なプロジェクトに関わってみたいです。

mirucon

mirucon (@mirucons) | Twitter

入社・ジョインまで何をやってきたのか

中学時代、留学先のニュージーランドにいた頃にプログラミングを始めました。その後日本に帰国し高校に入学したものの自分に教育機関は似合わないと決断し、フリーランスの web エンジニアとして活動を始めました。その直後とあるイベントきっかけで SCOUTER 社を紹介されジョインしました。

入ってから何をしているのか

back check という新規事業でフロント / サーバーサイドの開発を進めています。新規事業なので初期は規約の整備に苦労しましたが、徐々に各自がやりやすい環境が整えられつつあります。

今後の展望

もともと海外に留学しているなど、海外への興味が強いので、グローバルに展開するプロジェクトに関わりたいという思いがあります。

まとめ

SCOUTERの開発メンバーを紹介させていただきました! サービスが成長していくにあたって、これからもメンバーを増やしていきたいと思っています。

興味のある方は下記から応募いただくか、@kotamatにご連絡ください!!

www.wantedly.com

www.wantedly.com

www.wantedly.com

ららびゅう座談会で登壇してきました!

こんにちは @kotamat です。 先日ららびゅう座談会という勉強会にて登壇させていただきました。

f:id:kotamat:20181130122700j:plain

laravue-forum.connpass.com

一緒に登壇していただいた方は、あのLaravel本を執筆された kurikazu さんと、弊社でも一緒に仕事していただいている nunulk さんという豪華メンバーで、とても楽しくお話させていただきました。

登壇

kotamat

僕が話した登壇の資料はこちらです。

f:id:kotamat:20181130122456j:plain

slides.com

SCOUTERとLaravueというテーマで、

  • 弊社がなぜLaravueをやっているのか
  • 勉強会を主催している意図
  • Laravueのエンジニアがどう今後スキルアップすべきか
  • Laravueの今後

について話させていただきました。 いつもは結構技術方面のお話をさせていただいておりますが、今回はどちらかと言うと、より抽象化されたものを扱っていて、最近僕が考えている頭の中身を放出できた感じでした。 SCOUTERでは技術発信を推奨していますが、その効果は僕自身が非常に強く認識しているところがあるので、Laravueの技術者に限らずドンドン発信していっていってほしいなぁと思っております!

kurikazuさん

次はkurikazuさんより、コミュニティーとLaravel本のお話でした。

f:id:kotamat:20181130122542j:plain

www.slideshare.net

失われたなにかの話が行われており、非常にきになっていたので別の意味でもとても満足しました笑 執筆者からLaravelのワークフローの聞ける非常に貴重な機会だったかなと思います。

nunulkさん

最後に弊社でも一緒に仕事していただいている nunulkさんの発表。

f:id:kotamat:20181130122620j:plain

speakerdeck.com

スタートアップとLaravueの相性というところや、学習プランのところが体系的にまとまっており、この発表だけで網羅的に把握できる内容で非常に学びが深い内容でした。

座談会

座談会では、登壇者の皆さんとモデレーターの方でお話する形でした。 いろいろと会場からも質問が来ており、面白い取り組みだなぁと思っておりました。

お話していた件で参考にしてもらえればとお伝えしたスライドは下記になります。

slides.com

まとめ

Laravueの構成が増えてきている中で、こういった交流会や勉強会がドンドンふえていって非常に面白くなってきているなと思っています。

弊社ではLaravue勉強会やNuxtMeetupなど定期的にイベントを開催しているので、そちらもご参加ください!

laravue.connpass.com

nuxt-meetup.connpass.com

また弊社ではエンジニアを募集しておりますので、 興味のある方は @kotamat のほうにご連絡いただければと思います!

www.wantedly.com

www.wantedly.com

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