LCL Engineers' Blog

夜行バス比較なび(高速バス比較)・格安移動・バスとりっぷを運営する LCLの開発者ブログ

React バージョンアップ(v15.3.2 → v16.4.1) を行いました

フロントエンドエンジニアの田中です。 React の導入からバージョンを変えずに古いまま使用をしていましたが、「使いたいと思った機能がバージョンを上げないと使えない」「Webに載っている情報は新しいバージョンで記述されていることが多いため、古いバー…

輪読会がうまく回りはじめた話

モバイルアプリエンジニアの山下です。 LCLでは今月から全社員を対象にしたフレックスタイム制のトライアル期間が始まりました。 エンジニアは以前からもフレックスに近い働き方が可能でしたが、いくつかの新しいルールが追加されました。 これまでの取り組…

地味に面倒なブランチ作成〜WIPプルリクエストまでをコマンド1つで行う

フロントエンドエンジニアの岡田です。 やる気がでない時の最良の方法は、「とりあえず始めてみる」ことだと聞いたことがあります。 今回は、やる気がでないときでもコマンドを1つ叩くだけで、ブランチ作成〜WIPプルリクエストまで作ってくれるように設定を…

SwiftFormatで機械的にコーディングルールを統一する

iOS

モバイルアプリエンジニアの山下です。 W杯開幕からほぼ全ての試合を観ているため、在宅勤務を活かして出社時間ギリギリまで寝る生活をしています。 今回は、LCLが運営している高速バス比較のiOS版の開発時に可読性を維持する支えとなっている『SwiftFormat…

E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました

E2E

LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良かったので本格的にE2Eテストへ導入しました。本記事では、…

一部 React のサイトに MobX を導入しました

フロントエンジニアの田中です。 以下記事にもありますが、弊社のサービス:夜行バス比較なびの React 実装部分に MobX 導入しました。 techblog.lclco.com 目的 そもそもの導入目的は、親コンポーネントが違うコンポーネント同士の連携を行いたかったからで…

CSSのコンパイラをsass-railsからnode-sassへ変更しました

フロントエンドエンジニアの岡田です。 先日、LCLが運営する夜行バス比較なびのCSSコンパイラを、sass-railsからnode-sassへ変更しました。 今回は、Node.jsへの移行にあたってRailsとの連携をどうしたか、移行で起きた問題などについてまとめました。 node-…

週末にもくもく会をしてみました

フロントエンドエンジニアの岡田です。 週末に社内のメンバーでもくもく会をしてみました。 ルールはただ一つ、仕事は禁止です。 もくもく会当日は、前から気になっていたスターバックスのポットサービスを頼んでみました。 オフィスがある晴海トリトンの2階…

1日のスケジュールを可視化してタスク消化率の最適化を図る

1日のスケジュールを可視化してタスク消化率の最適化を図る モバイルアプリエンジニアの山下です。 今年からGoogleカレンダーにその日のタスクを予定として登録しています。 これにより、以下のメリットがあります。 日毎に消化したタスクを後から見返せる …

LCLでの書籍購入制度の活用事例

Webエンジニアの森脇です。 最近では、福利厚生として書籍購入制度がある会社も増えてきたと思いますが、LCLも例に漏れず書籍購入制度があります。技術情報はインターネットで十分だったりするので、最近は書籍を読まない方も多いかもしれませんが、LCLでは…

ESLintを使用しているプロジェクトにPrettierを導入しました

フロントエンドエンジニアの田中です。 今回、プロジェクトにコードフォーマットのプラグインであるPrettierを導入しました。 元々、ESLintを使用してコードの品質担保をしていたのでPrettierとの競合が起きないよう設定も行いました。 Prettierとは Prettie…

Google Maps APIのアップデートについて知っておくべきことを整理しました

先日、6月11日からGoogle Maps APIが「Google Maps Platform」として名称を変え、新しく刷新されるという発表がありました。 Google Developers Japan: Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 この変更は非常に大き…

がんばるタイム、止めました

フロントエンドエンジニアの岡田です。 LCLのエンジニアチームでは、2月から3ヶ月半ほど「がんばるタイム」を実施していましたが、少し前に止めました。 今回は、「がんばるタイム」導入の背景や、結果についてまとめました。 がんばるタイムとは トリンプ・…

ALBのログをEmbulk + BigQuery + Redashで可視化する

LCLでは、AWS ALBのアクセスログをEmbulk/Fluentdを利用してElasticsearch/BigQueryへ格納しています。 Elasticsearchは、短期的なログの解析を目的としており、予期せぬアクセスが発生した場合の原因調査等に利用しています。ログは一定期間を過ぎると破棄…

Bonfire iOS #4に参加してきました

モバイルアプリエンジニアの山下です。 昨日はヤフー株式会社主催のBonfire iOS #4に参加してきました。 Bonfire iOS #4 - connpass 第4回のテーマは「UI」ということで、デザイナーとの協業の話からARKitのコアな話まで深みのある発表内容でした。 今回は簡…

Zeplinを導入してデザイナーとエンジニアの連携をもっとスムーズに

フロントエンドエンジニアの岡田です。 LCLでは、デザイナーとエンジニアの連携をスムーズにするために、Zeplinを導入しました。 今回は、導入にあたって行ったことをまとめました。 デザイン&コーディング体制 Zeplin導入前に使っていたツール Zeplinとは …

トリプルディスプレイで画面の切り替えをなくした話

モバイルアプリエンジニアの山下です。 2ヶ月ほど前からオフィスのディスプレイ環境をトリプルディスプレイにしました。 ディスプレイを増やすことはバランス効率の観点で賛否両論あると思いますので、今回はディスプレイを増やそうと思った経緯と効果を共有…

AWS C4インスタンスからC5インスタンスへ移行しました

AWS

Webエンジニアの森脇です。 先日、EC2のC5インスタンスが東京リージョンでも利用可能になりました。早速、LCLで利用しているc4.largeのWebアプリケーションサーバを、c5.largeへ移行しました。 C5インタンスとは コンピューティング最適化タイプの第5世代で…

自動タイムトラッキングツールのGTMを手動のTogglの結果と比較してみた

フロントエンドエンジニアの岡田です。 エンジニアは工数を出す機会が多いと思いますが、みなさんはどのようなツールを使っていますか? 私は数年前から、Togglというツールを使って計測しています。 仕事を始める前にはボタンをポチッと押し、終わったらポ…

エンジニアブログ編集部の立ち上げとその目的

LCLでは今年からエンジニアブログ編集部を立ち上げました。 現在はフロントエンド、バックエンド、モバイルアプリエンジニアの3人で活動しています。 今回は立ち上げから3ヶ月が経過したので、立ち上げた経緯とその効果を紹介したいと思います。 目次 - エン…

Embulkを利用して、AWS請求情報をRedashで可視化する

今更ながら、Embulkを使う必要がでてきたので、素振り兼ねてAWS請求情報(S3)をDBへ格納しRedashで可視化できるようにしました。 AWSの費用は管理コンソールの「コストエクスプローラー」で確認できますが、コンソールへのログインはMFAを使用していることも…

ChatWork Webhookを利用したデプロイフロー

LCLでは、ChatWork + Hubotを利用してデプロイをしていましたが、ChatWorkがWebhookに対応したため、Hubotを廃止しました。簡単にどのような構成で行っているかを紹介します。

Bugsnagでエラーが多すぎる時に設定する3つの項目

フロントエンドエンジニアの岡田です。 以前ブログでもご紹介しましたが、LCLでは、JavaScriptのエラー検知のためにBugsnagを利用しています。 techblog.lclco.com 実は、設定してしばらくの間は、エラーが多すぎて本当に致命的なエラーが埋もれてしまってい…

git hooksをovercommitで管理して作業効率の底上げを狙う

チームで開発を進める上でちょっとした"決まりごと"が存在すると思います。 例えば、LCLの開発チームには以下の"決まりごと"が存在します。 コミットメッセージの先頭にはYouTrackのIssue番号を付ける RuboCopで設定したコーディングスタイルになるべく従う …

DFP Key-Value ターゲティングを利用して、広告配信を制御する

Webエンジニアの森脇です。 今回は、DFPでの広告配信について紹介します。 DFPとは DoubleClick for Publishers(DFP)は、Googleが提供している広告配信プラットフォームです。 多機能なので詳しくは、以下のドキュメントをご覧ください。 https://support.…

GASでラクをする技術(Gmail・Google Calendar・RSS編)

LCLでは業務や情報収集の中で定期的な作業を行う際にGoogle Apps Script(以下、GAS)を利用した自動化をしています。 GASとは、クラウド上でスクリプトを実行できるサービスです。スプレッドシートをはじめ、Googleが提供している色々なサービスと連携する…

突撃! 隣のChrome拡張機能

フロントエンドエンジニアの岡田です。 みなさん、Chromeの拡張機能、使っていますか? 拡張機能は、一つ一つはシンプルなものでも、既存のWebサービスをより使いやすくしてくれます。作業効率が上がるので、良い機能はどんどん取り入れていきたいですね。 …

iTerm2とfish shellを使ったターミナル環境構築のはじめの一歩

先日、エンジニアチームでの勉強会にてターミナルを題材としたハンズオンを行いました。今回はその際に共有した業務効率を上げるためのターミナル環境構築について紹介します。 以下に心当たりのある方は一緒に構築していきましょう。 ターミナルがモノクロ …

Webサービスの品質向上のために導入しているサービス・ツールまとめ

LCLが運営しているWebサービスは、品質向上のために、複数のサービスやツールを利用しています。今回はそれらのサービス・ツールをまとめてご紹介します。 品質向上のためのプロセス それぞれのサービス・ツールは以下のタイミングで利用しています。 各サー…

Varnish Grace Modeで非同期にキャッシュを更新する

先日、[https://inside-frontend.com/:title] というフロントエンドのイベントがあり、チームメンバーが参加しました。参加メンバーから日経新聞社様の事例「日経電子版を速くする」について共有をしてもらい、弊社でも活用できそうな点は、対応することにし…