背景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...

はじめに画像は比較的容量が重く、描画までに時間がかかることが多々あります。画像が表示されるまでのその空間を補うだけでだいぶUXが良くなることがあるのですが、画像の読み込みも容量によってまちまちなので結構管理も面倒な時があります。いくつか読み込みのステータスをチェックする方法があるのですが、今回はimageのloadイベントに関してとその注意点についてまとめてみました。 loadイベントとは？imageのloadイベントは、その画像の読み込みが完了したタイミングに発生するイベントになります。読み込み中にダミーイメージやインジケーターを表示する際の、出し分けをloadイベン...

目的ファイルサイズが0のファイルをアップロードされないようにする選択したファイルを、削除、移動、リネームした場合にエラーメッセージを出すファイルアップロード処理をライブラリなどに任せていると、自動でリトライ処理をしてくれていたりして、上記の状況で無限リトライになってしまったりします。そうなる前に、事前にチェックするのがこの記事の目的です。 方法FileReader を使用して、ファイルが読み込めるかチェックします。FileReader で読み込む前に file.size をチェックして、 0 ならエラーにするonerror が起きた場合は、 reject ...

はじめにhover した要素以外の子要素や兄弟要素を変化させる方法について解説したいと思います。 hover時の要素変更方法今回は下記の3つのパターンを紹介します。hoverした要素の子要素を変化させたい場合hoverした要素の兄弟要素を変更させたい場合hoverした要素の『全ての兄弟要素』の値を変更 hoverした要素の子要素を変化させたい場合hoverした要素の子要素を変化させたい場合は下記のように css を指定します。 適用方法hoverする要素(親要素):hover 変化させたい要素(子要素) { 子要素に当てたいスタイル}/*css*...