GitHub Packagesでプライベートnpmパッケージを公開する - くらげになりたい。
Nuxt.jsを使って開発してるけど、 よく使う処理やUIコンポーネントをライブラリ化したい。。 とはいえ、公開できるレベルまで作り込む感じでもないので、 npmjs.comに公開するのは気が引ける。。 GitHub Packagesを使えば、非公開パッケージを用意できるっぽいので、 試してみたときの備忘録(*´ω｀*) github.co.jp パッケージを公開する package.jsonの設定 { "name": "@<OWNER>/<REPO>", "version": "0.0.1", "description": "private npm package sample", "main": "dist/index.js", "types": "dist/index.d.js", "publishConfig": { "access": "restricted", "registr
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
Gio.jsを使って地球儀を表示してみた話
はじめに 前々から気になっていたGio.jsを使ってみました。 技術記事というよりは感想やメモの記事になります。 Gio.jsとは Gio.jsは、Three.jsで構築されたWeb3Dグローブデータ視覚化用のオープンソースライブラリです。Gio.jsの違いは、Gio.jsを使用して、宣言的な方法で3Dデータ視覚化モデルをカスタマイズし、独自のデータを追加して、それを独自の最新のWebアプリケーションに統合するのが簡単なことです。 (Gio.js READMEの翻訳を引用) 文章だとイメージが掴みづらいですが、要するに地球儀の3Dモデルを表示できます。 またデータを登録することでデータを地球儀上で可視化できるので、以下画像のような地球儀の表示ができます。 Gio.jsの特徴 Gio.jsは以下の3点を特徴として挙げています。 ①導入のシンプル性 最低4行のJavaScriptコードで3Dの
Vitestを使った型テストの始め方
WeJS @ 42nd https://wajs.connpass.com/event/293440/
TypedArray のサイズが可変になる ES2024 Resizable ArrayBuffers
今までの ArrayBuffer の問題 今まで JavaScript の ArrayBuffer はサイズが変わることを想定していませんでした。そのためサイズを変える必要がある API の仕様を作るとなると ECMAScript サイドではなく、その API サイドでの対応が必要な状況になっていました。 例えば WebAssembly.Memory を見てみましょう。 [LegacyNamespace=WebAssembly, Exposed=(Window,Worker,Worklet)] interface Memory { constructor(MemoryDescriptor descriptor); unsigned long grow([EnforceRange] unsigned long delta); readonly attribute ArrayBuffer bu
npm パッケージが独立して管理されているモノレポ環境に npm workspaces を導入する | DevelopersIO
こんにちは、製造ビジネステクノロジー部の若槻です。 npm workspacesを導入することで、モノレポ環境において npm パッケージを効率的に管理することが可能となります。 今回は、npm パッケージが独立して管理されているモノレポ環境に npm workspaces を導入する機会があったので、その手順をまとめてみました。 手順 導入前の環境 backendおよびfrontendの 2 つの各サブリポジトリで npm パッケージが独立して管理されており、package-lock.jsonおよびnode_modulesがそれぞれ存在しているという環境です。 $ tree -L 3 . └── packages ├── backend │ ├── index.js │ ├── node_modules │ ├── package-lock.json │ └── package.json
JSON.parseはなぜanyを返すのか
はじめに TypeScriptを始めた頃からanyは悪だと教わってきましたが、それなのになぜanyを返すんだ！？ なぜJSON.parseがanyを返すのか気になったので、原因を調べたり推測しました。 anyを使うのは本当に適切？ なぜanyを返すかを調査する前に、TypeScriptのanyとunknownについておさらいしましょう。 any どのような値でも代入を許す型、コンパイラーが型チェックを行わない型 私は後者の意味が重要だと考えています。 unknown TypeScript 3.0から導入された対象の値の型が何かわからないときに使用する型 unknownの値を絞り込むことによって型安全に使用することができます。 kyのresponse.json 少し話が逸れてしまいますが、ここでkyというFetchをより使いやすくしたライブラリの話をします。 kyでは、レスポンスのコンテンツ
JavaScriptにSchemeを実装する - Qiita
この記事は完成していません 更にコードに誤りがあったりして修正されていなかったりするので、一度整理されるまで落とすかもしれません この記事の内容 プログラマが美しい言語を求めて最終的にたどり着く言語、LISP。 プログラミング言語を作るということは、難しいと思われがちですが、実際のところ読み取った文字列を解釈するプログラムを作成するだけで独自の言語を作ることができます。 ただし、プログラミング言語として利便性を実用レベルまで持っていくのは通常、容易ではありません。しかし、Schemeであれば比較的実装が簡単かつ高度な言語を作ることができます。 Schemeはシンプルさとパワフルさの両方を兼ね備えたLISP方言の言語であり、ミニマルな仕様から世界で最も実装される言語です。今回はそんなSchemeをJavaScriptに実装します！ 最終的な目標は、ブラウザにCUIを表示して対話形式でSche
【統計学】MCMC サンプリングを JavaScript によるアニメーションで実装しながら理解する - Qiita
Summary JavaScript(TypeScript) で MCMC ・メトロポリス・ヘイスティング法を実装して解説してみる記事です。 概ね こちらの記事 の JavaScript 実装版です。 この節の内容を実感するために一番良い方法は、どんな計算機言語でもいいから、 ここで述べたことを白紙から実装してみることである。 という訳で実際にやってみました。 手元でアニメーションで動いてくれるものが出来て理解が深まりました 😉👌 作ったもの まずは 成果物 をご覧ください。 最初の50回を Burn-in 期間として、棄却含め250回までのサンプリングを散布図にプロットしています。 薄い灰色でプロットされているのは Burn-in 期間です。受容されたサンプルは青い丸印で、棄却されたサンプルは赤いバツ印でプロットしています。 画面の下半分には、受容されたサンプルだけ使ってトレースライ
VSCodeのExtensionをMarketPlaceにリリースする方法 - Qiita
VSCodeのExtensionを作成したら(こちらの記事参照)、次のステップはMarketPlaceにリリースですね。リリースまでの対応についてまとめたので参考にしてください。 VS Codeの拡張機能をマーケットプレイスにリリースするには、以下の手順で行いました。これには、拡張機能のパッケージ化、Visual Studio Code Publisherの設定、拡張機能の公開などが含まれます。 転載元 当記事は以下ブログからの転載です。 TECH BACK Azure DevOpsアカウントの作成とPublisherの登録 アカウント作成 azure.microsoft.com にアクセスしてアカウントを作成します。 このウインドウはそのままContinueでOK この画面まで来たらアカウントの作成はできています。 そのままプロジェクトを作成してしまいましょう。 プロジェクト作成 適当な
JSON SchemaのanyOfをTypeScriptの型で表現する - Qiita
type AnyOf<T extends any[]> = T extends [infer A, ...infer B] ? A | AnyOf<B> | (A & AnyOf<B>) : never; JSON Schema とは JSON Schema というものを聞いたことがあるでしょうか。 詳細は https://json-schema.org/ を読んでいただければと思いますが、簡単に説明すると JSON をバリデーションする (または 型をつける)もので身近なところでは OpenAPI などのレスポンス型定義などに用いられます。 他にも各種設定ファイルで JSON や YAML を書くときにテキストエディタ上で補完が効くものは内部的に JSON Schema が使われていることがほとんどだと思います。 例: { "type": "object", "properties":
CodeceptJSにトライしてみた。 - Qiita
最初に 本記事はGitHub: GOAMI-Takaaki/codeceptjs-hotel-planisphereの転記になります。 概要 自動化練習サイト「HOTEL PLANISPHERE」を対象に、Gherkin記法のテストを、CodeceptJS で実装したサンプルコードを紹介します。 対象 サービス HOTEL PLANISPHERE - 自動化練習サイト シナリオ testplanisphere/hotel-example-webdriverio-ja 構成 自動化フレームワーク CodeceptJS + Playwright プログラミング言語 TypeScript テスト記法 Gherkin 環境 ライブラリ Node.js OS WSLg + Ubuntu 22.04.2 LTS 基本 CodeceptJS とは E2Eテストフレームワークである。 Node.jsプロジ
ruby.wasmでRubyからJavaScriptのメソッドを呼び出すしくみ - Qiita
documentのクラスはJS::Objectです。 Rubyではmethod_missingという仕組みがあります。 呼びだされたメソッドが定義されていなかった時、Rubyインタプリタがこのメソッドを呼び出します。 JS.global[:document].querySelectorを呼び出したとき、JS::Object#querySelectorメソッドは定義されていません。 JS::Object#method_missisgメソッドが呼び出されます。 JS::Object#method_missisgメソッド JS::Object#method_missisgメソッドの実装を見てみましょう。 ソースコードは https://github.com/ruby/ruby.wasm/blob/d0e144577f4a947638e9a0d354e12716f10c24a0/ext/js/li
WebAssemblyを利用してJavaScriptアプリケーションのパフォーマンスを向上させる方法 - Qiita
ウェブアプリケーションのパフォーマンス向上は、ユーザーエクスペリエンスの向上に直結します。そこで、本記事ではWebAssemblyを使用してJavaScriptアプリケーションの実行速度を向上させる方法を紹介します。 1. WebAssemblyとは WebAssembly（通称Wasm）は、ウェブで高速な実行を実現するためコードです。。これは、ウェブブラウザ内で実行できる低レベルのバイナリフォーマットであり、JavaScriptの補完として設計されています。WebAssemblyの主な目的は、ウェブでの高性能なアプリケーションの実現を支援することです。これにより、C、C++、Rust、Goなどの言語で書かれたプログラムをウェブアプリケーションで直接実行することが可能になります。 Amazon Prime Videoで動画再生にWebAssemblyを採用されている実例があるようです。 2
Hono[炎]っていうイケてる名前のフレームワークを作っている
Cloudflare Workersは「CDNのエッジで動く」という特徴だけでなく「サーバーレス」の環境としても非常に優秀です。プロジェクトの作成からデプロイまで「4ステップ」で出来ます。 自動的に {project-name}.{user-name}.workers.dev といったURLを発行してくれて、すぐさま公開されます。この手軽さとスピード感はヤバい。スクリプトのサイズが1MB以内、使えるAPIが極端に限られているなど制約がありますが、それはそれで単一機能のシンプルなアプリケーションを作る気にさせてくれます。 さて、このCloudflare WokersでWebアプリを作っていたのですが、だんだんとCloudflare Workersに特化した「Webアプリを作るためのフレームワーク」を作りたくなってきました。手段の目的化です。ということで作り始めました。「Hono[炎]」という
![Hono[炎]っていうイケてる名前のフレームワークを作っている](https://cdn-ak-scissors.b.st-hatena.com/image/square/eaca1c6dcc954189f470035c2c3b14c4b1aef959/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--y8Q1KJtg--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHono%25255B%2525E7%252582%25258E%25255D%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%252586%2525E3%252582%2525A4%2525E3%252582%2525B1%2525E3%252581%2525A6%2525E3%252582%25258B%2525E5%252590%25258D%2525E5%252589%25258D%2525E3%252581%2525AE%2525E3%252583%252595%2525E3%252583%2525AC%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252583%2525AF%2525E3%252583%2525BC%2525E3%252582%2525AF%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ayusukebe%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pIMWY1VlpnSFMwLUJwekhzZjRGYXN0R1ZYTlpfZFh1U2pwdWNMNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
kuromoji.js + UniDic で形態素解析（辞書のビルド） - Qiita
UniDic の matrix.def のサイズが間違っていたので修正しました: 59G → 5.9G kuromoji.js （日本語形態素解析器 Kuromoji の JavaScript実装）と React でブラウザアプリを作っています。kuromoji.js はデフォルトでは IPADic (mecab-ipadic-20070801) を利用していますが、IPADic は現時点では更新が止まっており、辞書は新しいのがよい…… ということで、今回は UniDic 最新版（unidic-cwj-202302）を kuromoji.js 用にビルドして使ってみることにしました。 結果として、ブラウザアプリで UniDic 最新版を使って形態素解析を動かすことができました。 ただし、UniDic は IPADic に比べてデータ量が多いことに注意が必要です。パソコンのブラウザ（自分の
Rust製JavaScriptエンジン『Boa JS』を試してみた
主要なJavaScriptエンジンのTest262を毎日実行して結果を載せているtest262.fyiというサイトがあります。 （Test262とは最新のECMAScriptを実装できているかどうかのテストです。） このサイトの、2024/6/5現在の実装率ランキングはこちらです。 test262.fyiの画面キャプチャ（2024/6/5） V8(ChromeやNode.js、Deno等)、JavaScriptCore（SafariやBun等）、SpiderMonkey（Firefox等）という、大手エンジンとほぼ横並びで4位に食い込んでいるBoaとは何者でしょうか。 Boaは公式曰く『Rustで書かれた実験的なJavascriptのレキサー、パーサー、コンパイラー』です。これだけ揃えば、JavaScriptエンジンと言って差し支えないと思います。RustアプリケーションにJavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsを用いて数万の農地データ情報を数秒で表示させるまでのカイゼンの軌跡
【JavaScript】ここがしんどかったよTauri開発【Rust】 - Qiita
