この記事はLCL Advent Calendar 2022 - 24日目です。 qiita.com フロントエンドエンジニアの亀田です。メリークリスマス。 気が付けばあっという間に年末ですね。自分がLCLに入社してからは、約半年でコロナ禍になり、色々と失われた期間があるので、そんな…

はじめに バックエンドエンジニアの星野です。 最近、節電を意識して自宅のUbuntuサーバーを停止しました。 夏真っ盛りですが、電気代の値上げで自宅サーバーにとっては冬の時代です。 LCLではレガシー脱却の取り組みの一環としてRuby on Railsで作成された…

この記事はLCL Advent Calendar 2021 - 9日目です。 qiita.com フロントエンドエンジニアの亀田です。 アドベントカレンダーなのにここ数日ブログ更新がなかったのは予定通りで、決して自分が止めていたわけではありません。 今年も気がつけば12月なので、毎…

この記事はLCL Advent Calendar 2020 - 23日目です。 qiita.com フロントエンドエンジニアの川辺です。 もうすっかり年末ですね。 年末は毎年ソワソワしているのですが、私事ですが今年は12月末に子供が生まれる予定なので例年以上にソワソワしています。 赤…

この記事はこの記事はLCL Advent Calendar 2020 - 9日目の記事です。 qiita.com フロントエンドエンジニアの亀田です。 気が付けば12月と今年もいよいよ大詰めですが、個人的には体感はとても早い1年でした。 時期的にも丁度良いので、自分が所属しているフ…

フロントエンドエンジニアの岡田です。 3月からフロントエンドチームのメンバーが2名増えました 現在は、開発環境の改善とリファクタリングに力を入れています。 今回は、3月に入って改善したことについてお伝えします。 PrettierでCSSを自動フォーマット L…

フロントエンドエンジニアの岡田です。 今日は、最近1ヶ月間に行った、フロントエンド開発環境のプチ改善についてお伝えします。 すべてLCLが運営するバス比較なびの改善です。 webpack-mergeパッケージ導入 package.jsonをプロジェクトルート直下へ移動 npm…

フロントエンドエンジニアの岡田です。 今年の私のブログの目標は、「技術的な話を月に1本は書く」です。 昨年の記事を振り返ってみると、私が書いた話の半分くらいは技術以外の話でした。 チームの雰囲気をお伝えするのも大切ですが、LCLでは新しい技術を積…

フロントエンドエンジニアの岡田です。 先日、Reactでmetaタグを変える必要があったので、react-helmetを導入してみました。ですが、うまくいかないケースがあり、結局はES2015で書き換えました。 今回は、react-helmet導入と、最終的なES2015のコードをご紹…

フロントエンドエンジニアの岡田です。 LCLではフロントエンドエンジニアがマークアップも担当しており、画像の圧縮もエンジニアが行っています。 画像圧縮、面倒ですよね。。 いままでいくつか自動化を試しましたが、どれも長くは続きませんでした。 【画像…

フロントエンドエンジニアの岡田です。 LCLのフロントエンドでは、npm scriptsを使っていますが、たまに特定の環境だけ動かないことがあります。 今回は、ケース別に確認すると良いこと・試すと良いことをご紹介します。 ケース別の確認事項等 自分のローカ…

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

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

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

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

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

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

フロントエンドエンジニアの岡田です。 先日、AMPページにsticky広告を追加しました。 その際にいくつかつまづいた点があったのでまとめます。 弊社が運営するバスとりっぷでは、AMPページを用意しています。 すでに通常の広告は表示していたのですが、今回…

InstabugでWebサイトのフィードバックを送れるように設定しました。 すでにiOSでは使い始めていて、iOSの設定については以下の記事で軽く触れています。 techblog.lclco.com Web版は現時点（2017/11/13）でBeta版のためか、少し導入でつまづいた点もありまし…

フロントエンドエンジニアの岡田です。今回は、パフォーマンス計測ツール：SpeedCurveをLCLでどのように使っているかお伝えします。 設定について 計測タイミング（Times） 計測タイミングは多いに越したことはないとは思いますが、コストとのバランスで、今…

フロントエンドエンジニアの岡田です。 LCLでは、フロントエンドのパフォーマンスを計測するために、SpeedCurveを導入しました。 speedcurve.com 検討した計測サービス 導入にあたっては、以下のサービスも検討しました。 最初は、RUM （Real User Monitorin…

フロントエンドエンジニアの岡田です。 先日ご報告したとおり、LCLが運営する「夜行バス比較なび」では、jQueryで作られたサイトをReactへ置き換えています。 techblog.lclco.com 記事を書いた後も細々と置き換えを進めていますが、ページ単位での置き換えは…

フロントエンドエンジニアの岡田です。 先日作ったLINE botを改良しましたのでご紹介します。 techblog.lclco.com 前回の状態では、botはテキストメッセージを返すだけでした。 これでは開いてみるまでどんなヨガ動画かわかりませんし、候補が1つしかないの…

フロントエンドエンジニアの岡田です。 本日、夜行バス比較なびでは、プレミアムフライデー用の特集ページをリリースいたしました。 www.bushikaku.net こちらの特集でつかった、スクロールできるタブの実装についてご紹介します。 スマホ用のページの以下の…

フロントエンドエンジニアの岡田です。 先週の金曜日は、プレミアムフライデーでしたね。 LCLでも従業員全員が15時に退社しました。 premium-friday.go.jp 私は今回はどこへも出かけられなかったのですが、せっかく時間ができたので、LINE botをつくってみま…

フロントエンドエンジニアの岡田です。 先日、夜行バス比較なびを一部React+ES2015化しましたが、これに備えて、LCLでは昨年11月頃からBugsnagでJavaScriptのエラー監視を開始していました。 今回は、Bugsnagについて、簡単な説明と導入方法をまとめました。…

フロントエンドエンジニアの岡田です。私の仕事は、勤務時間中はほぼPCの前にいなければなりません。そうなると、1日8時間は座って同じ姿勢を続けることになりますが、それは体に良くないそうですし、頭の回転も悪くなる気がします。 そこで、働き方を工夫し…

フロントエンドエンジニアの岡田です。 昨年末に、弊社のサービス：夜行バス比較なびの一部分をReactで書き換えました。 www.bushikaku.net 夜行バス比較なびのJavaScriptは、構築から3年以上たつこともあり、コードの見通しが悪くなってきています。 リグレ…

フロントエンドエンジニアの岡田です。先月のHTML5 Conferenceに参加してから、プッシュ通知を試したくてしかたがなかったのですが、ようやくまとまった時間が取れたので試してみました。 最初は、Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシ…

フロントエンドエンジニアの岡田です。 弊社では現在、フロントエンド環境の見直し中です。 現在はjQueryが中心ですが、サービスを運用しながら、少しずつ以下の環境へ移行していく予定です。 Webpack + babel + ESLint（Airbnb）＋ ES6 + React ひとまず開…