Wantedlyは、月間150万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

【開発者ブログ】eat開発で使われている技術、ブラニューエンジニアが注目している技術、これからeatでやりたいこと

こんにちは、フロントエンドエンジニアの小原です。
入社して8ヶ月。この開発者ブログも半年以上書いてきましたが、「そういえば、そもそもeat開発で使っている技術の話題とか書いてないな」と思いました。また、エンジニアも増えてきたことも有り、Slackのknowledgeチャンネルもテクノロジー的な話題で盛り上がるようになってきました。
そこで今回は「eatで使われている技術」「ブラニューエンジニアが注目している技術」「これからeatでやりたいこと」について書きたいと思います。

eat開発で使われている技術

バックエンド・サーバサイド

Ruby on Rails
eatのバックエンドはRuby on Railsで開発しています。スタートアップのプロダクト開発ではもはや定番ですね。eatのCMS・マーケティングツールのいずれもバックエンドはRuby on Railsで開発しています。

AWS(EC2/S3/CloudFront/RDS)
インフラ周りはAWSを利用しています。この辺も定番ですね。アプリケーションはEC2で動かし、データベースはRDSで運用、画像などのバイナリーファイルはS3に配置、一部コンテンツはCloudFrontで配信という、現在の一般的なWebサービス・アプリケーションの構成となっております。eat以外で変わったところでは、一部外部のサーバで運用しているWordPressコンテンツを、CloudFrontで配信しているところでしょうか。

CircleCI
CIツールはCircleCIを利用しています。主にデプロイやテスト、RuboCopなどコードチェックで利用しています。

Sentry
エラーログの収集にSentryを使用しています。エラーが発生すると、エラー内容をSlackに通知します。

フロントエンド

Vue.js
eatではJavaScriptフレームワークにVue.jsを採用しています。去年あたりはReact・Angular.js(Not Angular)が2大フレームワークと行った感じで、Vue.jsはそこまでメジャーではありませんでしたが、今年に入って急速に採用する開発会社が増えていますね。シンプルな導入からフルスタックまで幅広く対応できるところが魅力でしょうか。
個人的な感想を言うと、Angular.js(1.X系)からのリプレースなら、無理にAngular5にするよりも、Vue.jsにリプレースしたほうが楽なのではないかと思います。

CoffeeScript
現在のaltJSのトレンドはTypeScriptやFlowといった感じになってますが、eatはRuby on Railsを採用している関係でCoffeeScriptを採用しています。個人的にはリーダビリティが高くて、書く文字数が少なくて好きなんですけどね。インデントを入れ忘れてエラーになるのはご愛嬌。

Gulp.js
eatのテンプレート開発はGulp.jsでコンパイルしています。主にSassのコンパイルやCSSのminify、ホットリロード、画像の最適化などで利用しています。

npm
パッケージ管理はnpmを使っています。yarnが流行っていますが、npmはQiitaにナレッジがたくさんあるので(いわゆる枯れた技術)、困ったときに助かります。関係ないですがyarn(ヤーン)ときくと林家木久扇師匠が思い浮かぶのは僕だけでしょうか?

Sass
もはや今となっては当たり前となっているCSSプリプロセッサはSass(SCSS)で書いています。現代のWebアプリケーションは、CSSもコンポーネント化前提なのでSassがなかった頃には戻れないですね。

開発環境・ツール

GitHub
やはり定番ですがバージョン管理・ソース管理はGitHubを利用しています。GitHub上でコードレビューを行い、コードの品質を担保します。一部WikiやIssueなどでも利用していたりします。

Slack
これも定番ですね。単なるチャットというだけではなく各サービス、ツールからの通知にも使っています。

Trello
以前にも紹介しましたが、主に社内用としてカンバン式タスク管理ツールとして利用しています。またメモやリマインダー、日報などでも利用しています。

Redmine
Trelloとの併用です。こちらはどちらかというと外部協力会社との課題トラッキング的な利用の仕方です。UIとかが一世代前の感じなので、新しくならないかなー、とか思ってたりします。

注目している技術とやりたいこと

サーバサイドレンダリング

以前のブログでも紹介しましたが、今後eatで導入したい技術として一番ホットなものが、Nuxt.jsによるサーバサイドレンダリングです。
・速い(表示速度が)
・安い(インフラコストが)
・うまい(アーキテクト的な意味で)
の三拍子揃っているので是非やりたいですね。
Nuxt.jsを使うとなると、必然的に現在GulpでやっていることをWebpackでやるようになったり、RailsでやっていることをVue.js(vuexやvue_router)などに置き換えたりと、工数も学習コストもかなり高いですが、是非やりたいです。

マイクロサービス化

現在eatはCMSの表示画面・クライアント画面・マーケティング機能である程度機能ごとに分かれていますが、プロダクトを成長させるうえで、ある程度の段階でマイクロサービス化が必要になるかと思います。思い浮かぶものとして(現在実装されていない計画段階のものも含めて)
・画像管理
・ブログ
・会員機能
・チャット(サポート機能)
・メルマガ
・メールフォーム、問合せ管理
・アナリティクス
あまり分割しすぎると保守性が逆に下がるし運用コストが上がるので、この辺はバランスですが。

Firebaseなどのサーバーレス化

マイクロサービス化と絡めて考えられるのが、一部サービスのサーバーレス化です。常時EC2インスタンスを起動しておく必要のないものは、Firebaseなどをつかって実現したいというものです。上記だとチャット機能や、会員画面の通知機能などでしょうか。

jQueryプラグインのVue.jsへの置き換え

ナビゲーションドロワーやスライダーやデイトピッカーなど、一部jQueryプラグインで実現しているものをVue.jsに置き換えるというものです。小原も含めブラニューの開発者は脱jQuery原理主義というわけではないですが、置き換えによるメリットが有るものは積極的に置き換えていきたいです。

eatを有名にしたい

さて、上にあげた技術的なやりたいコトとは別にプロダクト的な目標として、eatを有名にしたいというものが有ります。まだできたばかりのサービスで、技術的にもビジネス的にも課題はたくさんありますが、とにかく「サイトを作りたいけど、サーバとか立てるのめんどくさいし、HTMLなんか書きたくない」というときに使ってもらえるサービスにしたいです。採用サイトやキャンペーンサイト、ランディングページになんかにも使われるサービスにしたいですね。

エンジニア、デザイナーの皆さん。eatでポートフォリオを作ってブラニューに応募してみませんか?

そんなわけで、エンジニア・デザイナーの皆さん。eatでポートフォリオを作ってみませんか?ポートフォリオはデザイナーはポートフォリオは必須ですし、エンジニアも今やGitHubアカウントと並んで、仕事を取るための必需品となっております。eatはそんな使い方もできるのです。
そして、少しでもeatに興味がある、あるいはeatにこんな機能が欲しい。そんな人は是非一度オフィスに遊びに来てください。

ブラニュー株式会社では一緒に働く仲間を募集しています
Anonymous
Picture?height=40&width=40
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
Picture?height=40&width=40
2587e2d2 79cb 4dd6 b478 e658c543cbb9
7 いいね!
Anonymous
Picture?height=40&width=40
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
Picture?height=40&width=40
2587e2d2 79cb 4dd6 b478 e658c543cbb9
7 いいね!

開発秘話

あのサービスはこうして生まれた。開発秘話特集

今週のランキング

ランキングをみる

Page top icon