「Babel」に関連する技術ブログ

企業やコミュニティが発信する「Babel」に関連する技術ブログの一覧です。

WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話

こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により

Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします! 開催レポート

こんにちは。Ltech運営チームの井上です。 今回は、2021年3月2日(火)に開催した『Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします!』についてレポートします。 事前に共有させていただいていたウェビナーのURLに誤りがあり入室できないというトラブルもありましたが、参加者の方の温かいフォローもあり、最終的には120名を超える方にご参加いただき会は

Vue 3 + TypeScript + Jestの構成で単体テストを実行するために試行錯誤した話

スマートキャンプの20卒エンジニアの高砂です! 私は弊社の SaaS比較サイト「BOXIL」 の開発に携わっており、フロントエンドを中心に様々な機能を実装しています。 そんな中、Vue.js + TypeScriptで実装した機能群が複雑になってきた事から「より丁寧にテストを書いていきたい」という気運がチーム内で高まっていました。 そこで、元々Vue.jsが好きな私(下記参照)が試しに

Node.js で Twig のプリプロセッサーを作って言語の機能拡張をしてみた話

技術開発部の相馬です。好きな JS モジュールバンドラーは Rollup です。 表題のとおりですが、今回は Node.js を使って PHP のテンプレートエンジンである Twig のプリプロセッサーを作り、言語機能の拡張をしてみた話についてご紹介したいと思います。 はじめに 弊社のメイン事業である LIFULL HOME'S の開発の歴史は長く、技術的負債と呼ばれるモノも多く存在しています。

9 年を超えて開発が続く LIFULL HOME'S の Web フロントエンド開発環境の改善

技術開発部の相馬です。好きな UI フレームワークは Svelte です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 今回は、LIFULL HOME'S の Web フロントエンド(以降はフロントエンドと表記します)開発環境を、Node.js の資産を用いて近代化した話(以降は近代化と表記します)をご紹介したいと思いま

LIFULL HOME'Sでのフロントエンド刷新・リファクタリングの歩み

こんにちは。プロダクトエンジニアリング部の中島です。 本稿(連載)では LIFULL HOME'S におけるフロントエンド技術スタックの刷新やリファクタリングの取り組みについて発信していこうと思います。 歴史 LIFULL HOME'SではバックエンドをSymfony2(php) + SinatraベースのBFF(ruby)、フロントエンドをjQueryといくつかのマイクロライブラリによって構築しています。 LIFULL HOME'Sの現在稼

レガシーなアプリケーションにこそTypeScriptを採用するべき4つの理由

皆さんこんにちは。 ラク スのフジサワです。 以前、TypeScriptを始める前は 「学習コストが高そう」「今動いているサービスに導入するのは難しいんだろうなあ」 というイメージが強かったのですが、なんてことはなく、タイトルにある通り、 「TypeScript使わないという選択肢なくね?むしろレガシーなアプリケーションこそ、使っていくべきじゃね?」 と手のひらがグ

ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録

Native Application Groupの 大木 です。BASEでは、購入者向けのショッピングアプリ「 BASE 」、「 BASEライブ 」、ショップオーナー向けのショップ運営管理アプリ「BASE Creator」の3つのスマホアプリをリリースしております。今回は、その中の一つBASE Creatorを、React Nativeで置き換え、リリースしてみての話を、お伝え出来ればと思います。 課題と動機 https://help.thebase.in/hc/ja/articles/20

RailsでVue.jsのSFC(単一ファイルコンポーネント)を使うためにWebpackを入れてみた

こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、 SFC(単一ファイルコンポーネント) を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC(単一ファイル

一休.comスマホサイトのパフォーマンス改善(JavaScript編)

宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクト では、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現

社内勉強会 TechLunch で"JavaScript AST ことはじめ"という発表をしました

みなさん、こんにちは。開発本部エンジニアの平木です。こちらのブログの投稿自体はほぼ 1 年ぶりになりそうな勢いですが、みなさまお元気でしょうか? 弊社で定期的に開催してる社内勉強会 TechLunch で自分の順番が回ってきたため、どうしようか迷った末に JavaScript AST ことはじめ という発表をしたので、そのことについて書いていきます。 なぜ JavaScript AST について話

一休.comのJavaScriptユニットテスト環境

この記事は 一休.com Advent Calenrad 2017 の2日目です。 宿泊事業本部フロントエンドエンジニアの宇都宮です。 一休.comの宿泊予約サービス(以下、一休)では、以下のようなスタックでWebフロントエンドの開発を行っています。 言語:ES 2017 ライブラリ・ フレームワーク :古いところは jQuery 、新しいところはVue.js ビルドパイプライン:Webpack + Babel 一休では、主要導線のE2E

今だからこそ!マルチブラウザJavaScript再考

はじめに 皆さん初めまして、新卒一年目のFM_Harmonyと申します。 今回はマルチブラウザという観点から、 最近の JavaScript について調べました。 jQuery の登場や、主要なブラウザが標準仕様への準拠を進めたことで、エンジニアが JavaScript の動作環境を気にすることが、以前に比べ減りました。しかし調べていくと、今後は トランスパイル や AltJS による対応が、 JavaScript

babel-preset-env@2.0 を試した -トランスパイル環境をスケールさせていく -

こんにちは、制作部 フロントエンドエンジニアの武田です。 入社して5ヶ月経ちました。 ECMAScript の推し proposal は Cancellation API です。 今回は開発には切っても切れない Babel 、そのプリセットである babel-preset-env についてお話します。 このプリセットは Browserslist 1 の記述で compat table 2 を利用し、指定された環境にあったトランスパイルができるプリセットです。 使い方

社内勉強会 TechLunch で ECMAScript についての発表をしました

こんにちは、開発本部エンジニア平木です。 弊社では定例で TechLunch という社内勉強会を開いています。今回は自分が担当になったので、最近の動向も含めて ECMAScript について話をしました。 なぜ ECMAScript について話そうと思ったのか? ご存知の方も多いでしょうが、 ECMAScript とは JavaScript の仕様になります。 ここからは個人的な印象になりますが、つい数年前までは特
123
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?