Laravel好きが高じてアメリカまで行ってきました！LaraconUSまとめ(一日目)

Laravel カンファレンス

f:id:kumamon_engineer:20190725100354p:plain

 

こんにちわ、ITプロパートナーズのエンジニアのくまモンエンジニア(@miyakey7)です。

Laraconに関する記事を書きたいと思います。多分今年出席した日本人は私しかいなかったような気がします。

Laravelは自分の転職のきっかけになったフレームワークで思い入れがあります。

元々組み込みエンジニアで通信ライブラリとか作っていた私が、去年Laravelが好きでというかLaravelしか知らないような状態からWEBエンジニアになんとか転職し1年以上経ちました。

今年、そして来年と開催されるLaravel jp conferenceもコアスタッフとしてお手伝いさせていただいてます。

conference2020.laravel.jp

 

そんなLaravel好きが高じて、ついには国境を越えてしまいました。

今年の7/24〜25日に開催された laraconUS(https://laracon.us/)に参加するためにNYに行ってきました！

私の目から見たLaraconUSの感想を率直に書いていきたいと思います！

英語力が皆無のため、多分間違ってる所があるかと思います、すいません！

誤りがあればご指摘お願い致します！！

 

入場

まずは朝8:30から入場開始です。

 

 

会場はタイムズスクエア近くのイケイケの場所です！

NYは以前も訪れたことがあり、とても好きな街でした。

今年のLaraconUSがNYと決まった瞬間に行くことを即決しました。

 

PlayStation Theater

 https://www.google.com/maps?q=playstation+theater&um=1&ie=UTF-8&sa=X&ved=0ahUKEwjn_aKw9M7jAhWUX80KHdIBCSMQ_AUIEigC

 

f:id:kumamon_engineer:20190725102557j:plain

ゴリゴリの強面SPに荷物検査をされ、金属探知機を通って、震えながら蛍光色光る地下のフロアへ。

 

中はもう騒然とした雰囲気でおしゃべりで陽気なエンジニアたちが大騒ぎでした。

朝からみんな元気良いな...

 

今回のLaraconは昔の2Dゲームの世界観がテーマのようです。

f:id:kumamon_engineer:20190725102748j:plain


ストⅡもありました👀

こちらはアメリカのスーパーファミコン(スーパーニンテンドー)ですね。

知らない外人と戦って2戦2勝でした。eスポーツイケますね。

f:id:kumamon_engineer:20190725102833j:plain

 

会場に入ると既にかなり埋まってる状態。

座席は自由です。

 

空いてる座席にグッズが置いてありました！

f:id:kumamon_engineer:20190725103719j:plain

中身は意外とシンプルでした。Laraconはあんまりこだわらないのかな？

 

座席はかなり後方でした..出遅れた！

f:id:kumamon_engineer:20190725103545j:plain

会場のwi-fiのパスワードがわからず弱弱のwi-fiモバイルルーター苦戦していたら、公式ツイートでアナウンスが！

 Laravelerなら誰でも胸アツなパスワード「artisan19」に胸が熱くなりましました！

 

午前セッション

ADAM WATHAN

twitter.com

自身が開発しているtailwind CSSについてのセッション

tailwindcss.com

 

f:id:kumamon_engineer:20190725113912j:plain

基本コードを書きながらレイアウトのデモをしまくっていました。

場馴れしてるからなのか余裕で話しながらガンガンコード書いてて凄いな〜と感じました。900人が見てる中でコーディングとか震える。

 

tailwind CSSはとても拡張性があり、容易なレイアウト置き換えが出来たりレスポンシブ対応していたりする便利CSSフレームワークでした。

Laravelと関与する所はbladeの中でも書きやすいよ〜くらいの感じでした。

bladeを適宜コンポーネント化してincludeで呼び出し、パラメータ引数としてクラス設定することで容易に変更出来るよねと。

FREEK VAN DER HERTEN

twitter.com

 

引用はこのツイートにまとまってます

 

観客と和気あいあいとしながら、こちらも基本ライブコーディングをしていたのが印象的。

 アクションをコントローラやモデルに書かず、アクションフォルダ配下に置く。

 

viewに関してはviewModelを使った書き方を説明。

github.com

viewに渡すパラメータを沢山並べるとかもしやってるならば参考にしましょう。

 

続いてbladeの話。blade-xを使えばincludeの書き方を省略できるよと。

確かにそうですね。vueライクな書き方です。

github.com

 

休憩

休憩で一度全員が席を離れます。

そのチャンスを使って前の方に移動しました！

みんな意外と前の方の席にこだわりはなかったみたいで、すんなり座れました。

f:id:kumamon_engineer:20190725115110j:plain

ただ、この前方エアコンがめちゃくちゃ効いていて寒かった。。 

 

BOBBY ELITE BOUWMANN

twitter.com

laravelのデザインパターンの話

speakerdeck.com

・Singleton Pattern

・Observer Pattern

・Bridge Pattern

についてピザとピザ窯を例に話していました。サンプルコードも載っているので

わかりやすいと思います！

 

印象的だったのは最後の方に言っていた

「No silver bullet, learn by doing and trying(銀の弾丸はない、やってみることで学ぶ)」

という部分。

設計に関しては本当にそう感じます。どれだけ向き合ってどれだけプロダクトを落とし込んで適切な設計ができるか。一朝一夕で身につくものではないと感じます。

 

JMAC

twitter.com

 laravelのちょっと気の利いた書き方というセッションでした。

f:id:kumamon_engineer:20190805152851j:plain

結構色んな省略形の話をしていました。

それこそbladeであれば @auth や@guest、@csrfみたいな所やModelリレーションのPivotsやMorphMapの書き方、redirectにwithInput付けるなど。結構基礎的な使い方が多かった印象。

Gateの話がちらっと出たりもしましたが(もう少し丁寧に聞きたかった)、全体的に公式リファレンスにある内容でしたね。

 

ランチタイム

 ランチタイムになると900人が一斉に外に出ます。

人の流れとかガン無視カオス状態です。

ちなみに会場は映画館のシアターとロビーと通路があるだけのイメージなので、

全員が飛び出すととんでもない人の渋滞が発生します。

そんな事は全く気にしません、これがアメリカ。

ランチボックスと飲み物をカウンターで貰いあとは自由に食べてねという形式。

通路に座り込んで食べる人が半分、シアターの中で食べる人が半分ぐらいでした。

なんで中で食べないんだろう？

 

そして配られたランチボックスが完全にアメリカ！

 

午後セッション

KEITH DAMIANI

twitter.com

GraphQLに関するセッションでした

speakerdeck.com

最もスライドが作り込まれたセッションでした。

データの繋がりをニューヨークの地下鉄の路線図を例にして表現し、グラフ理論の歴史を示した上で、どういう時にGraphQLの優位性が発揮されるかについて述べています。


KAYA THOMAS

twitter.com

彼女のセッションはサイドプロジェクトの走らせ方についてでした。

プログラミングの話は一切なく、マインドやマネジメント、ケアの方法、終わらせ方など一連を実体験を元に話をしていました。

 サイドプロジェクトを始めたらちゃんと広めることも大事だよと。


JONATHAN REININK

twitter.com

こちらのコースの作者ですね。みんな大好きEloquentに関するセッションです！

reinink.ca

内容はパフォーマンスチューニングの方法、テクニック、debugbarの数値確認方法などでした。

結果的には

 でした。

まぁ、最終的にこれに至るまでにメモリのサイズを確認したり、クエリの数を確認して少しずつチューニングしていくという手順のデモがこのセッションの有意義な部分だったと思います。そしてEloquentは何も知らないと簡単にN+1などを実装出来てしまうので、しっかりとした知識と結果のクエリをよく確認しようというお話ですね。


JUSTIN JACKSON

twitter.com

今回のLaraconのメインMCをやっていました。めちゃくちゃ話し上手で盛り上げ上手。

それもそのはずで、ポッドキャストの配信者でもあります。

SaaS開発に関するポッドキャストです。

saas.transistor.fm

スライドはこちら！

内容は人生とプログラミングを学ぶことについてでした。結構おちゃらけた感じでMCやってましたがセッションは真面目でした。

https://justinjackson.ca/assets/laracon-2019-compressed.pdf

最初にLaraconの会場にいる参加者の年代を聞いてましたが、圧倒的に30代が多かったです！アメリカのPHPerは30代が多いぞ！(日本はどうなんだ？)

 

「"It's too late for me to learn programming". This emotional baggage held me back.(「プログラミングを学ぶには遅すぎる」という感情が自分を引き留めていた。)」

これはプログラミングだけでなく色んな新しいチャレンジに言えることだと思う。

気にせずに飛び込んでチャレンジすればいい。


TAYLOR OTWELL

twitter.com

遂に出ました、大トリ。CREATOR OF LARAVEL

Laravelの創始者Taylorです。

 セッションは早速Laravel6リリースの公式発表！

ロゴも変わり、会場のボルテージも上がりました！

 ロゴが変わるために、カンファレンスTシャツはこのセッションが終わるまで配られませんでした。途中で帰る人とか気にしないのね...。

 ロゴ及び公式サイトが変わること、8月にリリースされること、ver6からセマンティックバージョニング(semver)というバージョン方式を取るという話がありました。

これでLaravel6の話は終わります。

そう、今回のセッションのメインはLaravel6の発表ではなく、Laravel VaporというLaravel用のサーバーレスデプロイプラットフォームの発表でした。

 

これは去年発表されたNova同様に有料になっております。

元々あったLaravel Forgeという環境管理ツールがあり、その中にあったlaravel-cloudというクラウドサービスと連携していた部分のコードを書き直し、独立進化しAWSと連携したサーバーレスプラットフォームに昇華したイメージでしょうか。

 

ちなみに先日、laravel-cloudは一瞬公開されましたが

 すぐにprivateに戻されましたw

 大丈夫かなw

 

まぁ、Vaporに関してはすぐに使う機会は無さそうという感覚です。

新規で作る際に使うのもありかと思う一方でVaporのコストを足す分の利点が今の所感じれていないという印象。

アプローチの方向性は面白いし今後の進化を期待したいと思います。

 

Vaporの詳細については以下にわかりやすくまとまっています。

mattstauffer.com

 

既に公式サイトも公開されています。

vapor.laravel.com

 

また本セッションは他に先駆けて動画配信もされているので詳細はこちらを参考にしていただければと思います。

youtu.be

 

AFTER PARTY & MINGLING

 そして遂に運命の時が...

Laravelの作者Taylorとの対面！

 

とりあえず記念写真！

 

そこからは緊張の会話タイム...!

 

日本から来た話、日本のカンファレンスのスタッフだよとアピール(初日に着ていたのはLaravel JP conferenceのコアスタッフTシャツ)、内緒の交渉、Laravelの今後について、Vaporの話も少し...短い間でしたが色々と聞けてとても貴重な時間でした。

 

これで完全に満足した私は、懇親会で数人と会話にならない会話をして帰りました。

「日本から来たの？」「何故？」「日本でLaravelはどうなんだい？」などなど、聞き取りやすい質問はサクッと返事出来るのですが、少しでも聞き取れなくなるともうお手上げ状態でした...。

 

ちなみに懇親会も人の配置はガン無視で通路やロビーに突然食べ物や飲み物が置かれたり、スタッフが配り続けたりして立ったままガンガン話すだけでした..アメリカ凄いぜ。

 

次回、二日目編は会場にたどり着くまでにタイムズスクエアで黒人に捕まって60ドル払った話を中心にお送りする予定です😢

 

すいません、上記は事実なのですが、二日目もちゃんと書きます！！

 

Laravel好きは一度お話してみませんか？

www.wantedly.com

 

社内の新制度（Googleのあのルール？？）を使い、社内データのJuliaで統計分析PJ(仮)を1人で勝手にキックオフしてみました

 

f:id:marron-web-engineer:20190704161804p:plain

こんにちは！ITプロパートナーズの新卒エンジニアの栗岡です。

2019年4月1日に新卒2期生、エンジニアとしては1人目のエンジニアとしてジョインしました。

業務では、Larave/Vue.js/JQueryでITプロパートナーズメインサイトの開発と20卒21卒の新卒採用担当をしています！

 

今回は、会社の新ルールAd-vanを使い、社内データの統計分析PJ(仮)を1人で勝手に始めましたというお話を自分を鼓舞する意味を込めてしようと思います。

本当は5月にはキックオフしていた事は秘密です。

 

そもそもAd-vanとは？？

ITプロパートナーズの新しい制度です。

毎週水曜日にそれぞれの社員が考えた「今やりたいこと、今やるべきこと」に 主体的 に取り組んでもらうという制度です。

エンジニアにとっては凄く嬉しい制度で、自社サービスにtypescript導入している社員やR&Dプロジェクトを進めるエンジニア がいます。

今回はこの制度を使い、簡単ではありますがデータ分析に挑戦してみようと思いました。

（専攻が心理系だったことから、統計分析は研究のためにふんわりと使っていた背景もあり、、）

 

やりたい事

主要事業であるITプロパートナーズのデータや20卒採用で取れたデータを統計分析という形で処理し、データを取得し、ただ眺めていただけの状態から、統計的に何が言えるのかまで出せるようにしたい。

そして、いつか統計に強いエンジニアやサイエンティストにジョインして欲しい。

僕自身が統計学に精通しているわけでも、数学がゴリゴリでできるわけではないので、

「取得しているデータを活用する」するための一歩になれば良いというモチベーションで緩くやって行きますw

 

使用ツール・言語

 

言語はぶっちゃけなんでも良かったのですが、データ分析と言えばPython！R！っていうのが何となく嫌で、あまのじゃく精神からJuliaにしました。

 

デモ

今回は試しに、JuliaとJupyter Notebookを使った回帰分析とグラフ表示をファッションサイトをスクレイピングして取得したデータで試しに行いました。

 

今回は、身長が高いモデルさんほどファッションサイトではランキング上位に来るのか？つまり、背が高い人ほど洋服が似合うのか？？を検定しました。

ランキングの順位に対して、身長に因果関係があるのかを判定します。

 

コマンドラインで Jupyter Notebookを起動

 jupyter notebook

 

 あとは以下のようにコードを書き込む。(y=ax+bに当てはめるだけ)

ほぼRの上位互換のようなコードですね。

f:id:marron-web-engineer:20190630171721p:plain

 

ソース実行結果！！！！　　

Coefficients:
             Estimate Std.Error t value Pr(>|t|)
(Intercept)   257.544   90.8531 2.83473   0.0056
height       -1.30983  0.574484   -2.28   0.0248

height 140 150 160 170 180 0 50 100 rank Regression image

 

このように綺麗なグラフと検定結果を簡単に出力してくれました！

実際に表示されるグラフはD3.jsなので、インタラクティブに動かすことができます。

JuliaとJupyter組み合わせバッチリですね！

ソースコード一部省略して実行したので、データ分析が得意な方には目を瞑って頂けると幸いです、、、（すみません、、、）

ちなむと検定結果は、一応身長が高いほどランキングは1位に近くなります、、

 

あまりドキュメントも出回っていない言語であるJuliaですが、これからも勉強しながらこのプロジェクトを成功させられるように頑張ります！

数学も少しは勉強しないと、、

 

このプロジェクトの結果は次回でご報告がきっとできればと思います！！

最後に

ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

そして、21卒新卒エンジニアのエントリーも心よりお待ちしております！

www.wantedly.com

 

www.wantedly.com

 

www.wantedly.com

関西初開催！！#ProLabo(プロラボ)もくもく会＠なんば 5月25日(土)に開催しました！　

みなさんこんにちは！

ITプロパートナーズ(https://itpropartners.jp/)新卒2年目の藤井です！

今年の4月から関西支社立ち上げにあたり大阪に赴任、

現在立ち上げに関連する業務全般を行なっております！

実は先日、毎月渋谷で行なっている#ProLabo(プロラボ)もくもく会がなんと、、、

 

関西に進出いたしました～🎉🎉

 

今回はそちらの様子をレポートにまとめました！！

ぜひご覧ください！

続きを読む

Nuxt + Contentful + NetlifyでJAM Stackなブログを作ってみよう

Nuxt.js Vue.js

ITプロパートナーズでエンジニアをしているもりと申します。

少し今更感がありますが、ContentfulとNuxtでJAM Stackなブログを作ってみました！

 

まずJAM Stackという聞き慣れない言葉がでてきましたが、JAM Stackとは

Javascript + Api + Markup のことで、HTMLをサーバーサイドで生成してレンダリングするのではなく、javaScriptでapiから取得したデータをもとにデプロイ時にHTMLを生成する最新のweb開発アーキテクチャのことです。

詳しくはこちら

 

今回はContentfulをAPIとして、Nuxtを静的サイトジェネレーターとして使用することで

JAM Stackとして実装していきます。

 

Contentful

  1. Contentfulアカウントの作成
  2. スペースの作成
  3. モデルの作成
  4. 記事の作成

Nuxt

  1. Nuxtアプリケーション作成
  2. Contentfulの設定
  3. Contentfulのコンテンツデータ取得
  4. ビルド時のhookと動的ルーティングの生成
  5. ブログページ
Netlify
  1. 事前準備
  2. アカウント作成

 

Contentful

ContentfulとはヘッドレスCMSと呼ばれるコンテンツ管理サービスで、WordPressのように記事の作成や管理ができます。

WordPressと違うのは、Contentfull側でViewのレンダリングは行わず、完全にAPIベースである点です。

記事のデータはAPIを介して取得するため、フロントエンドは自分の好きな技術で好きなように作ることができます。

 

1. Contentfulアカウントの作成

まずはContentfulのアカウントを作成していきましょう。

https://www.contentful.com/

 

Try for free  とあるのでこちらからアカウントを作成します 。

f:id:frostnday:20190515112519p:plain

 

今回はGithubと連携を行います。

f:id:frostnday:20190515112906p:plain

 

名前やメールアドレスなどの必要事項を入力し signUp してアカウントの作成完了です。

2. スペースの作成

次に スペース という大枠になるものを作成します。

スペースとはContentfulの一番大きな領域で、1プロジェクト = １スペースになります。

公式によると開発用とProduction用といった単位でスペースを作成することもありだそうです。

今回はブログを１つ作成するだけなので、スペースは１つでOKです。

 

早速スペースを作成していきましょう。

まずは左側にあるメニューからCreate spaceをクリックします。

f:id:frostnday:20190515124817p:plain

 

space作成用のモーダルが表示されるので、最初にspaceのタイプを選択します。

今回はFreeプランで作成します。

f:id:frostnday:20190515125413p:plain

 

次にスペース名を決めます。

f:id:frostnday:20190515125837p:plain

今回はシンプルにblogとしておきました。

 あとはConfirm & CreateSpaceをクリックしてスペースの作成完了です！

3. モデルの作成

次にモデルを作成していきましょう。

モデルとはContentfulで作成する記事などのコンテンツのことです。

例えば、 title top_image create_atのように、一つのコンテンツに持っておきたい情報を名前と型を決めて登録します。

今回はブログ記事なので、タイトルやTOP画像、作成日、本文などの情報を持つ記事モデルを作成してみたいと思います。

 

先程スペースを作成したので、TOPページに戻るとCreate spaceが Completedになっていると思います。

そのすぐ下にあるDefine the structure の Create a content type をクリックします。

f:id:frostnday:20190515144917p:plain

モデルの名前と説明を入力しCreateをクリックしましょう。

f:id:frostnday:20190515145206p:plain

 

今回はブログの記事なのでシンプルにarticleとしました。

 

次に、このモデルにフィールドを設定していきます。

f:id:frostnday:20190515155447p:plain

作成後に右側にあるAdd Fieldをクリックします。

 

f:id:frostnday:20190515155735p:plain

クリックすると追加するフィールドの型を決めるモーダルが表示されるので、Textを選択します。

f:id:frostnday:20190515155957p:plain

フィールドの名前を入力してCreateします。

これでText型のブログのタイトルを表すフィールドの作成が完了です。

 

今回は合計5つのフィールドを作成しました。

f:id:frostnday:20190515160333p:plain

これで、1つのコンテンツ（記事）はここで設定した５つのフィールドを持つことができるようになりました！

 

4. 記事の作成

 スペース、モデルの作成が終わったので、実際にコンテンツ(記事)を作成してみましょう。

TOPページには、先程Modelも作成が終わったので、 Define the structureもCompletedになっているかと思います。

 

f:id:frostnday:20190515162113p:plain

  Create your contnet の Add an entry からコンテンツを作成していきます。

 

このように先程設定したフィールドの中身を入力していきましょう。

f:id:frostnday:20190515162526p:plain

 

実際の本文はフィールドタイプをrichTextにしたので、このように文章の途中に自由に画像を差し込んだり、太字にしたり といったことが可能です。

f:id:frostnday:20190515162940p:plain

記事の作成が終わったら、右上のpublishをクリックして作成完了です。


Nuxt

Contentfulでブログ記事の作成が完了したので、次はそのブログを表示するフロントエンドの部分の作成を行います。

 

今回はNuxtを使用してそのフロントエンド部分を作成していこうと思います。

NuxtとContentfulの連携については公式に手順が載っているのでこちらに沿って説明して行きたいと思います。

1. Nuxtアプリケーション作成

では早速Nuxtのアプリケーションを作成していきましょう。

まずはvue-cliを使ってNuxtの新規アプリケーションを作成します。

 

vue-cliのinstall

$ yarn global add @vue/cli-init

 

nuxtアプリケーションの作成

$ vue init nuxt/starter アプリケーション名 

これでnuxtのアプリケーションが作成できたので早速Nuxtを起動してみましょう。

作成したNuxtアプリケーション配下に移動して必要なmoduleをinstallします。

$ yarn install 

installが完了したら実際に起動してみます。

$ yarn dev 

上記コマンドでbuildが開始され、URLが表示されるのでクリックしてみましょう。

 

成功していれば、このような画面が表示されます。

f:id:frostnday:20190515170732p:plain

2. Contentfulの設定

Nuxtのアプリケーションの作成が完了したので、次はContentfulと連携するのに必要なModuleをinstallします。

 

$ yarn add contentful 

 

contentfulと連携するにはapiのキーが必要になるのでそちらを作成しましょう。

作成が必要なのは

・space id

・access token

の２つです

 

contentfulのページのヘッダーにあるsettingsからAPIkeysページに移動します。 

f:id:frostnday:20190605133401p:plain

ページに移動すると、SpaceIDとAccessTokenなどが自動で生成されているのでこちらのキーを使用してcontentfulと連携をしていきます。

 

f:id:frostnday:20190605134328p:plain

f:id:frostnday:20190605134607p:plain


contentfulのキーの作成が終わったらそのキーを保存しておく場所をNuxt側に作ります。

プロジェクト直下にenv.jsを作成して以下のようにします。

// ./env.js
{
  "CTF_SPACE_ID": "先程作成した Space ID",
  "CTF_CDA_ACCESS_TOKEN": "先程作成したContent Delivery API - access token"
}

 ※こちらgitignoreに指定するのをお忘れなく

 

 

先程installしたcontentful用のmoduleを使うためにpluginを作成します

// ./plugins/contentful.js

const contentful = require('contentful')
const env = require('../env.js'); 

const config = { 
  space: process.env.CTF_SPACE_ID, 
  accessToken:process.env.CTF_CDA_ACCESS_TOKEN 
} 

// export `createClient` to use it in pagecomponents 
module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

これでNuxtとcontentfulの連携の設定は完了です。

3. Contentfulのコンテンツデータ取得

連携の設定が完了したので、次はContentfulから先程書いた記事を取得します。

今回はJAM Stackにするので、buid時に全ての記事データを取得してjsonに固めます。

 

ではまずデータを取得するmoduleを作成しましょう。

 

modulesディレクトリ配下に、先程作成したcontentful連携用のpluginを使用して

データ取得する処理を書きます。

 

その後、取得したデータをjsonファイルとして指定ディレクトリに出力します。

// ./modules/createStaticJson.js

import { createClient } from '../plugins/contentful.js';
import env from '../env.js';
import fs from 'fs';

const outputPath = 'static/json/article.json';

/**
 * Contentfulから取得したデータをjsonファイルとして出力します。
 */
export default async function outputStaticData() {
   const client = createClient();

   // contentfulからデータを取得
   const articles = await client.getEntries({
     'content_type': env.CTF_BLOG_POST_TYPE_ID,
      order: '-sys.createdAt'
   });

   // jsonとして出力する
   fs.writeFile(
     outputPath,
     JSON.stringify(articles),
     err => {
        if (err) {
           throw err;
        }
     },
   );
};

 

取得したjsonはstatic/json/article.jsonに配置するので、指定ディレクトリにはあらかじめ空のjsonファイルを作成しておきましょう。

// ./static/json/article.json
{}

 

これでデータの取得、jsonファイル出力処理は完了です！

 

4. ビルド時のhookと動的ルーティングの生成

データを取得する処理ができたので、その処理の呼び出し元を作っていきます。

 

今回は nuxt generateという nuxtアプリケーションを静的ファイルとして出力するコマンドを使用していきます。

そのため、このgenerateが実行されたタイミングでデータを取得するようにしましょう。

 

 nuxt.config.jsのgenerateの中に以下のように処理を追加します。

 

まず、先程作成したデータを取得してjsonにする処理を呼びます。

// ./nuxt.config.js

import Articls from './static/json/article.json';
import outputStaticData from './modules/createStaticJson';

module.exports = {
 generate: {
   async routes() {
     // contentfulからデータを取得してjsonにexportする
     await outputStaticData();

     // 取得したjsonからページを動的生成する
     return Articls.items.map(i => {
       return `articles/${i.fields.id}`;
     });
   }
 },

 // --- 以下省略 ----

その後に取得したデータから動的なページを生成します。

 

なぜこのような処理をする必要があるかというと

nuxt generateコマンドで静的ページとして出力した場合、

article/{id} のような動的URLのページは生成できないからです。

 

今回は

/ 記事一覧ページ

article/{記事ID} 記事詳細ページ

 

というページ構成で作成するので

contentfulから取得した記事IDをもとに記事詳細ページのroutingを追加しています。

 

5. ブログページ

 最後に、実際に表示するページ部分を作成して行きます。

 

/ 記事一覧ページ

article/{記事ID} 記事詳細ページ

 

という構成にします

 

root /

├ pages/

         ├ index.vue

       articles/

              └ _id.vue

 

pages 配下の構成がそのままルーティングになるので、こんな感じでvueファイルを配置していきましょう。

 

ここではポイントだけ説明をしていきたいと思います。(vueの説明は省きます)

 

まず、取得したjsonの記事データを表示する方法ですが、jsonをimport してcomputedで参照するのが良いでしょう。

 

// ./pages/index.vue

 const Articls = require('~/static/json/article.json');

 export default {
   computed: {
     articles(){
       return Articls.items;
     }
   }
 }

 

詳細ページに関してはurlから対象の記事のデータを抽出します。

 

 // ./pages/article/_id.vue
const Articls = require('~/static/json/article.json');

export default {
  computed: {
    article(){
      const id = this.$router.params.id;
      return Articls.items.find(i => i.fields.id == id);
    }
  }
// 以下省略

 

 

今回contentfulでrichテキストを使用して文章の途中に画像をいれたり、太文字にしたり

といったことを行っています。この richText を表示する部分は少し処理が必要です。

 

 // ./pages/article/_id.vue

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";

export default {
  methods: {
     toHtmlString(obj) {
       const options = {
         renderNode: {
            [BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
               `<img src="${fields.file.url}"/>`,
          },
       }
       return documentToHtmlString(obj, options);
     }
   },
// 以下省略

このように変換するモジュールがライブラリにあるので、こちらを使用して変換の処理を行う必要があります。

 

template内ではv-htmlで指定し、変換メソッドを指定すればOKです。

 // ./pages/article/_id.vue
<template>
 <div v-html="toHtmlString(article.fields.body)"></div>
</template>
// 以下省略

 

Netlify

 アプリケーションの実装が完了したので、次は実際にデプロイします。

今回はNetlifyという静的なサイトを無料でホスティングできるサービスを利用して

githubにpushしたら自動でデプロイされるようにします。 

 

1. 事前準備

 事前準備として、先程作成したアプリケーションをgithuにpushします。

 

$ yarn generate

 

nuxt generateで静的ファイルとしてビルドしましょう。

実行後にdistというディレクトリが作成されていると思います。

 

次に先程作成されたdistディレクトリをgit.ignoreから外します。

 

最後にgit pushでgithubにpushしたら準備完了です。

 

2. アカウント作成

 次にhttps://app.netlify.com/signupからNetlifyのアカウントを作成しましょう。

f:id:frostnday:20190529224337p:plain

今回はgithubと連携したいのでgithubアカウントでsignupします。

 

アカウント作成後のTOPページからgithubのリポジトリと連携していきます。

f:id:frostnday:20190529224748p:plain

New site from Gitをクリックします。

 

f:id:frostnday:20190529225120p:plain

GitHubを選択して認証します。

 

f:id:frostnday:20190529225704p:plain

Only select repositoriesを選択肢、連携するgithubのリポジトリを選択します。

 

f:id:frostnday:20190529230154p:plain

先程連携したリポジトリを選択肢します。

 

f:id:frostnday:20190529231011p:plain

連携するリポジトリの設定を行います。

①　pushがあった場合にhookするブランチを選択します。

 今回は masterを選択しておきます。

 

②　pushがあった場合に実行するコマンドを入れます。

コマンドは何も実行しないので未指定でOKです。

 

③　実際にホスティングする対象となるディレクトリを入力します。

NuxtGenerateを行ったときのデフォルトディレクトリはdistなので今回はdistを指定してましょう。

 

最後に Deploy site でデプロイが開始されます 。

f:id:frostnday:20190530000029p:plain

ビルドが成功するとこのようにURLが表示されます。

 

以上でデプロイ設定は完了です。

 

以降はコンテンツをcontentfulで更新したら、ローカルでnuxt generateを実行し

githubにpushすることで自動でデプロイができます。

 

これでJAMStackなブログが完成しました！！！

 

いかがだったでしょうか？

比較的お手軽に構築からデプロイまで出来たかと思います。

 

今回のブログは完全な静的サイトなので画像など最適化したりすれば阿部寛の速度も夢ではないかもしれません。（笑）

 

サンプルは以下に置いておくので参考にどうぞ

 

サンプルブログ

https://reverent-saha-5d7aec.netlify.com/

 

サンプルソースコード

 https://github.com/frostnday/contentful_nuxt_sample

 

【3分でわかる！】CSSスプライトアニメーションをvue.jsのイベントハンドリングで動かしてみよう

Vue.js

f:id:tomita_ak:20190425143208p:plain

こんにちは！エンジニアのとみたです。

ささやかなネタですが、CSSで実装できるスプライトアニメーションで遊んでみました。

Twitterのいいねボタンのエフェクトにも使われています。

f:id:tomita_ak:20190425101438g:plain

Twitterのいいねボタン

 

スプライトアニメーション用の画像を用意

今回は、弊社が開催しているもくもく会の非公式キャラクター（笑）「プロラボくん」に動いてもらいます

f:id:tomita_ak:20190425101703p:plain

非公式キャラクタープロラボくん

スプライトアニメーション用の画像はこちら。

7つの絵を少しずつ動かします。

f:id:tomita_ak:20190425102718p:plain

スプライトアニメーション用の画像

Illustratorで作成しました。

基準になる絵と枠を一つ作成して、横に並べます。

f:id:tomita_ak:20190425111617p:plain

枠を付けた絵を並べてみました

ここから少しずつ変化をつけていくように作成します。

形式はpngではなく、SVG形式で書き出します。

アニメーションが動いたときに、滑らかに描画されます。pngだと思った以上にギザギザに...。

 

HTMLとCSSを作っていきます！

vue-cliを使って新規プロジェクトを作成します。

今回はApp.vueをそのまま書き換えてしまいます。

まず先程のSVGデータを表示します。

 

HTMLはこちら。

 <template>
  <div id="area">
   <div class="wrap">
     <div class="prorabokunSmile"></div>
   </div>
 </div>
</template>

 

cssはこちら。

.prorabokunSmile {
  background: url(./assets/purorabokun_smile.svg) no-repeat;
  background-size: cover; //高さをheightに合わせる
  width: 100px; //1コマ目の大きさ
  height: 126px; //1コマ目の大きさ
  display: inline-block;
  margin: 0 50px;
}

 

f:id:tomita_ak:20190425112234p:plain

最初の1コマ目が表示されました

いよいよアニメーションを追加していきます！

HTMLはこちら。smileクラスを追加します。

 <template>
 <div id="area">
 
 <div class="wrap">
 <div class="prorabokunSmile smile"></div>
 </div>

 </div>
</template>

 

cssはこちら。

smileクラスと、@keyframesを追加しています。

.prorabokunSmile {
 background: url(./assets/purorabokun_smile.svg) no-repeat;
 background-size: cover;
 width: 100px;
 height: 126px;
 display: inline-block;
 margin: 0 50px;
}
.smile {
 animation: animationSmile 1s steps(6) infinite;
}
@keyframes animationSmile {
 to {
 background-position: -600px 0;
 }
}

 

画像を横方向に動かしているだけなのですが、

step関数を使い6段階に切り分けて表示させます。

 

step関数の値は、最初に表示される分を差し引いて、コマ数から1引いた値になります。

今回は7コマのアニメーションなのでsteps(6)となります。

 

アニメーションには任意の名前をつけ、@keyframesと紐づけます。

 

brackground-positionの値は、widthの値*steps関数の値をマイナスさせた値にすると、うまく動きました。100pxの6倍で-600px、といった具合に。

Image from Gyazo
動きました！
vue.jsのイベントハンドリングを使ってみます。

ボタンをクリックすると、 アニメーションが動き出すようにしたい。

 <template>
   <div id="area">
     <div class="wrap">
       <div class="prorabokunSmile"
       v-bind:class="{ smile: isActive }"
       ></div>
     </div>
     <button v-on:click="move">笑顔！</button>
   </div>
</template>

 

jsの指定はこのようにしました。

<script>
  export default {
     name: 'app',
     data () {
       return {
       isActive: false
     }
   },
   methods: { 
     move: function () {
       this.isActive = !this.isActive
     },
   }
  }
</script>

 

「笑顔！」ボタンをクリックするとmoveメソッドが動き、isActiveが切り替わり、アニメーションが定義されたsmileクラスが付与されてキャラクターが動いて見える...といった流れです。

Image from Gyazo
クリックするとアニメーションが動くようになりました！

お気に入り登録ボタンや画面遷移にも応用していけそうですね！

 

最後に

ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

www.wantedly.com

 

採用以外でも、様々なイベントを開催予定です！ぜひオフィスに遊びに来てください！

今年の3月にオフィスが増床、広くてオシャレなイベントスペースが使えるようになりました！

月に数回開催している「プロラボ」「もくもく会」ではたくさんの方に参加いただいています！

f:id:tomita_ak:20190425131047p:plain

f:id:tomita_ak:20190425131051p:plain

f:id:tomita_ak:20190425131054p:plain

新しいイベントスペース

itpropartners.connpass.com

graspy.jp

Image from Gyazo
ありがとうございました！

PHPを使い続ける理由

サービス開発

柳澤です。
本日のブログを担当します。
よろしくお願いします。

 


ITプロパートナーズは現在5つの事業をやっています。

f:id:yuyayanagisawa:20181206122357p:plain

ITプロパートナーズ事業

 

上記のサービスは全てPHPを使っています。
事業立ち上げ初期の技術選択はとても大切であると考えており、なぜ弊社はPHPを使い続けているのかをお話したいと思います。

 


[ダイバーシティの環境で開発をしている]

弊社では自社サービスであっても弊社に登録いただいているITプロフェッショナルと一緒に開発する機会が多くあります。
現在開発中のGraspy（https://graspy.jp/）では社員以外は在宅で仕事をしてもらう機会も多く、リモートワークで活躍いただいています。
弊社の登録者は2018年12月時点で約2万人に登録いただいており、内訳は以下のようになっています。

 

f:id:yuyayanagisawa:20181204115549p:plain


9,115人と約半数がエンジニアとしての登録になります。
登録者のプログラミング言語別の割合が以下になります。

 

f:id:yuyayanagisawa:20181204115600p:plain


PHP、Javascriptを得意とするエンジニアが全体の約1/3の割合となっています。

 

弊社の場合、登録いただいているITプロとチームを結成してプロダクト開発に臨んでいます。
上記は開発言語にPHPを使い続けている理由のひとつでもあります。

 

 

[初期開発メンバーは自分しかいなかった]


僕のエンジニアキャリアはJavaからスタートしました。
Java → C# → PHP → Objective-C → Android Java → PHP と経験してきたのですが、生産性を考えたら当時PHPで開発するという選択がベストだと判断しました。
もちろんPHP以外の言語にも興味はありましたし、他のスタートアップはRubyで開発しているからうちもRubyでやりたい、という気持ちも正直ありました。
ただ会社の立ち上げ当初で人数が少ない中、自分がチームに一番貢献できることはやはり、PHPでサービスをつくるということでした。

 

 

f:id:yuyayanagisawa:20181206122101j:plain

立ち上げ当初のオフィススペース

 

 

[PHPを使っているという劣等感]


上でも書きましたが、やはりスタートアップはRubyで開発している企業が多く、弊社のITプロ紹介サービスでもRubyエンジニアを企業様に紹介する機会がすごく多いです。
GoやScalaで開発するという技術的挑戦をしている企業もよく耳にしてましたし、うちも新しい言語や技術に挑戦していくべきではないかと悩んだりもしました。
エンジニアの集まりに参加すると、未だにPHPを使っている古い企業と思われてしまうのではないかと勝手に思い込み、胸を張って「PHP使ってます」と言えませんでした。

 

この劣等感は自分達が提供するサービスに誇りを持ち、多くの人に価値を提供できるサービスに成長させることによって解消されると考えています。

どんな言語を使っても、結局誰にも使われないサービスであれば意味ないですよね。

 


[プロダクトの開発言語はどうやって選ぶか？]

以下の3つのポイントが重要だと考えています。


スピード感のある開発ができるか


スピード感ある開発を行うにはそれまでのノウハウの蓄積が重要であると考えています。
今までずっとPHPで開発してきたので、ゼロから新しい開発言語を使用して開発するよりも圧倒的に早くサービスをリリースすることが可能です。

 

すぐに方向転換できる柔軟性と自由度があるか

サービスの柔軟性、自由度があることにより、試験的にチャレンジできる機会が増えます。
PHPは自由度が高すぎるが故にスパゲッティコードになりがちだという問題がありますが、弊社ではフレームワークをちゃんと理解してつかうことにより、ある程度制約を設けています。
フレームワーク構造を理解し、適切な使い方をするためにペアプログラミング開発を行っています。

 

人材を採用することができるか


サービスがスケールすると開発エンジニアの人数も増やさなければなりません。
難易度の高い言語を開発で選択した場合、採用に苦労します。
市場にはやはりPHPエンジニアエンジニアが多いという印象があり、弊社の登録状況からもやはりPHPエンジニアが一番採用しやすいことがわかります。
人が採用できないが故にプロダクトの成長を止めたくありません。

 


[弊社プロダクトの開発例]

2018年10月に新サービスをリリースしました。

どんな技術を使っているか紹介します。

 

「未来を掴む」キャリア形成プラットフォーム　Graspy

graspy.jp

 

Graspyでは以下を使用しています。 

 

サーバサイド開発言語：PHP7
フロントサイド開発言語：Nuxt.js、Vue.js
フレームワーク：Laravel5.5
webサーバ：nginx
DB：RDS（Amazon Aurora）
クラウドサーバ：aws（EC2、S3、ELB、route53、cloudfront、他）
その他：docker、SPA、ADR、スクラム開発、Git Flow

 

昨年のVueフェスではGoldスポンサーをさせていただきました。

先月のLaravelカンファレンスでもスポンサーとして参加させていただきました。

今後はフロントでNuxt.jsやVue.jsに積極的に取り入れ、スポンサー活動も続けて行なっていきたいと思っています。 

 

[PHPに感謝している]

現在の弊社のサービスは4年前のスタート当時に比べたら使ってもらえる機会も圧倒的に増え、従業員や弊社に関わってくれるITプロもだいぶ増えました。
まだ通過点ではありますが、現在の状況を見ると初期開発をPHPで行うという判断は間違っていなかったと思います。
僕自身は色々な経験や出会いをもたらしてくれたPHPという言語に感謝しています。
PHPを使ってプロダクトを成長させ、多くの人に使ってもらえるサービスにしていくことでPHPコミュニティに貢献できれば嬉しいです。
 


[最後に]


ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！

少し技術的なことに投資できるフェーズになってきました。
今回Nuxt.jsやVue.jsを取り入れたように、チャンスがあれば新しいチャレンジもしていきたいと考えています。

ちょっとでも興味を持っていただけたら、まずはお話しましょう。

お気軽にご連絡ください！

 

 

www.wantedly.com

 

www.wantedly.com

 

www.wantedly.com

エンジニアドリブンで始める新規サービス開発のススメ

Laravel サービス開発

f:id:kumamon_engineer:20190228085445j:plain


ITプロパートナーズのパートナーズ事業部エンジニアチームのリーダーをしている三宅(@miyakey7)です。

今回はITプロパートナーズで、初めてエンジニア主体でサービスの企画から開発までを担った話をしたいと思います。

 

開発したサービスはSNSのつながりを活用した、ソースコード共有サービス「ReviewMe」です！

review-me.tech

サービスの始め方

体制

2018年度下半期が始まる10月、事業部長直下にエンジニア2人と、19卒でエンジニアとして入社するインターン1人の、4人体制でこのプロジェクトは始まりました。

プロジェクトの目的は、本来の業務(ITプロパートナーズメインサイトの開発)とは別に、業務時間を使って新しい取り組み（サービスの開発）に挑戦しよう、ということです。

開発段階では業務委託のデザイナーさんも加わり5人体制になりました。

プロダクトオーナー

普段は事業部長がプロダクトオーナーとしてタスクやサービスの方向を決めるのに対し、今回はエンジニアがプロダクトオーナーになります。

これにより、以下のようなことも今回はエンジニアで決定しました。

  1.  サービスの各種目標数値(KPI設定)
  2.  必要な機能の選定と実装
  3.  システム以外の施策

サービス内容の決定

当然、サービス内容もエンジニアが中心で決めます。今回は以下の軸をベースに開発するサービスを決定しました。

  • エンジニアの助けになるもの
  • ソースコードを使ったもの
  • SNSの特性を活かせるもの

これらを元に「最短の期間で最小の機能」を作っていきました。

結果として

  • エンジニアのアウトプットの第一歩になる簡単な投稿
  • ソースコードが主体の投稿一覧
  • SNSにシェアすることでコードのOGP画像が表示される

という機能を中心に作成しました。

 

詳しくはもう一人のエンジニアでもある、ちゃんなか(@channaka0531)の記事にまとまっています。サービスの方向性決定に言及した内容になっています！

note.mu

サービス名の決定と商標取得

PULLREQ時代

サービス名ももちろんエンジニアが決めます！

今回は商標も取る予定でした。

最初に付けた名前は「PULLREQ(プルリク)」。エンジニアならすぐにイメージが出来る言葉であり、サービス内容を端的に表した素敵な名前でした。

しかし、皆さんご存知の通り、GitHubのPULL REQUEST機能の略称から来ているこの言葉。識別性の観点から、商標を取ることは出来ませんでした。。。(正確には取れる見込みが薄いとのこと)

 

画像も出来てました..お蔵入りがもったいないのでここに貼っておきます..。

f:id:kumamon_engineer:20190228091556p:plain

 

※ちなみに商標調査は代行でお願いすると1回で数万円程度、登録申請代行で内容にもよりますが最小で15万円以上、申請から取得までは時期によって違うらしいですが10ヶ月程かかるそうです！(結構かかりますね..)  

サービス名決定

200を超える名前案をエンジニア3人で出し尽くしました。

その結果、偶然後ろを通った今回のプロジェクトに全く関わっていないエンジニアの一声

「ReviewMe(レビューミー)」

 

f:id:kumamon_engineer:20190228134448p:plain

コレで決まりました！意外なところに答えは落ちているものです。

 

開発期間

ReviewMeはデザイン含め、その全てを「1ヶ月」で作りました。

実際にエンジニアが手を動かしたのは2週間程度です！

 

このスピード感はエンジニアだけで詳細の仕様を口頭＋Slackで詰めれた事で実現できたのだと思います。もちろん上長への報告はありますが、プロダクトオーナーである自責が開発を進める上で、大きく影響を与えていたと感じます。

サービスの技術選定

 最短の期間を目指していたため、慣れ親しんだ環境を最優先に選定しました。

サーバー

・AWS EC2(Amazon Linux)

RDB

・Amazon Aurora(Mysql) 

サーバーサイド

・Laravel 5.7

フロントエンド

・Vue.js

・jQuery(少しだけ)

その他ツール

git/GitHub

一度、サイトのオープンソース化も考えましたが、一旦はprivateで開発しております。

docker

ローカル環境は全てdockerでまとめました。

backlog

スクラム開発のタスク管理として利用しました。

IFTTT

IFTTTの機能によりReviewMeでシェアしたツイートなどを収集できます。更にその内容をSlackに通知することも出来ます。

Slack

コミュニケーションツールはSlackです。多くの議論の結果がSlackに残っています。

RealtimeBoard

ビジネスフレームワーク用に利用しました！詳細は次に書いております！

 

ビジネスフレームワークの利用

リーンキャンバス 

今回はサービスの強み、弱み、価値を明確にするためにリーンキャンバスを利用しました。リーンキャンパスは端的に表すこと、時間をかけすぎないことが重要で、頭の整理に役立ちます。その内容をチームで共有できるので、非常に効果的です。

以下はその時使った枠組みになります！

f:id:kumamon_engineer:20190228094917j:plain

こちら実際の進め方としてはRealtimeBoardの機能を使い、オンライン上でテキストを埋めていきました！URLで共有出来、お互いの反映がリアルタイムで反映されるので便利でした。

realtimeboard.com

ユーザーヒアリング活動

 twitter

twitter上のユーザーの意見を迅速に取得しながら開発改善を行っています！

目標時間は要望ツイートから24時間以内です！

以下はエディタの言語選択にElixirが無いという意見を頂き、対応致しました！

f:id:kumamon_engineer:20190228100238p:plain

使っていて気になる点、要望があればツイートしていただくと幸いです！

もくもく会(ProLabo)

f:id:kumamon_engineer:20190228101903p:plain

弊社イベントスペースではエンジニアが主体で運営しているもくもく会(ProLabo)が月に1回開かれています。

毎回100人を超える応募を頂き、多くのエンジニアやデザイナーが参加していただけています。

itpropartners.connpass.com


今回初期ユーザーとユーザーヒアリングの対象をProLabo参加者に限定しました。

協力してくださった皆さん本当にありがとうございます！

ProLaboは駆け出しのエンジニアや、普段は別の仕事をしながら休日はプログラミングを勉強している方達もたくさん参加しており、そういった人達に使ってもらい意見を直接聞かせてもらいました。

ユーザーFB内容の一部
  • スキルカテゴリが目立つところに欲しい

  • 検索がない

  • ポートフォリオ的に使いたい

などの貴重な意見を貰い、機能開発に役立てることが出来ました！

 

広報活動

今回はじめてPRTimesに載せるプレスリリースの内容を考えました。

普段は何気なく読んでいる記事ですが、実際に自分のサービスで書くとなると、表現一つ取ってもサービスの方向性とずれてないか気になります。

記事で表現する際に再度サービスと向き合い、コレって何のためにあるんだっけと考えるきっかけが起き、自分の作ったサービスですが理解が深まるといった経験ができました。

prtimes.jp

 

 

家族に誇れるサービスを

弊社が掲げるバリューの一つに「家族に誇れるサービスを」というものがあります。これは、提供するサービスに誇りを持ち続けられるように、お客様の声に耳を傾けサービスを改善し続けるべきだということ、どんなに規模が拡大しても、一人一人がお客様への提供価値を考え続けるチームでいること、そして「自分の家族に心から薦められるサービスである」 ということをクオリティの基準にする、というバリューです。

 

私達は全てのサービス開発において、このバリューを大切にしながらを作ることを心掛けています。もちろん今回も同じで、サービスを作る側として立ち返る際の大事な指標になりますし、個人的にとても共感の強いバリューの1つです。

 

サービスの終わり方

もちろん、今は考えていませんがサービスが終わる時を考えることも時には必要かもしれません。サービスを生み出したなら、エンジニアはその最後まで見届けたいというのが私の本音です。(もちろん色んな理由でこれが難しい事は理解しています。)

 

意思決定の方法は以下の点で考えています。

・サービスに誇りを持って、お客様に価値を提供出来ているか

・サービスの成長性/継続性

・コスト面

上から順に重要な指標として置いています。

 

最後が来ないに越した事はありませんが、もし終わらせるなら自分で決断したいと思っています。それがサービスを生むということであり、使ってもらってる人達への責任だと考えます。

 

そしてReviewMeは絶対終わらせないように頑張ります！！

 

最後に

今回エンジニア主体でサービスの企画から開発までを行なったことで、これまで以上にビジネス的視点を持って開発に取り組めるようになりました。

その点において、本来やらない開発以外の実務の経験(広報、サービス名検討、商標取得、ビジネスフレームワーク、KPI設定)は非常に有意義なもので、そこから得た学びをサービスに役立てることが出来たと感じています！

また新規でミニマムなサービス開発においては、エンジニアドリブンはエンジニアにとってもサービスにとっても良い開発手段だと思いました！

 

少人数でまだまだ未熟な開発体制ですが、これからサービスと共に最高のプロダクトチームへと成長できるよう頑張ります。

今後はサービスをグロースさせていくことに注力していくことになります。

エンジニアとしてサービスを開発するだけでなく、サービスをグロースするための視点を養えるチャンスだと思います。そういった経験や視点の話もこれから書いていけたらいいなと考えています！

 

弊社ではサービスにコミットする経験やフェーズに興味のあるエンジニアを絶賛募集中です！僕たちと一緒にReviewMeを作りませんか？

興味ある方は是非フラットにお話し出来ればと思います！

 

www.wantedly.com

 

www.wantedly.com