Content-Length: 363964 | pFad | http://b.hatena.ne.jp/iga_k/js/
実録レガシーコード改善 / Working with Legacy Code: the True Record
2024/01/15(月) 12:00 〜 13:00 t-wadaさんが後世に残したい、実録レガシーコード改善 https://findy.connpass.com/event/304101/ テストコードが無いコードを引き継いだところからはじまる、実際に2018年に行った受託開発案件のエ…
npm ciのキャッシュ方式の検討
結論から言うと、node_modulesをキャッシュしてnpm ciの実行を省略するのが、多くの場合には有効そうです。 はじめに CIで npm ci を使うとき、実行時間短縮のためにキャッシュの利用を検討することになると思います。このとき、どのようにキャッシュするのが良いのでしょうか？ よく知られているキャッシュ方式として、以下の二通りの方式があります。 ~/.npmをキャッシュする方式 node_modulesをキャッシュする方式 それぞれの違いについて、詳しく見てみましょう。 ~/.npmをキャッシュする方式 npm ci を実行すると、POSIX系のOSではデフォルトで ~/.npm にキャッシュデータが書き込まれます。package-lock.json をキーにこのディレクトリをキャッシュしておくことで、次回以降の npm ci 実行時にこのキャッシュデータを利用しよう、というの
Ruby での JavaScript の圧縮を Uglifier から Terser に変えた - Qiita
はじめに JavaScript を Ruby で圧縮したい。 こういう処理はフレームワーク側でやってくれるので，あまり意識することはないと思うが，たとえば静的サイトを生成するプログラムを自分で書く場合，やり方を知らなければならない。 定番 Uglifier 従来，こういう目的には Uglifier という gem がよく使われてきた。 執筆時点の最新版は 4.2.0 なので，本記事もこれを前提とする。 使い方は超簡単で， require "uglifier" puts Uglifier.compile(<<~JS) function average(numbers) { return numbers.reduce( function(sum, number) { return sum + number }, 0 ) / numbers.length } JS
Language Server Protocol に対応したミニ言語処理系を作る
自作プログラミング言語でコード補完やタグジャンプをしたり、ソースコードに色をつけたりする。
モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ
こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発事情について話をしました。せっかくなのでその内容の共有と、勉強会を開催した動機などを紹介したいと思います。 この話は fukabori.fm でも取り上げていただいてお話ししたので、よければそちらもご視聴ください。 fukabori.fm 背景・動機 クックパッドのウェブアプリケーションは10年以上もの間 Ruby on Rails で開発されてきましたが、2020年から一部のページは Next.
Language Server Protocolを用いたVSCode拡張機能開発 (前編) | フューチャー技術ブログ
はじめにこんにちは、Futureでアルバイトをしている川渕です。アルバイトの前はFutureのインターンシップでRust製SQLフォーマッタの作成を行っていました(その時の記事はこちら)。現在はそのSQLフォーマッタをVSCodeの拡張機能にする作業を行っており、そのための方法を学んでいます。 本記事ではLanguage Server Protocol(以下LSP)を用いたVSCode拡張機能開発について説明します。 前編ではLSPを用いたVSCodeの拡張機能開発チュートリアルと、チュートリアルに使用したサンプルコードの解説を行います。 後編ではサンプルコードに機能を追加する方法を説明します。 Language ServerとはLanguage Serverとは、自動補完、エラーチェック、型チェックなどの様々な言語機能をIDEに提供するものです。 Language Server Prot
ruby.wasm で MySQL Parameters を作り直した - tmtms のメモ
プライベートでは基本的に誰の役にも立たないプログラムを作ってるんだけど、たまにうっかり MySQL Parameters みたいな役に立つものを作ってしまう。 MySQL Parameters は5年くらい前に Vue.js の勉強のために作ってみたんだけど、結局そのまま Vue.js は触らず放置状態だった。MySQL の新しいバージョンが出るたびにデータは更新してたけど。 ruby.wasm で Ruby が WebAssembly 上で動くようになり、ブラウザ上で JavaScript の代わりに使えるようになったんで、MySQL Parameters を Ruby で作り直してみた。 ruby.wasm ruby.wasm のページに載ってるけど、これだけでブラウザ上で Ruby が動く。簡単。 <html> <script src="https://cdn.jsdelivr.ne
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
ruby.wasm で遊ぶ ～Web Workerを使ってバックグラウンドで動かすまで - Qiita
Ruby 3.2 から WASI ベースの WebAssembly がサポートされるということで、すでに Preview 版も公開されています。 この記事は、正直 WebAssembly とか WASI とかよく分かっていない1人間がブラウザ上で Ruby を色々動かしてみる記事です。とりあえず動けばいいという感じなので、おそらく無駄な記述も多いかと思います。ご了承ください。 作るもの テキストボックス等に記述された任意の Ruby スクリプトをブラウザ上で動かして、その実行結果を得られるようなもの。 要するに RubyOnBrowser とか TryRuby とかの二番煎じを作りたいのです。 とりあえず Ruby スクリプトを動かす ruby.wasm の github 上に Quick Start (for Browser) が載っているので、まずはこれをほぼそのまま。 <html>
大量塩基配列登録申請システムができるまで
4USFBNT�"1* w ϒϥβ্ͰσʔλΛࡉΕʹಡΈॻ͖͢ΔΠϯλʔϑΣʔεΛఏڙ͢Δ� w ରϑΝΠϧωοτϫʔΫϦΫΤετ�ϨεϙϯεͳͲ� w ϝϞϦരൃͷ৺ͳ͘େ͖ͳσʔλΛѻ͑Δ const res = await fetch('https://example.com'); res.body // これが ReadableStream <input type="file" /> <script> document.querySelector('input') .addEventListener('change', async (e) => { const file = e.target.files[0]; const reader = file.stream().getReader(); for (;;) { const {done, value} = await
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
Node.js のビルドツール「esbuild」について！
はじめに esbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。 ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。 私自身が webpack を普段使っていて、ビルドに時間がかかりすぎているのが気になり、esbuild について調べてみようと思いました。 esbuild の特徴としては、 キャッシュなしでの高速なビルド ES6 と CommonJS をサポート ES6 の Tree shaking 対応（利用されていないコードの除去） JavaScript と Go による API TypeScript と JSX をサポート ソースマップの生成 ソースコードの最小化 プラグイン（現在、experimental で v1.0.0 より前に対応予定
Rails: Webpackをesbuildに移行してJSのビルドを縮小・高速化（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How I migrated a Rails app from Webpack to esbuild and got smaller and faster JS builds | Arkency Blog 原文公開日: 2022/08/29 原著者: Jakub Kosiński サイト: Arkency 原文の章立ての一部を訳文で変更しています。 先週、私はJavaScriptコードが30万行を超えるかなり大規模なプロジェクトで、Webpack 4をesbuildに移行する作業を担当しました。私たちのRailsプロジェクトではJavaScriptスタックをメインアプリケーションに統合するのにWebpackerを使っていました。ここ数か月はもっぱら長時間のビルドと格闘し続け、さらにWebpackerが推奨ライブラリでなくなったこ
Rails: Sprockets->Propshaftアップグレードガイド（翻訳）｜TechRacho by BPS株式会社
概要 MITライセンスに基づいて翻訳・公開いたします。 英語記事: propshaft/UPGRADING.md at main · rails/propshaft 原文更新日: 2023/12/12（c2a87b5） ライセンス: MIT 2022/07/14: 初版公開 2023/10/18: 更新 2024/02/21: 更新 Propshaftの適用範囲はSprocketsよりも狭いので、SprocketsからPropshaftへの移行にはjsbundling-rails gemとcssbundling-rails gemも利用する必要があります。本ガイドでは、プロジェクトがRails 6.1以後の以下の規約に沿っていることを前提としています。 JavaScriptのバンドルにwebpackerを利用している CSSのバンドルにsass-railsを利用している アセットのダイジェ
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
GitHub - rails/jsbundling-rails: Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.
Use Bun, esbuild, rollup.js, or Webpack to bundle your JavaScript, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use app/assets/builds to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to .gitignore by de
Node.jsとはなにか？なぜみんな使っているのか？ - Qiita
となります。 またNode.jsの特徴として「Webサーバの役割もNode.jsがこなす」という点があります。（というかNode.jsの目的を考えるとWebサーバとしての役割がメインです） 元々Node.jsは大量の同時接続をさばけるようなネットワークアプリケーションを構築することを目的として設計されています。 そのため、Webサーバとしての機能から一貫してNode.jsが受け持ち、効率的に処理できるようになっています。 要するに通常使われるApacheやnginxのようなWebサーバの代わりにNode.jsが直接HTTPリクエストを受け取り、処理をしてくれます。 （実際にはNode.jsのみだとWebサーバとしては少し機能が物足りないので、その前段にApacheやnginxをリバースプロキシとして置く構成が多いです。） 目的3. モバイル/デスクトップ用のアプリケーションを作りたい No
Rails 7: importmap-rails gem README（翻訳）｜TechRacho by BPS株式会社
概要 MITライセンスに基づいて翻訳・公開いたします。 README: rails/importmap-rails: Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling. 原文更新日: 2024/09/06（e54fd54） ライセンス: MIT-LICENSE 原文は今後も更新される可能性があります。 gem名やコードなどでない一般的な表記については本記事では原則として「importmap」に統一しました。なおscript typeでは<script type="importmap">とスペースなしで書きます。 2021/10/07: 初版公開（f6c163e） 2022/02/25: 更新（127e7bc） 2022/06/29: 更新（055ebd3）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/iga_k/js/
Alternative Proxies:
Retool
Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル
