[B! js] iga_kのブックマーク

実録レガシーコード改善 / Working with Legacy Code: the True Record

2024/01/15(月) 12:00 〜 13:00 t-wadaさんが後世に残したい、実録レガシーコード改善 https://findy.connpass.com/event/304101/ テストコードが無いコードを引き継いだところからはじまる、実際に2018年に行った受託開発案件のエピソードとコードをプロダクトオーナー（引き継ぎ前のコードを書いた本人）の許可を得て使用しています。登場するコードは全て本物、登場するデータは講演用の架空のものです。

iga_k 2024/01/16

リンク

npm ciのキャッシュ方式の検討

結論から言うと、node_modulesをキャッシュしてnpmciの実行を省略するのが、多くの場合には有効そうです。はじめにCIでnpmciを使うとき、実行時間短縮のためにキャッシュの利用を検討することになると思います。このとき、どのようにキャッシュするのが良いのでしょうか？よく知られているキャッシュ方式として、以下の二通りの方式があります。 ~/.npmをキャッシュする方式 node_modulesをキャッシュする方式それぞれの違いについて、詳しく見てみましょう。 ~/.npmをキャッシュする方式npmciを実行すると、POSIX系のOSではデフォルトで ~/.npm にキャッシュデータが書き込まれます。package-lock.json をキーにこのディレクトリをキャッシュしておくことで、次回以降のnpmci実行時にこのキャッシュデータを利用しよう、というの

iga_k 2023/12/16

js

リンク

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

iga_k 2023/10/20

リンク

Language Server Protocol に対応したミニ言語処理系を作る

自作プログラミング言語でコード補完やタグジャンプをしたり、ソースコードに色をつけたりする。

iga_k 2023/07/28

参考になる

リンク

モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ

こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。先日、社内で﹁モダンウェブフロントエンド勉強会﹂と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発事情について話をしました。せっかくなのでその内容の共有と、勉強会を開催した動機などを紹介したいと思います。この話は fukabori.fm でも取り上げていただいてお話ししたので、よければそちらもご視聴ください。 fukabori.fm 背景・動機クックパッドのウェブアプリケーションは10年以上もの間 RubyonRails で開発されてきましたが、2020年から一部のページは Next.

iga_k 2023/07/18

リンク

Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル

プライベートで、 Nuxt.js × Rails のアプリケーションを開発し、AWS Fargate にデプロイしました。そこで得た知見・学びを output し更に理解を深める & 備忘録として残しておこうと思い、この本を執筆しました！

iga_k 2023/06/25

リンク

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

iga_k 2023/06/13

リンク

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

iga_k 2023/03/25

勉強になる

リンク

Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート

※この記事では﹁新しくRails7アプリを作成するときのこと﹂を想定していますが、Rails6を7に上げるときにもそれなりに役立つ情報だと思います！結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。型チェックや構文チェックを導入するには少し注意が必要。概要現在、Rails7を使ってフロントエンドを構築する方法には、大きく分けて3種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作るesbuildを使って、JSXファイルを使ってフロントエンドを作る Rails7をAPIモードにして、フロントエンドはNextjsで作る自分はこの2番めの﹁esbuildを使ってフロントエンドを作る﹂を選択しました。理由は、Railsのslim上

iga_k 2023/02/21

いろんな道具があって勉強になる

リンク

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>

iga_k 2022/10/31

リンク

大量塩基配列登録申請システムができるまで

Helping Users Find Their Own Way: Creating Modern Search Experiences

iga_k 2022/10/21

ursmさんの講演資料。jsで10GBファイルを非同期パースしてアップロードすごい。

リンク

XMLHttpRequest とはなんだったのか | blog.jxck.io

Intro FetchAPI の実装が広まり、IEもリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まりこの名前は非常に長いため、通常 XHR と略される。この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命

iga_k 2022/10/02

リンク

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 より前に対応予定

iga_k 2022/09/16

js
esbuild

