【Vue.js】Vue.Draggableを使って躓いたところ

こんにちは株式会社SCOUTERでフロントエンドエンジニアをしているhirokinishizawaです。

以前機能開発でドラッグアンドドロップを行えるようにするという開発を行いました。そこでVue.Draggableを使用することになったのですが躓いたところがあったのでメモとして残していければと思います。

成果物 f:id:hiroki-nishizawa:20181218112555p:plain

ドキュメント github.com

インストール

yarn add vuedraggable
又は
npm i -S vuedraggable

構成

実際の機能とは少し違うのですが近い感じの構成で簡単に作成してみました。

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

<template>
  <div class="conteiner">
    <div 
      v-for="(list, key) in lists" 
      :key="key" 
      class="lists">
      <div class="list-wrapper">
        <draggable 
          :options="{group:'group', animation: 150}" 
          class="draggable"
          @start="draggableStart"
          @end="drag=draggableEnd">
          <div 
            v-for="item in list" 
            :key="item.id"
            class="list" >
            {{ item.name }}
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      lists: [
        [{ name: 'aaa', id: 1 }, { name: 'bbb', id: 2 }, { name: 'ccc', id: 3 }],
        [{ name: 'ddd', id: 4 }, { name: 'eee', id: 5 }, { name: 'fff', id: 6 }],
        [{ name: 'ggg', id: 7 }, { name: 'hhh', id: 8 }, { name: 'iii', id: 9 }],
        [{ name: 'jjj', id: 10 }, { name: 'kkk', id: 11 }, { name: 'lll', id: 12 }]
      ]
    }
  }
  methods: {
      draggableEnd(event) {
          console.log(event)
      }
  }
}
</script>

躓いたところ

画像のように今回いくつかの列に別れて縦移動のみではなく横移動もできるようにしました。 ドキュメントを読めば縦横のドラッグアンドドロップをできるようにするのはとても簡単に出来るかと思います。今回保存移動後にデータベースに移動先、順番を保存をしなければいけなくサーバーサイドに渡すものとして横移動をした際に`移動前の列,移動先の列`が必要で、この情報をどこからとってくるのかで躓きました。

解決策

Vue.DraggableはSortableというライブラリを拡張したもので、Sortableのイベントを使えます。イベントの種類はこちらに書いてありますがstart, add, remove, update, end, choose, sort, filter, cloneがあり、今回使用するのはendイベントになります。

イベントの中身をconsoleで吐き出すと以下のようなデータが吐き出され f:id:hiroki-nishizawa:20181218094115p:plain

from(移動前),to(移動先)があるので次に

draggableEnd(event) {
      console.log(event.from)
      console.log(event.to)
}

f:id:hiroki-nishizawa:20181218100540p:plain f:id:hiroki-nishizawa:20181218100553p:plain

としたところhtmlが返ってきました。

先程も言ったように列の情報がほしいのですが、3列目と4列目を区化するものがなく仕方なく、

<draggable 
          :options="{group:'group', animation: 150}" 
          class="draggable"
          @start="draggableStart"
          @end="drag=draggableEnd"
          :data-column-id="key">

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

data-column-idを持たせることでevent.to.data-column-idで移動先の列と移動前の列の差分を取ることができました。

他にいいやり方が合ったかもしれないですが分からなかったのでわかる方いたら教えていただきたいです!

最後に

エンジニア、デザイナーの採用を行っております!

デザイナー、エンジニアの皆さん興味のある方はご応募お願いします!

www.wantedly.com

www.wantedly.com

www.wantedly.com

PHPConにて話した「PHPを使う理由」の解説

PHPConにて話した「PHPを使う理由」の解説

こんにちは、 kotamat です。 2018-12-15 PHPカンファレンス2018にて、スポンサリングさせていただきました!

phpcon.php.gr.jp

f:id:kotamat:20181217110906j:plain

f:id:kotamat:20181217111129j:plain
お配りしていたチラシ 結構目立っていたようです

