resolve と assetについて調べてみたのでまとめてみました。 1. $app/paths の概要$app/paths は、アプリのデプロイ先（ベースパス）がどこであっても、正しいパスを生成するためのモジュールです。これまでの base や assets といった変数による文字列結合に代わり、現在はより高機能な 関数 の使用が推奨されています。機能種類推奨される用途解決する設定resolve関数ページ遷移kit.paths.baseasset関数画像、CSS、フォントなどの静的ファイルkit.paths.assetsbase...

何を作ったか自社で開発している Formee というフォーム作成サービスの、社内向け管理ツール を作りました。AI エージェント（Codex IDE）を使い、バイブコーディングで一本作りました。https://lp.formee.me/ログイン：Firebase Auth ベースの認証各種データの管理：一覧表示、詳細表示、更新、削除共通 UI：サイドバー、パンくず、テーブル、トースト通知、モーダル、ローディング等々機能としてはごく普通の CRUD 管理画面です。ただ、「既存のコード資産をいいとこ取りして、爆速で組み上げる」 という点に全振りしました。 ...

『リーダブルコード』を読んでみて「コードは理解しやすくなければならない」という大原則のもと、意識したいポイントを自分なりに整理してまとめました。 1. コードを書くときに気をつけることコードは理解しやすくなければならない。コードは他の人が最短時間で理解できるように書かなければならない。コードは短い方が良いが、「理解するまでにかかる時間」を短くするのが最優先。 2. 表面上の改善 名前に情報を詰め込む「変数名」や「関数名」は、それ自体が説明書であるべきです。明確な単語を選ぶ汎用的な単語を、より具体的な単語に置き換える。汎用的な単語代替...

はじめにSvelteKit で開発していると, リンクをクリックしたときに遷移先の load 関数が完了するまでページが切り替わらず, もっさりした印象を受けることがあります.これは SvelteKit のデフォルトの挙動で, データ取得が完了してからページ遷移を行うためです.今回は, この問題を解消するための4つの方法を紹介します. 対策1. data-sveltekit-preload-data でホバー時に先読みリンクにホバーした時点で遷移先の load を先に実行させることで, クリック時にはデータが揃っている状態にできます.<!-- 個別のリンクに指定 ...

はじめに近年、生成AIは私たちの開発フローを根底から覆しました。AIエージェントがコードを自動生成し、テストを実行する今、私たちは「エンジニアリングとは何か」を再定義する強烈なプレッシャーに直面しています。しかも、これが一過性のバブルなどではなく、まだ「始まりに過ぎない」ということです。「AIに仕事を奪われるのでは？」という不安は、ある意味で正しいです。「言われたものを、ただ正しく作る」だけの仕事は、すでに消滅しつつあります。しかし、悲観する必要はありません。AIは、私たちの仕事を奪うのではなく、むしろ 「エンジニアリングの本質を解放する」 可能性を秘めています。こ...

はじめに株式会社Rabeeの新人エンジニア、dkichiです！この記事では実践編として、実務コードで必ず直面する undefined === null の罠から、絶対にエラーを出さない安全な判定テクニックを解説します。前回の記事では、undefined（未定義：シフトの空欄）と null（明示的な空：シフトの休み）の基本的な違いを「バイトのシフト表」に例えて解説しました。「undefined と null の概念の違いはわかった！」と思って、いざ実務のコードを書いたり読んだりしてみると、「じゃあ、実際のコードでどう判定するのが正解なの？」と手が止まってしまう新人エンジニアの方...

背景UIの細かなインタラクションやバグの挙動をSlackやGitHubに共有したいとき、.movや.mp4のままではプレビューが不便だったり、ファイルサイズが大きすぎたりすることがあります。かといって、わざわざ外部のGIF変換サイトに動画をアップロードするのは面倒ですし、開発中の機密情報をオンラインに投げるのはセキュリティ的にも避けたいところです。そこで今回は、Mac標準の「画面収録」と「Automator」、そして ffmpeg を組み合わせ、録画を止めるだけで自動的に高品質なGIFへ変換し、クリップボードに保存するワークフローを紹介します。 1. ffmpegのインスト...

