はてなブックマーク

Biomeとは Romeのコアメンバー達が新しく開発したツールです。 Romeはフォーマッター、リンター、テスト、トランスパイラ、バンドラなどのチェンツールを1つで担っていましたが、Biomeでは現在(2023年10/2)フォーマッターとリンターの機能のみを提供しています。 導入 Romeからの移行も簡単に出来るようです。以下の記事が参考になります インストール npm install --save-dev --save-exact @biomejs/biome or yarn add --dev --exact @biomejs/biome or pnpm add --save-dev --save-exact @biomejs/biome or bun add --dev --exact @biomejs/biome

先日、location-stateというパッケージについての記事を公開しました。 履歴に基づいて状態を復元できるReact系ライブラリで、現在はNext.jsを重点的にサポートしています。このライブラリの構成はcoreとなる部分とNext.js依存な部分を切り離しscoped packageとし、内部構成もこれに合わせていわゆるmonorepo構成で開発を行なっています。 @location-state/core: coreとなる部分 @location-state/next: Next.js依存な部分 この記事では、monorepoのパッケージ開発を快適にするために実際に採用したツールを紹介していきます。本稿で紹介するツールは以下になります。 pnpm turborepo tsup changesets Renovate pnpm まずパッケージマネージャーですが、個人的に最近はpnpm

はじめに Laravelではメンテナンスモードがあり、Artisanコマンドで簡単に切り替えることができます ここでは、メンテナンスモードの切替についてまとめました 環境 Laravel 9で確認していますが、8でも同様にメンテナンスモードの切り替えができます $ php -v PHP 8.1.8 (cli) (built: Jul 8 2022 10:58:31) (NTS) Copyright (c) The PHP Group Zend Engine v4.1.8, Copyright (c) Zend Technologies with Zend OPcache v8.1.8, Copyright (c), by Zend Technologies $ composer -V Composer version 2.3.10 2022年07月13日 15:48:23 $ php art

この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム(=stateの生存期間)による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に

TR:TL 最近、日本語のLLMが続々公開されているが、各LLMが何文字まで生成可能なのかを知りたい。 Rakudaのデータで各LLMのトークナイザーの「1トークンあたりの文字数」を調べた。 標準的な日本語特化のLLMでは2.0~2.6文字/トークン程度、一方で、GPT-4/3.50.96文字/トークン程度。 背景 最近、日本語でも使えるLLMが続々と公開されています。特に、GPT-3.5-turboやGPT-4は、8192トークンという大きい最大トークン長を誇っています。一方で、LINEのjapanese-large-lmなどの2023年時点で公開されている公開されている日本語LLMの多くは、2048トークンが最大トークン数になっている場合が多いです。額面上、LINEのLLMは、OpenAI GPT-3.5の1/4の長さのテキスしか生成できないように見えますが、それぞれのトークナイザーは

as プロパティに任意の要素を渡すことで、コンポーネントをその要素で描画することができる仕組みを用意しました。仕組みの実態はいい感じの型定義です。 <Button onClick={handleClick}>ボタン</Button> <Button as="a" href="/foo/bar">リンクボタン</Button> Button コンポーネントは普段は button 要素で描画されますが、 as="a" を渡した場合は a 要素で描画されます。また、コンポーネントの props の型定義がその要素に最適化され、 href を渡すことができるようになります。 要素以外にコンポーネントも渡すことができ、 next/link 等の独自の振る舞いが加えられたコンポーネントを使うこともできます。props も next/link に最適化されます。 サンプルプロジェクト as で拡張した様

はじめに プログラムを始めて間もない時に以下のような体験をした人は少なくないのではないでしょうか。 静的型付け言語を始める → むずい。もう嫌 → 動的型付け言語サイコー!→ いや、やっぱ静的型付け言語大事だわ 少なくとも僕はこの一人でした。 加えてこんなことも思ってる人もいるのではないでしょうか。 静的型付け言語やりたいけど、業務で使う言語は動的型付け言語での開発がメイン。かといって今使ってない Java とかをガッツリやるのもなぁ。 なんて思ってたら TypeScript が誕生。歓喜。 よく使う言語を続けつつも静的型付けを取り入れることが可能になりました。 そんなこんなで最近は TypeScript の学習を始めましたのでアウトプットとして型の定義の方法まとめです。 並走で React の学習も進めているので通常の TypeScript の型定義と React 特有の型定義を本記事で