プラチナスポンサーをさせてもらったので、「PHPを選ぶ理由」というタイトルでスポンサーセッションさせていただきました。

本記事は発表内容を簡単に解説します。

軽くまとめると

  • 入社したタイミングで、言語含めた技術の再検討を行った。
  • 採用難易度、市場性、習熟度などを総合的に判断してLaravel Vue.jsを採択した。
  • 情報発信を通じてポジション形成を行った。
  • PHPが苦手なものは技術で解決していく。
  • どうしても無理なところは他言語を使う前提でアプリケーションを構築していく。

採用難易度という概念について

人によるとは思いますが、ある程度習熟度のあるエンジニアは、新しい技術を触れ続けるという観点で、一見合理的に見える技術選定を行った後、採用に苦労するというパターンがいくつか見受けられてきました。 toCサービスやDev向けツールのサービスを行っている会社であれば、認知形成にそれほど苦労はしないですが、弊社のようなtoBに近く、あまり採用者が触れるサービスではないものになってくると、認知形成が難しく、認知形成できている採用競合に負けてしまうという事象が発生してしまいます。

もちろんサービスの方向性として、業界を変革するような新しいアプローチで課題を解決しているという自負はあるので、詳しくサービス説明をした方からは「面白いサービスやっているんですね。」という反応はあるのですが、その手前に「話を聞いてもらう機会を作る」という前提が必要であり、大変な売り手市場のエンジニア採用においては、そこがネックとなるパターンが多いです。

しばらく売り手市場は継続するはずであり、ここでの意思決定は今後の事業成長に大きく関わってくるということが自明であったため、採用難易度を将来見据えて検討いたしました。

認知形成の手法に関して

昨今のサービス構築には、OSレベルからフロントエンドまで、全てにおいてOSSが関わっています。

そういった環境下において、オープンに情報を共有するというのが結果エコシステムを形成し、自分たちにもメリットが有る形になるという文化が形成されております。ブログでの技術発信や勉強会などがその発信の場の一つとなっており、弊社はそういったものを主催したり、別の勉強会で発表するなど行ってきました。

情報発信するにあたって、マーケティング的な視点が必要と考え、どういったポジションを構築するのかということを考えたときに、LaravelやVue.jsでの独立したコミュニティはすでに存在していたのですが、それぞれをマージしたLaravueというものはポジションを形成している人や団体は存在していなかったため、そこに注力して情報発信を行ってきました。

その結果累計1000名規模の、それなりの認知の形成までは来ることができ、「Laravel + Vue.jsの会社ですよね!」というお声をいただくことが増えてきました。

PHPの得意なところ、苦手なところ

PHPは得意なところとして、エンジニア市場における言語習熟割合が高い言語であり、Webアプリケーションを構築する上では、及第点を出せる言語だと思っております。

逆に、高トラフィックを捌くことや、マルチスレッドでの高速化、FaaS系のサポート、機械学習など依存パッケージに伴う解決できる手法の限定などにおいては苦手だと思っており、その領域は1. PHP外のミドルウェアとの連携で頑張る 2. 他言語との連携を行う というエンジニアリングで解決できるのではと考えております。

今回は静的チェックに関して解決方法を紹介させてもらいました。クラウドのCI環境を整備することで擬似的に静的チェックでそこそこの品質担保ができるようになります。

他言語にまたがる前提で、gRPCやGraphQLなどのIDLをもちいたり、APIスペックの自動生成などでインターフェースレイヤーの品質担保をする必要があり、弊社では、LaravelのPHPUnitを拡張したテスト機能をもちい、APIスペックの自動生成を行っております。

まとめ

サーバーサイドの言語には、昨今様々な技術が取り入れられており、PHP以外にも選択肢が増えてきている状況かなと思います。 一つの言語にこだわらず、バランス感覚をもって技術選定をしていくのが今後求められるのかなと思っております。

最後に

SCOUTERではエンジニアの採用を行っております!

デザイナー、エンジニアの皆さん興味のある方はご応募お願いします!

www.wantedly.com

www.wantedly.com

www.wantedly.com

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