はじめに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) まとめカーソルでクリックするのが面倒だったので見つけれてよかったです。

始めにJavaScriptではオブジェクトの分割代入を利用すると、オブジェクトから特定のプロパティを取り出し、それらを個別の変数に代入することができます。オブジェクトの場合、分割代入はオブジェクトのプロパティ名に基づいて行われます。 分割代入の例 オブジェクトの分割代入{ contents: { users: { name: 'takashi', age: 20, }, animals: { name: 'lion', age: 10, }, }};分割代入によって受け取るとl...

はじめにメール送信に際し、送信先のアドレスが間違っている場合や、何らかの理由でメールが相手に届かなかった場合、それは「バウンス（bounce）」と呼ばれます。この記事では、Google Apps Script (GAS) を利用して、バウンスしたメールを自動的に検知する方法後ご紹介します。下記の関数では送信失敗を検知できないため、GmailApp.searchを使用してメールボックスから検索する方法で実装しました。GmailApp.sendEmail(email, subject, message); バウンスメールのチェック処理以下のコードはGASを使用したバウンスメー...

XPathとは？XPath（XML Path Language）とは、XML文書内の要素や属性を選択するための言語です。階層的なパス表現を用いてXML文書内の位置を表現し、特定の要素や属性を指定して抽出したり、特定のパターンに一致するノードを検索したりします。XPathの基本的な構文は、ファイルシステムのディレクトリ構造をナビゲートする方法に似ています。この記事では、その基本的な使い方をいくつか紹介します。 タグ（要素）で指定する場合タグ（要素）を指定して情報を抽出する方法を見ていきましょう。例えば、以下のようなHTML文書があります。<div> <a...