Get started with privacy manifestsを視聴したときのメモです。詳しい情報、正確な情報は元動画を参照してください。 これまで Privacy Nutrition Labelsを見ればアプリがどのようにデータを収集して使用しているかがわかる。 また、App Tracking Transparencyを通じてユーザがトラッキングを制御できるようにしてきた。 Privacy Manifests アプリのプライバシーにはサードパーティのSDKも大いに関係してくる。サードパーティSDKがどんなプライバシー情報を収集しているかをアプリ開発者が知るのは困難なので、プライバシーマニフェストを導入した。 サードパーティSDK開発者は PrivacyInfo.xcprivacy という名前のファイルを作成して、SDK内にプライバシーマニフェストを含めることができる。 このファイル

What's new in Xcode 15を視聴したときのメモです。詳しい情報、正確な情報は元動画を参照してください。 Xcodeアプリについて 今年はiOSやvisionOSを含む全てのシミュレターをオプションにしたことでXcodeアプリのサイズが小さくなった。DeveloperサイトからXcodeをダウンロードする場合は、どのシミュレータを含めるか事前に選択できる。 編集 コード補完 例えば新規ファイルを作成し、 struct と入力すると新規ファイル名がサジェストされる。 複数のデフォルトパラメーターを含む関数を呼び出す時、キーボードの右矢印を押すと、すべてのバリエーションが表示されるようになる。 → 押下前 → 押下後 また、コード補完が賢くなっており、例えば VStack に対して修飾子を追加するために . を入力すると padding がサジェストされる。 Text に対して

前回、App Routerの遷移の仕組みと実装についてまとめました。 今回はこれの続編として、App RouterのClient-side Cacheの仕様や実装についてまとめようと思います。まだドキュメントに記載のない仕様についても言及しているので、参考になる部分があれば幸いです。 App Routerのcache分類 App Routerは積極的にcacheを取り入れており、cacheは用途や段階に応じていくつかに分類することができます。まずはそのcacheの分類を確認してみましょう。 Request Deduping Request Dedupingはレンダリングツリー内で同一データのGETリクエストを行う際に、自動でまとめてくれる機能です。 nextjs.org/docsより デフォルトでサポートしているのはfetchのみですが、Reactが提供するcacheを利用することでDBア

Next.jsのv13.4が発表され、App RouterがStableになりました。App Routerは発表以来着実に実装が進んでおり、最近もServer ActionやParallel Routesなどの新機能が次々と発表されています。 当然ながらこれらの話題はフレームワーク利用者目線の話題が多いのですが、本稿はApp Routerがどう実装されているのか、筆者の興味のままに遷移処理周りを中心に調査したまとめ記事になります。知っておくと役に立つ点もあるかと思うので、参考になれば幸いです。 Next.jsの遷移とprefetch挙動 Next.jsの遷移を理解するには、まずprefetch挙動について知る必要があります。今回は調査用のデモとして、pagesとappそれぞれで同じようなページをいくつか用意しました。 pagesで実装したページ appで実装したページ これらで従来のpag

はじめに 個人的にずっと待ちわびてた機能がついに標準搭載されました。 オブジェクトのディープコピーを行ってくれる structuredClone です。 今回はこのメソッドがどんな恩恵をもたらしてくれたのか、またできることできないことをサンプルで確認しながら解説していきます。 シャローコピーとディープコピー まずは、タイトルにも書いてるディープコピーについて理解が必要なので簡単に解説します。 対比であるシャローコピーも交えて比較しながら挙動を確認してみます。 シャローコピー シャローコピーは名前通り浅い(shallow)コピーです。具体的に JavaScript では 1 階層までコピーするという意味で使われます。 シャローコピーのやり方は以下です。 const obj = { a: "a", b: { bb: "bb", }, }; // やり方1 スプレッド構文でのコピー const

