esbuild

Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。 Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。 プロジェクト作成時に導入する方法と、既存のプロジェクトに途中から導入する方法をまとめてみました。 （今回はesbuildを使用してます。） プロジェクト作成時に導入する場合 rails new mofmof -j esbuild --css tailwind でプロジェクトを作成する 以下を package.json…

Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + esbuild の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + importmap の環境構築については以下の記事をご参照ください。 www.mof-mof.co.jp 1. ファイルを準備する まず始めに、以下の2つのファイルを作成します。 Dockerfile.dev docker-compose.yml Rails7.1から rails new で新規プロジェクトを作成した…

Rails7のフロントエンド開発環境としてjsbundlingのesbuildを採用した際にTypeScriptの導入に少し手こずりましたので備忘録として記事にしました。参考になれば幸いです。 esbuildではTypeScriptの型チェックは行ってくれない esbuildはデフォルトでTypeScriptのコンパイルをサポートしています。 そのため、特段何かインストールしたりや設定する必要はありません。 ただしサポートしているのはコンパイルのみで、型チェックまでは行ってくれません。そのため別途tsc -noEmit等のコマンドを並行して実行する必要があります。 それを踏まえると以下のような…

實は esbuild は關係が無い。だうやら大量の file を生成すると webpack --watch が SIGBUS で落ちるやうだ。esbuild が tsc よりとても速いから一氣に webpack に更新を食はせて、落ちる頻度が随分と上がる、といふ事があった。bundle せず大量の TypeScript file を大量の JavaScript file に build してゐる理由は別途であるので、ここではさういふものだと思って欲しい。 似た issue を見附けた。 github.com この issue を讀み、再生成する file 數を減らせば改善すると假說を立て、少な…

はじめに まずはwebpack esbuild swc Snowpack Vite まとめ

皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか？ 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多くなっており、そのためJSのバンドルサイズは嵩む一方です。 そうなってくると気になるのはビルド時間です。 私の担当しているプロジェクトでもwebpackのビルドが34秒かかっており、今後さらにプロジェクトが大きくなれば1分越えも夢ではないです... そこで、Snowpack v3をにチャレンジしてみました。 Snowpackとは …

今日はviteを利用したprojectでブラウザ対応を宣言しpolyfillなどを対応する方法についてまとめます。 トランスパイラを用いたブラウザ対応 babelなどのトランスパイラを利用している場合はbabel-preset-envを利用してbrowserslistとコードベースの内容に応じて自動でcore-jsのimport文を追加しpolyfillを解決する方法が用いられてきました。swcを利用している場合も同等の機能が用意されています。 viteのデフォルトブラウザ対応 こちらにもある通り、viteのブラウザ対応はESMのサポート状況を基準に行っており、検証する対象は構文にとどまってい…

2024年8月25日から2024年8月26日にかけて、Satokiさん主催でSatokiCTF 2024が開催されました。Satokiさんの誕生日を記念しての開催ということで、おめでとうございます。 SatokiCTF 2024は「複数人で協力してSatokiを倒す (全完する) レイドバトル形式」と銘打ったCTFで、奇抜な問題だったり極端な難易度の問題だったりが出題されていたほか、ルール上「他の参加者の競技を妨害する行為」以外は許可されており、たとえばチーム間での協力や開催中のYouTube等でのライブ配信すら許されていました。たとえば、以下のような配信がありました: 【SatokiCTF】…

ここ最近のトレンドとして、Vercel, Cloudflareとサーバレスにおけるコールドスタート高速化周りでしのぎを削っており Lambdaも様々な取り組みがなされています。それでもLambdaはシェアが大きいこともあり、コールドスタートが話題になることは多いです。この記事では、あまり語られないファイルサイズの観点からコールドスタート高速化にアプローチします。 zipアーカイブに着目するモチベーション Cold Start時はS3からコード一式をダウンロードするため、サイズが小さいほうがCold Startが短くなります。 また、解凍後のファイルサイズが250MBまでという制限もあります。こ…

pnpm workspace+TypeScriptなmonorepoで、 Cloud Functions for Firebaseを開発していたときに、 unjs/unbuildでビルドしてみたときの備忘録(*´ω｀*) 少ない設定でビルドができて便利(*´ω｀*) unbuildとは unjs/unbuild: 📦 A unified JavaScript build system 「A unified JavaScript build system」らしい。 Viteがフロントエンド用のビルドに対し、 unbuildはライブラリなどによさそうな印象 少ない設定でESM/commonjs+型…

