はじめに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*...

始めにWebサイトのメタ情報は、検索エンジン最適化（SEO）やコンテンツの概要把握に非常に重要な役割を果たしています。メタ情報を抽出することで、競合サイトのSEO戦略や、特定のキーワードをターゲットにしたコンテンツの分析が可能になります。しかし、多くのWebページからメタ情報を効率的に収集・整理するには、適切なツールや技術が必要です。この記事では、Googleスプレッドシートを使用してWebサイトのメタ情報を抽出する方法を解説します。 メタ情報の抽出方法例としてトヨタ自動車のHPのメタ情報を抽出してみたいと思います。Webサイトのメタ情報のタイトルを抽出する際は以下のように...

はじめにローカル開発環境で様々なサービスを同時に実行すると、ポート番号の競合が起きることがよくあります。特に localhost:8080 は、非常によく使用されるポート番号です。そして、あるプロジェクトで作業をした後、別のプロジェクトに移るときなど、そのポートがすでに占有されていると困ることがあります。一般的には以下のコマンドを実行して、占有されているポートを解放します。lsof -i :8080 で ポート8080を占有しているプロセスのプロセスIDを探すkill -9 [プロセスID] で 該当のプロセスを killただ、毎回これを行うのは手間ですよね。そこで...

はじめにWEBアプリ開発において、さまざまな端末で利用できるようにレスポンシブ対応するのは当たり前になっていますよね画面へのタッチやスワイプ等の直感的なインタラクションに合わせた機能は、主にpc表示の時は無効状態にすることが多々あります。そんな中で、無条件でPCとして扱われてしまうタッチ対応デバイスにフォーカスを合わせて、より便利なアプリを目指そう！というお話です。 タッチ対応デバイスとは？タッチ対応デバイスとは、画面へのタッチを認識可能なデバイスを指します。たとえば、画面タッチ対応のノートPCやディスプレイモニターなどが挙げられますね。特に画面タッチが可能なノートPCは...

はじめにMath を使って数値計算する方法を例と解説を交えて、備忘録がてらにまとめてみようと思います。 Math について以下 MDN より参照Math は、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクトです。関数オブジェクトではありません。 Mathメソッドの解説具体的にどのようなメソッドがあるか紹介していきます。 小数点以下を四捨五入/切り上げ/切り捨てする Math.round, Math.ceil, Math.floorMath.round で四捨五入、Math.ceil で切り上げ、Math.floor で切り捨てが...

はじめにVSCodeとGitHubはエンジニアの開発作業にとって必要不可欠ですよね。VSCodeで作業しているコードの特定の部分のGitHubリンクを共有したいときにはどうすればいいでしょうか。VSCodeにはさまざまな便利な拡張機能があり、その中にはコードの該当箇所のGitHubリンクをコピーする機能を提供するものもあります。この記事ではその方法について詳しく説明します。 必要な拡張機能まず必要なのは、VSCodeの拡張機能です。VSCodeのマーケットプレイスから「GitHub Pull Requests and Issues」インストールします。「GitHub P...

方法※長くなってしまうため child_process や spawn についての説明は省きます。結論として、 spawn の第三引数に { shell: true, stdio: 'inherit' } を入れるとできます。shell: true で OS によってうまく処理をしてくれるらしいです。require('child_process').spawn('コマンド', [], { shell: true, stdio: 'inherit' }); stdout.on('data') では、何がダメなのか？↓こういう書き方では何がダメか？const log...

初めにSEO対策の一環としてUser-AgentがGooglebot(bot)の場合に特定の処理を行わないようにする実装を行いました。その際の動作検証で、Google ChromeのデベロッパーツールでUser-AgentをGooglebot(bot)に偽装する方法を知ったのでその方法を紹介します。 User-Agentとはユーザーエージェント（User-Agent）とは、インターネットを閲覧しているユーザーの、デバイス・OS・ブラウザなどの情報のことです。一般的なインターネットブラウザを使い、HTTPに基づきサイトなどにアクセスした際には、ユーザーエージェントに関する各種情...

始めに今回は決済プラットフォームとして有名な Stripe の導入方法とダッシュボードから設定できることを紹介します。Stripe にはテスト環境と本番環境があり、この記事ではテスト環境での検証方法を紹介します。その他に自分の備忘録として、api やテスト環境注意点、できることを雑多に書いていこうと思います。使用言語は Javascript で、簡易的にテストを行うためフロントにサーバー側のコードも記述しています。Stripe テスト環境の作成と検証方法Stripeの公式ウェブサイト にアクセスし、「Start now」ボタンをクリックしてアカウント作成ページに移...

目的スタックオーバーフロー (js だと Maximum call stack size exceeded) を回避するため関数定義が面倒な言語でわざわざ関数を定義したくない2はそこまで重要ではなく、主に1を解決することが目的です。https://algo-logic.info/dfs/https://algo-logic.info/bfs/https://algo-logic.info/brute-force-dfs/↑こちらの記事を参考に AtCoder ABC114 C - 755 の問題を例に書きます。 アルゴリズムの説明問題文を要約すると入力: ...

はじめにGithubで素早く、リポジトリを切り替える方法を紹介します！⌘ + Kでコマンドパレットを開く方法などもあるのですが、一番楽だと感じた方法を本記事でご説明します。 ショートカットキー非常にシンプルなんですが...サーチバーがあるページで / or Sを押すと、下記のような感じでサーチバーにフォーカスします別タブで開きたい場合サーチバーから移動したいリポジトリを選択状態で、⌘ + enterを押すと別タブで開きます(自分はこっちをよく使います)現在いるタブで開きたい場合そのままクリック or enterで今いるタブで開きます 最後に早いですが、...

はじめに実装したものをiPhoneで確認するときに、webインスペクタを開いてconsoleでログを確認することがあると思います。しかし、iPhoneでwebインスペクタを開いてもconsoleでログが表示されないことがありました。調べてもなかなか答えは見つからなかったのですが、確認できる方法があったのでご紹介します。自分もまだ原因はわかっておらず、iosのバージョンとmacのバージョンの組み合わせで発生するバグかもなので、再現した時はこれから紹介する方法で確認してみてください。アップデート入れば治るかもしれないので、メモ程度に残します。 再現した環境 SPiP...