はじめにAPI連携などで、コンソールログやエラーメッセージで頻繁に見かけるundefinedやnull。正直なところ、以前の私はこれらが出ても「なんとなく値が空なんだろうな」とふんわり解釈し、その違いをしっかり理解しないまま仕事をしていました。そこで今回はこの2つの違いを「バイトのシフト表」に例えて誰でもわかるように簡単にまとめました。 自己紹介はじめまして。株式会社Rabeeのフロントエンドエンジニア、dkichiです。普段の開発の中で「理解がふわっとしているな」「苦手だな」と感じた部分を、自分なりにまとめて解消していこうと思います！ 結論バイトのシフトで例える...

はじめに世の中の「未経験エンジニア挑戦記」の多くは、もともと数学が得意だったり、論理的思考の化身のような人たちが書いています。しかし、私は違います。「ロジックを組む」その言葉の響きだけで、私の脳のブレーカーが落ちます。この記事では、できる人には一生理解できないであろう「プログラミングが全くできない人の脳内パニック」を可視化してみます。できる人が読めば「そんなところで詰まるの？」と驚き、できない人が読めば「私だけじゃなかった」と共感してもらえたら嬉しいです。 自己紹介はじめまして。株式会社Rabeeに入社3ヶ月目の駆け出しエンジニア、shellyです。文系出身で、プログ...

先に結論!コメントは「コードを日本語に翻訳する場所」ではなく、コードだけでは伝わらない 意図・前提・制約 を残す場所です。自分もやりがちなので反省と備忘録も込めて、「コードだけでは伝わらない背景を書く」 という基準で、コメントの良い例と悪い例をまとめました。3か月後の自分は、だいたい他人です。未来の他人に向けて、手がかりを置いていきましょう。 AIが活発な時代だからこそ、背景コメントが大事今はAIがかなり実装を読める時代です。なので「何をやっているか」はAIでも分かるし、コードを読めばだいたい分かります。でも、AIにも分からないことがあります。なぜこの仕様...

なぜ「答え」だけでは足りないのか「以前、教わったはずなのに、また同じ質問をしてしまった......」そんな経験はありませんか？例えるなら、お腹が空いているときに「魚」をもらうようなものです。その時は満たされますが、明日にはまた誰かに魚をもらわなければなりません。次に同じ問題で困らないために、「魚の獲り方」を自分のものにしましょう。 「何をしたか」より「なぜそうしたか」を聞く先輩の時間は限られています。だからこそ、時間を使って 「再現性のある知恵」 を吸収しましょう。例えば、以下の様な質問ができると良いです。「なぜそのキーワードで検索したんですか？」「なぜその...

この記事で解決できることCodexでAIは学習データの時点が古いと、最新の公式ドキュメントとズレたコードを出してしまうことがあります。この記事では、そうした「バージョン差によるズレ」を、公式ドキュメントの注入で補正する方法を説明します。例えば、Svelte 4の$:構文（legacy）を出しがちです。一方、runesモードでは$derivedや$effectが基本なので、生成コードが古くなると「修正コスト」が地味に積み上がります。※弊社ではSvelteを使用しているので、Svelte 5のrunesを例に説明しています。 変更前（AIが出しがち）<script...

はじめに本記事では、Codexを使ってPlaywrightをセットアップし、最初のテストまでの最短手順をまとめています。時間がない人でも「Codexに頼む → 承認を“はい”で進める」で進められる流れにしています。 PlaywrightとはPlaywrightは、ブラウザ操作を自動化してE2Eテストや画面検証を行うためのツールです。実ブラウザでの動作確認を自動化できるため、UIの回帰テストやスクショ比較にも向いています。https://playwright.dev/ 用意するもの前提として今回はCodex IDE拡張でセットアップしています。Node.jsが使...