おはこんにちばんわ。 今回は、「e18e」というプロジェクトについて興味を持ったので、深掘りしていきたいと思います！ READMEやdocs配下のmarkdownを日本語に訳しながら見ていきたいと思います。 github.com e18eとは？ Contributing Credits cleanup コントリビュートのためのガイド 発見方法 Rollup bundle 依存度の深さに注目する 改善 cleanup issueを立てる 修正 巨大なサブツリー 機能的に重複している 巨大な依存関係 Speedup Linting ESLint Biome Coding tips ホットコードパス…

AWS Lambda上で実行するNode.jsアプリケーションをTypeScriptで開発しているとき、TypeScriptのトランスパイルをどのように行うかがポイントであるが、AWS SAMを利用しているならば template.yml ファイル内にesbuildの設定を記述することで sam build 時に自動的にトランスパイルしてくれる。 設定方法は以下のドキュメントを参照する。 https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-using-…

はじめに 株式会社おてつたびは、「日本各地にある本当にいい人、いいもの、いい地域がしっかり評価される世界を創る」というビジョンを掲げ、地域を訪れたい人と人手不足などで困っている地域を「手伝い」×「旅」でマッチングするサービス『おてつたび』を運営しています。現在、同社はサービスの拡大とユーザー体験向上を目指し、Webエンジニアを募集しています。この記事では、おてつたびが提供する独自の仕事と、そこで得られる経験について詳しく紹介します。 おてつたびのサービス概要 おてつたびは、全国各地の事業者と旅人をマッチングするBtoBtoCプラットフォームです。事業者側には、農家、ホテル、旅館、自治体など、特…

以下のようなpropshaft、JavaScript Bundling for Rails(TypeScript, Rollup)、CSS Bundling for Rails(TailwindCSS)、View Componentを使ったRails wayなフロントエンド環境を試したみたので感想とかをメモ📝 GitHub - rails/propshaft: Deliver assets for Rails GitHub - rails/jsbundling-rails: Bundle and transpile JavaScript in Rails with esbuild, rollu…

仕事柄、Webアプリケーション開発に携わることはあまりないが、JavaScript(以下JS)で辛い思いするのはもう嫌になったので次携わることになったときのために、JSを改善したAltJSやフロントエンドフレームワークを使えるようにしておこうと思い、PureScript(以下PS)に入門することにした。PureScriptのロゴはクリエイティブ・コモンズ・ライセンス（表示4.0 国際）に基づいています。 ロゴ製作: Gareth Hughes, 2014

こんにちは、RubyKaigi大好きkinoppydです。2024の開催に合わせ、公式スケジュールアプリのSchedule.selectを大幅にアップデートしたので、お知らせです。 rubykaigi.smarthr.co.jp 新機能 チーム機能 たしか2022年の会場で、「同じ会社の人がどこのセッションを聴きに行くのか一覧する機能がほしい」と言われました。何のために必要なのかというと、ブースの当番を決めるためにスケジュールの調整を行いたいので一覧したいとのことでした。そのユースケースを聞いて、確かにその機能欲しいなと思ったので、実装しました。 チーム画面 同じチームに所属しているユーザーが…

こんにちは、スタメンでTUNAGの機能開発チームに所属している森(@hisayuki_mori)です。 今回、2023年の11月からスタートした新機能開発においてフロントエンド側の開発を担当しました。 この5ヶ月の間に新しくチャレンジしたことの紹介をします！ チャレンジしたことまとめ 背景 詳細 Node.jsを18系から20系にアップデート Reactを17系から18系にアップデート Storybookの8.xをalpha版から導入 Biomeの導入 testing-liblraryの導入(v12)とアップデート(v15) やりきれなかったこと 最後に チャレンジしたことまとめ Node.j…

「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか？ 今回はそんなあなたにReactを部分的に使用する方法を紹介します。 こちらの記事を応用していきます。↓ www.mof-mof.co.jp 下準備 Reactの導入方法はこちらの記事をご参照ください↓↓ www.mof-mof.co.jp 手順 package.json に記載されているビルドスクリプトのビルド対象に app/javascript/*.* が入っていることを確認する。 入っていない場合は以下を参考に書き換えてみてください。 "build:js"…