Reactと現実世界をつなぐescape hatches、そしてReact Server Components 最近、react.devがリリースされました。この新しい公式サイトは、hooks時代に適用した新たなドキュメントサイトであり、入門学習のためのドキュメントとAPIドキュメントを兼ねています。このサイトはかなり力が入ってて、見てるといろんな発見があります。 個人的には中でも、learnにあるEscape Hatchesの章に興味が惹かれました。本稿ではescape hatchesやReact Server Componentsを通してReactがデータフェッチをどう考えてきたのか、自分なりにまとめてみます。 Escape Hatches Reactは宣言的UIを実現するべく設計されており、複雑化しやすい状態管理やイベントリスナーを抽象化・制限するよう設計されています。一方で、現実の

まず、新しいアイデアが提案されると、ステージ0の「Strawman」と呼ばれる段階に入ります。ステージ0のアイデアが価値のある提案として見なされ、大まかな形で問題点や解決策を説明できるようになると、ステージ1の「Proposal」と呼ばれる段階に進みます。そして、提案がある程度まとまって仕様の草案として認められると、ステージ2の「Draft」と呼ばれる段階に上がります。さらに細かいところまで練り上げられて、仕様がほぼ完成した状態になると、ステージ3の「Candidate」の段階になります。最後に、2つ以上のブラウザがその機能を実装していて、ECMAScript の編集者に承認されると、ステージ4の「Finished」と呼ばれる段階になります。 ステージ4に上がった提案は、毎年 6 月のタイミングで ECMAScript の新しいバージョンとしてリリースされます。リリースする際は、ECMAS

はじめに プログラミング始めたての頃、JavaScript の書籍とか読んでるとこんなこと思いませんか? 「JavaScript ってループのやり方多すぎてどこで何を使えばいいかよくわからん」 かく言う僕もついこの前まではとりあえず生!のノリで forEach を乱用しまくり野郎だった頃が記憶に新しいです。 今回はそんな方に向けて状況によって適切なループ処理を選択できるようになるための、いちアプローチになればと思いこの記事を書きました。 参考になれば幸いです 🙏 ループ処理の選択基準 まず、以下 3 つの分類で扱うループを振り分けるのが良いと思います。 シンプルに配列やオブジェクトをループしたいとき ループの要素ごとに条件を設け配列を加工したいとき ループの要素ごとに真偽値を取得したいとき 3 つの大カテゴリーで分けることができましたら以下のカテゴリーからループを選択します。 シンプルに

※(注記)1 人数、期間、サポートによって変更有 導入 開発環境 OS: windows 10pro Docker windows版 導入手順 Dockerのインストール こちらからDockerHubを入手 インストール OpenProjectのインストール WindowsのPowerShell上で下記のコマンドを実装(要Gitインストール) # リポジトリのクローン git clone https://github.com/opf/openproject-deploy --depth=1 --branch=stable/11 openproject # フォルダ階層の移動 cd openproject/compose # イメージのダウンロード docker-compose pull # 起動 docker-compose up -d OpenProject機能紹介(一部) ↑OpenProje

reactでformを作る時、react-hook-formを使う方も多いと思います。react-hook-fomで実装すると、非制御コンポーネントベースなためレンダリングコストを減らすことが期待でき(実装にもよります)、また、zodとの連携によるバリデーション実装の容易さなど、実装や設計面においても多くのメリットが得られます。 一方で、チームでreact-hook-fomを使って実装を進めていくには設計的難しさを伴うことがあります。筆者は実際にform内におけるモーダルの実装で設計の見直しを迫られました。 本稿は実際に設計を見直すことで筆者が感じた、react-hook-fomの実装における設計の勘所の紹介記事になります。 2つのformの実装原則 先に結論です。react-hook-fomを使ったform実装においては以下の2つの原則を守ることが設計上重要になってきます。 form実装

1. はじめに 本記事では、異なる2つの自動微分パッケージの比較と、自動微分パッケージだけでは計算できない高階のテンソルまで計算する方法を紹介する。 Julia言語ではさまざまな自動微分のパッケージが開発されており、JuliaDiffというHPでまとめられている。いろいろあって迷ったが、よく使われているらしいZygote.jlかForwardDiff.jlで比較を行ってみることにする。比較においては、それぞれのパッケージによる自動微分の計算速度や計算精度について、数値微分や数式微分と合わせて比較することにする。 なお、本記事では、数式微分、数値微分、自動微分の定義や計算手法の詳細は割愛するため、興味があれば各自で調べてみるとよいだろう。もしそれぞれがよくわからないという場合は、まずは以下のイメージを持っておけば問題ないだろう。 数式微分:高校で学んだ微分そのもの。式が複雑だと大変。 数値微

本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま

昔、引っ越しする時の参考として、賃貸物件のいろいろな特徴が賃料にどれくらい影響を与えているのか調べたことがあります。自分以外の人にとってもそこそこ役に立つ&興味深い情報だと思うので、簡単に紹介したいと思います。 賃料は地域や最寄駅、間取り、築年数などのいろいろな要素に影響を受けていることが知られています。しかし、専門家でないとどの程度の影響があるのか感覚的に掴むのは難しいです。 平均的に LDK は DK の何倍の値段でしょうか? 駅から徒歩 1 分遠くなると値段はどれくらい下がるでしょうか? コスパの良い最寄駅はどこでしょうか? こういった質問に答えられる人はごく一部だと思います。この記事ではそのような疑問への答えを探ってみます。物件の条件を考える時に役立つ情報なので、引っ越しを考えている方はぜひご一読ください。 データソース スクレイピング 某大手不動産サイト SUUM○しろまる をスクレイピ

ChatGPTを試していて、想像以上に受け答えがしっかりしている印象を持ちました。入力と出力を音声に置き換えてアレクサのように応答できれば、音声ベースでAIと対話できるのでは?と思い、プログラムを作ってみました。 作ったもの プログラムを起動し、音声で問いかけることで音声でメッセージが返ってきます。 音声出力の方法としてボイスロイドを用いました。このツイートの例ではVOICEVOXの「春日部つむぎ」にしゃべってもらっています。 作り方 やることはシンプルで↓のような流れになります。 音声の入力を受けつけ、なるべく正確にテキストに変換する ChatGPTにそのテキストを送信し、返答を受け取る 返ってきたメッセージをVOICEVOXのメッセージ合成APIに送信し、合成後のメッセージを.wav形式で保存する プログラム内でその.wavファイルを再生する 上記の流れをループさせることで、何回でも対

この記事は Money Forward Fukuoka Advent Calendar 2022 の 24日目の記事です。 1. はじめに ふと「エディタってどう動いているんだろう?」という疑問が湧いてきました。 作ってみればいいかと思い、小さくて読みやすそうなものを探してみました。 適当にネットサーフィンをしていたところ求めていたものを見つけることができました。 これを写経すれば、エディタはどう動いているのか理解できるわけですが ただ写経するだけだと怠惰な私は脳死で手を動かすことになってしまいます。 これでは指の運動と眼精疲労を抱えるだけで終わってしまうので私の好きなRustで書き直してみました。 kiloエディタで実装されているもの全ては書ききれませんでした(そのため簡易とつけています)が、ある程度エディタっぽく動くまでの道筋を書きました。 2. Rawモードの有効化 この章では入力に

「Unreal Engine (UE) Advent Calendar 2022 その3」23日目の記事です。 はじめに OpenAIの音声認識AI「Whisper」がすごいらしい。これをUnreal Engineでリアルタイムに動かせるようにしたら応用範囲が広がっておもしろいんじゃないかと思いました。 (「異議あり!」って実際に声に出させたいよね) (NLPアドベンチャーを音声入力で、みたいな夢も広がる) しかし、いざやってみたらいろいろな課題にぶつかりました。この記事は、それらをどう解決したかの記録です。 目次 目標設定:C++とONNX Runtimeで実装する Whisperの処理の全体感 課題と対応 課題1:マイク入力と前処理をC++で実装する 課題2:Whisperの機械学習モデルをONNXにエクスポートする 課題3:ONNXモデルをtransformer&FP16向けに最適化

