「Babel」に関連する技術ブログ(25件)

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

Webpacker から Shakapacker へ移行するときの注意点

はじめに こんにちは。システムエンジニアの佐藤です。 WESEEK では Rails を使った Web アプリケーションの開発をするプロジェクトがあります。 この記事では Webpacker から後継である Shakapacker への移行を経験した際に、どのような差があったのか確認した結果を紹介したいと思います。 Webpacker は引退した Readme.md にもあるように、Webpacker は 5 年間に渡って Rails コミュニテ

BUYMAフロントエンド開発にRecoilを導入してみた話

この記事は Enigmo Advent Calendar 2022 の 5日目の記事です。 こんにちは。フロントエンドエンジニアのWooです。 エニグモ へ入社して3年目、主に BUYMA の購入者側のページをReactで構築しています。 BUYMA ではReactのグロー バルス テート管理のために主にReduxを使用していますが、今回は新しい取組としてRecoilを導入し、開発を行なってみましたので、その経験を共有しようと思

Prettier の代替として Rome 触ってみた

Prettier の代替として Rome 触ってみた はじめに こんにちは、旅行 PF 部エンジニアの奥田です。 この記事では、Prettier の 10 倍速いと言われるRomeを触っていきます。 ここまで圧倒的な速度を喧伝されては気になるのは人の性…さっそく触っていきます! Rome とは フロントエンド開発のツールチェインを 1 つに統一することを目指しているプロジェクトです。 Babel,ESLint,webpack

Stable Diffusion呪文-バベルの塔のイラスト

電通国際情報サービス 、オープン イノベーション ラボの 比嘉康雄 です。 Stable Diffusionシリーズ、今回のテーマは バベルの塔 のイラストです。 今回は建物のイラストの呪文を学びましょう。 Stable Diffusionのおすすめコンテンツはこちら。 Waifu Diffusion 1.3.5_80000 v2.1 金髪美女写真 v2.1 美少女アニメ画 v2.1 AUTOMATIC1111 v2.0 美少女イラスト v1.5 美少女画検証 美少女アニメ画改善

SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開

こんにちは。Pay ID Devの大木 ( @roothybrid7 )です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、 SWC(Speedy Web Compiler) や Release Please を利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント 「BASE Tech Talk #1

フロントエンド関連の最新ニュース・記事をラジオ感覚で聞く、フロントエンドTechCafe【まとめ】

技術広報の yayawowo です。 突然ですが、変化の多いフロントエンド関連の情報を日頃どのようにインプットされておりますでしょうか? SNS やWeb記事、最近では Podcast という方もいると思います。 しかしながら「時間に余裕がない!」という方も多くいらっしゃるはずです。 そんな方のために、 ラク スでは フロントエンド関連の最新ニュースや記事を定期的にピックア

Browserslist でサポートブラウザを設定しよう

この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会にいちから見直してみようと思いました。 browserslist? https://github.com/browserslist/browserslist 簡単に言えば、クエリを書くとそれに該当

esbuild で開発環境の JS をビルドをしたら 55 倍(220sec->4sec)高速になった件について解説させてください

テクノロジー本部の相馬です。好きな Web API は Window.requestAnimationFrame() です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 私はフロントエンドの開発環境の改善などを主に担当しております。 今回は、LIFULL HOME'S の JavaScript 開発環境のビルドを、esbuild を使ってビルドしたところ、当社比で 55 倍

PostCSSは開発標準ツールになるのか検証しました

こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課の @t_okkan です。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在 ラク スでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕

若手エンジニアの俺がフロントエンドのビルドを早くしてReactも導入しちゃった話

またオレ何かやっちゃいました? こんにちは!!!スマートキャンプでエンジニアをしている吉永です! 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドともに様々な技術的負債となる部分を抱えています。 また、その負債の中には普段の業務時間では手をつけにく

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 の資産を用いて近代化した話(以降は近代化と表記します)をご紹介したいと思いま
12