はじめにこの記事では、Promiseやasync/awaitを使った非同期処理を、カフェラテ作りで説明します。Promiseやasync/awaitは難しく見えますが「おつかいを頼んで戻るのを待つ」だけです。目的はお父さんにカフェラテを作ってあげること。そのために牛乳が必要なので、お母さんは息子におつかいを頼み、メモを渡します。登場人物は息子・お母さん・お父さんの三人で、コーヒーは用意済みという設定です。👦 息子に牛乳のお使いを頼む👩 牛乳が届いたらカフェラテをつくる👨 お父さんにカフェラテを作ってあげる 対象読者Promise / async / awa...

背景実務でAIにコードレビューを依頼すると、role="button"やaria-label="閉じる"といった属性をよく指摘されます。「実装上エラーは出ていないし、画面上は動いているからいいや」ではなく、なぜこれらが必要なのか、その理由を正しく理解するためにまとめてみました。 アクセシビリティ（A11y）とは「アクセシビリティ（Accessibility）」という言葉は、Access（アクセス）とAbility（能力・できること）を組み合わせた言葉です。よくa11y と省略されていますが、これは「A」から「y」の間の11文字のことを指しています。Webアクセシビリティ...

まえがきもともとManifest v2で開発していたものがあり、v3にアップデートするのが面倒で放置していたらついに使えなくなってしまいやむを得ずアップデートすることにしました。その時、基本的には マイグレーションガイド の通りにやって動いたのですが、 chrome.tabs.executeScript で対象のタブに文字列でjsを実行している部分だけうまく実行することができませんでした。 コードの例 v2 のコードもともとこんな感じだったものをchrome.tabs.executeScript(tabId, { code: "ユーザーが設定した文字列で書かれた...

まえがきなんのJSフレームワークも使っていない純粋な HTML, CSS, JS で構成されたプロジェクトに、リッチな機能を組み込みたい！みたいなときありますよね。そういうときにSvelteで実装するための備忘録です。ただSvelteが書きたいだけで細かい設定とかに頭使いたくないですよね。 下準備 セットアップコマンドを実行してセットアップする公式に書いてある通りにセットアップします。https://svelte.jp/docs/kit/creating-a-projectnpx sv create my-appmy-app のところは自由に変更しても良い。省...

はじめにJavaScriptの日付操作ライブラリであるDay.jsは、その軽量さと使いやすさで人気です。しかし、日付のバリデーションにおいては、Moment.jsとは異なる挙動を示します。この記事では、Day.jsを使用して不正な日付を検出する方法について解説します。 Day.jsとMoment.jsの違いDay.jsとMoment.jsはどちらもJavaScriptで使用される日付操作ライブラリですが、isValid関数における挙動に大きな違いがあります。Moment.jsでは、isValid関数は日付の存在をチェックしますが、Day.jsでは単にフォーマットの可能性を判断...

はじめにWeb開発を行っていると、URLのクエリパラメータを取得し、それをJavaScriptのオブジェクトに変換することがよくあります。この記事では、その手順を詳しく説明します。 URLSearchParamsを使用してクエリパラメータをオブジェクトへ変換する例まず、URLのクエリパラメータを解析するために、URLSearchParamsという組み込みのJavaScriptクラスを使用します。このクラスは、URLのクエリパラメータを操作するための便利なメソッドを提供します。以下は、URLSearchParamsを使用してクエリパラメータを解析する例です// ダミーのクエ...

GithubのコメントのAdd single commentをするショートカットGithubのレビューコメントには下記の二種類があると思います。Add single commentの方もショートカットでできたのでメモがてら記事に残しておきます。Add single comment (command + shift + enter) ← 今回start a review (command + enter) まとめカーソルでクリックするのが面倒だったので見つけれてよかったです。