RecoilをReduxと同じ「グローバル状態管理ライブラリ」とまとめてしまうことに若干違和感があったので、自分なりに考えをまとめてみました。これらは何に対してグローバルなのか考えると、異なる特徴を持ったライブラリに思えるのです。 ReduxとRecoilの登場と背景 まずReduxやRecoilが登場した頃の課題感を、筆者なりにまとめてみます。 Redux Reduxの歴史は状態管理ライブラリの中では古く、2015年に初版が公開されました。ReduxはReactに依存してないので、他のViewライブラリやRedux単体でも採用可能でしたが、React・Reduxのセットは、フロントエンドに一貫した設計を設けることができるため高い人気を得ました。 筆者の主観ですが、Redux登場当時はReactの実装でバケツリレーをしないこと・複雑な状態を扱えることが多くのエンジニアの関心ごとだったように

数理最適化 Advent Calendar 2022の9日目です。 新緑の頃、新型コロナ流行の合間をぬって、ささやかな結婚披露宴を表参道の式場にて催しました。諸々の準備の中でも席次はこだわるとキリがなく、数理最適化を使って決めました。人間関係をできるだけ保つようなゲスト集合から座席集合への写像を考えます。 ゲスト間人間関係を考慮して良い感じの配席を考えたい tl;dr 披露宴をしました 知り合い関係が複雑かつ長机でゲストの席配置が難しい 組合せ爆発は本物。高々20人の配置に1週間以上悩んだ結果、数理最適化した方が早いと結論 「知り合い同士を近くに配席する」問題は非凸な二次計画になり汎用ソルバでうまく解けない ゲストを席に"輸送"すると考えて最適輸送の一種で解くとうまくいった 本質的に非凸な問題を非凸のまま、しかし性質の良い距離構造を活用するアプローチが奏功したのではないか 再現用Colab

以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー

最初に学ぶべきプログラミング言語は何か。 度々話題に挙がりますが、2022年現在なら個人的にはTypeScriptを勧めます、という話をします。 2022年ももう終わりですけども。 前提 プログラミングを勉強してみたいけど、何からやればいいかわからない、といったケースを想定した話をします すでに作りたいものが決まっている、仕事として必要になるものが決まっている、といった状況では学ぶものが決まっているでしょうから、当然ながら本記事の想定とする状況ではありません 身近に懇切丁寧に指導してくれる人がいるならば、その人に教わることのできる言語をチョイスするというのも良い戦略だと思います なぜTypeScriptか 3行で。 すぐに始められる Webアプリを作ることができる 十分にモダンで十分に枯れている 以下、それぞれの詳細です。 すぐに始められる とりあえずコードを書き始めて、動かしてみるところ

脱稿(執筆の完了・提出)は当初6末予定だったのですが、書いてるうちにどうしても間に合わず2週間ほど予定をずらさせていただきました。実は企画が通る前から少し書いてたのですが、それでもどうしても子育て・仕事・執筆の3つを成り立たせ続けるのは至難の業で、結果遅れてしまいました。 企画後、実際の執筆の流れもみてみましょう。 1. 調査・構成の検討 企画時点である程度方針や構成概要は検討済みでしたが、一番はWebアプリ開発を通じてRustを学ぶ本なので「何をどこまでどうやって作るか」を検討しました。 Rustの文法についてはどこまで解説するのか、マルチスレッドやメモリ周りに触れすぎると読者は離れてしまわないか RustのWebフレームワークはいくつもあり、どれを使うのか SQL周りのライブラリは何を使うのか フロントエンドはどうするのか。Rustのフレームワークではテンプレートエンジンを使うパターン