リンク

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万行を超えるかなり大規模なプロジェクトで、Webpack4をesbuildに移行する作業を担当しました。私たちのRails プロジェクトではJavaScriptスタックをメインアプリケーションに統合するのにWebpackerを使っていました。ここ数か月はもっぱら長時間のビルドと格闘し続け、さらにWebpackerが推奨ライブラリでなくなったこ

iga_k 2022/09/16

リンク

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とcss bundling-rails gemも利用する必要があります。本ガイドでは、プロジェクトがRails 6.1以後の以下の規約に沿っていることを前提としています。 JavaScriptのバンドルにwebpackerを利用している CSSのバンドルにsass-railsを利用しているアセットのダイジェ

iga_k 2022/08/19

リンク

Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails

︵自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇‍♂️︶こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ良かった点サーバーサイドに集中できる Railsの資産をフルに活かせる後付けで段階的にSPA風の挙動を追加できる学習コストが低い開発コストが低い WebSocketは必須ではない辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違うHe

iga_k 2022/05/17

shita さんの良いまとめ！

リンク

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

iga_k 2022/04/14

wepackerの後継者

リンク

Node.jsとはなにか？なぜみんな使っているのか？ - Qiita

この記事は「JavaScriptの勉強してたらみんなNode.jsの存在を前提に話が進む。でもNode.jsってWebサーバじゃないの？なんでインストールしなきゃいけないの？なんでみんな使ってるの？」といった疑問を解消することを目的としています。基礎：JavaScriptの特徴まずはJavaScriptと他のプログラミング言語の違いを知っておく必要があるので解説します。 JavaScriptはChromeやFirefoxといった「ブラウザ上」で動作するプログラミング言語です。対してPythonやRubyのような一般的なプログラミング言語は通常「パソコン上」で動作します。1 このことが生み出す違いは、OSの機能にアクセスできるかどうかです。「OSの機能」とは例えばファイルの読み書きや、ネットワーク通信などの機能のことです。パソコン上で動作するアプリケーション（Pythonや

iga_k 2021/12/28

js
nodejs

リンク

Rails 7: importmap-rails gem README（翻訳）｜TechRacho by BPS株式会社

概要MITライセンスに基づいて翻訳・公開いたします。 README: rails/importmap-rails: Use ESM with importmap to manage modern JavaScriptinRailswithout transpiling or bundling. 原文更新日: 2024/03/04︵f2779ee︶ライセンス: MIT-LICENSE 原文は今後も更新される可能性があります。gem名やコードなどでない一般的な表記については本記事では原則として﹁importmap﹂に統一しました。なおscript typeでは<script type="importmap">とスペースなしで書きます。 2021/10/07: 初版公開︵f6c163e︶ 2022/02/25: 更新︵127e7bc︶ 2022/06/29: 更新︵055ebd3︶

iga_k 2021/12/17

リンク

カレンダー作ってVue.jsの復習 - Hit the books!!

これはフィヨルドブートキャンプ Part 1 Advent Calendar 202110日目の記事です。 part2もあります。昨日はいっしーさんの﹁達人プログラマー輪読会をはじめた話 - Leap of faITh﹂という記事でした。輪読会したい、めっちゃしたい。はじめにしばらくブログを更新していない間、フィヨルドブートキャンプでの勉強もついに﹁Webサービスを作って公開する﹂ところまできました。去年のアドカレに2021年の目標は卒業&就職とか書いたけど何も達成できてないので、もうそういうの書くのはやーめた。今日はライブラリなどを使わずにカレンダーを表示させることによって、苦手なJavaScriptとVue.jsの復習をしたいと思います。なるべく丁寧に書くようにします。はじめにやりたいこと実装準備参考今の年月を取得する参考今月のカレンダーを表示させる前の月、

iga_k 2021/12/10

手順を追って書いてあるのでjs苦手な私でも読めた！勉強になる。

fjord
js

リンク

はてなブックマーク

タグ

関連タグで絞り込む (74)

jsに関するiga_kのブックマーク (122)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス