JavaScript

問題の概要まず、次のような状況を想定してください。最初、メモ帳（テキストエディタ）には文字「A」が1つだけ表示されています。この状態から、1ステップごとに次の2種類の操作のいずれかを実行できます。すべてコピー（Copy All） ― メモ帳上に存在するすべての文字をコピーします（部分コピーは許可されません）。貼り付け（Paste） ― 最後にコピーした文字列を貼り付けます。私たちの課題は、数値numを唯一の引数として受け取るJavaScript関数を作成し、文字「A」をちょうどnum個表示するために必要な最小の操作回数（コピーまたは貼り付けのステップ数）を計算して返すことです。入出力例たとえば

問題の概要 本記事では、第1引数として文字列 str を、第2引数として文字列の配列 arr を受け取るJavaScript関数を作成します。この関数の目的は、str の中に含まれていて、かつ arr にも存在する部分文字列を、開始タグ <p> と終了タグ </p> のペアで囲むことです。 この問題には、次の2つの重要なルールがあります。 重なりの扱い： 2つの部分文字列が重なり合っている場合、それらを1組の段落タグだけでまとめて囲む必要があります。 連続部分の結合： 段落タグで囲まれた2つの部分が隣接して連続している場合も、それらを結合して1つのブロックとして扱い

文字列の配列を第一引数として受け取るJavaScript関数を作成する必要があります。第二引数には、26個の英小文字アルファベットすべてがランダムな順序で並び替えられた文字列が渡されます。 この関数の役割は、配列内の単語が第二引数で指定された順序に従って辞書式順序(lexicographical order)で正しく並んでいるかどうかを判定することです。正しく並んでいればtrueを、そうでなければfalseを返します。 例 例えば、入力となる単語の配列と順序が以下の場合を考えてみましょう。 const arr = [this, is, something, mad]; const order

はじめにJavaScriptでは、同じ長さの2つの配列を受け取り、対応する位置にある要素同士を比較して「どちらの配列が優勢か」を判定したいケースがあります。本記事では、そのような比較を行う関数をシンプルなコードで実装する方法を解説します。前提となるデータまず、長さが同じ2つの数値配列を用意します。const arr1 = [23, 67, 12, 87, 33, 56, 89, 34, 25];const arr2 = [12, 60, 45, 54, 67, 84, 36, 73, 44];要件上記のような2つの配列を第1引数・第2引数として受け取るJavaScript関数を作成します。関数

整数（正の数、負の数、ゼロ）が混在した配列があるとします。const arr = [23, -1, 0, 11, 18];このような配列を第1引数（唯一の引数）として受け取り、「正の数」「負の数」「ゼロ」という3つのグループそれぞれが配列全体に占める割合（小数の比率）を求めて返すJavaScript関数を作成する必要があります。期待される出力たとえば上記の配列の場合、長さは5なので、出力は次のようになります。const output = [.2, .2, .6];出力される配列には必ず3つの数値が含まれ、それぞれ「負の数」「ゼロ」「正の数」の割合を表します。答えの正しさを手軽に確認する方法とし

本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。(n = 5 の場合の出力例)01 01 02 01 02 03 01 02 03 04 01 02 03 04 05仕組みのポイントこのパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進む

問題の概要次のような整数の配列があるとします。const arr = [12, 1, 4, 8, 5];ここで求められているのは、このような配列を唯一の引数として受け取るJavaScript関数の作成です。この関数は、正確に2つの整数からなる配列を返す必要があります。1つ目の整数： 配列の要素から任意の1つを除外した場合に得られる最小の合計2つ目の整数： 配列の要素から任意の1つを除外した場合に得られる最大の合計さらに重要な条件として、処理には forループを1回だけ 使用しなければなりません。期待される出力たとえば、上記の配列の場合、出力は次のようになります。const output = [

問題の概要 まず、次のような数値の配列を例に考えてみましょう。 const arr = [1, 2, 1, 3, 2]; ここで求められているのは、次の3つの引数を受け取るJavaScript関数です。 第1引数：対象となる数値の配列 第2引数：目標となる合計値（sum） 第3引数：合計値を構成する要素の個数（num）※同じ要素の重複使用は不可 関数は、指定された個数の要素の合計が目標値と一致するグループの総数を返します。 入力例と出力例 入力値が次のとおりだとします。 const arr = [1, 2, 1, 3, 2]; const sum = 3; const num = 2; こ

この記事では、数値の配列と1つの数値を受け取り、「2つの要素の合計がその数値で割り切れる」すべてのペアを見つけるJavaScript関数の実装方法を解説します。 問題の定義 関数は第1引数として数値の配列(仮に arr と呼びます)、第2引数として単一の数値(仮に num と呼びます)を受け取ります。 そして、次の条件を満たすすべてのペアを配列から見つけ出します。 (arr[i] + arr[j]) を num で割った余りが 0、かつ i < j 入力例と期待される出力 たとえば、入力として次の配列と数値が与えられた場合を考えます。 const arr = [1, 2, 3, 4,

本記事では、重複した値を含む可能性のある整数の配列を受け取り、その中から同じ値どうしのペアがいくつ作れるかを求めるJavaScript関数の実装方法を解説します。 問題の概要 たとえば、次のような入力配列が与えられたとします。 const arr = [1, 5, 2, 1, 6, 2, 2, 9]; この場合、期待される出力は次のとおりです。 const output = 2; これは、配列内に「1と1」「2と2」というペアがそれぞれ1組ずつ存在するためです。なお、2は3つあるため1つは余りますが、ペアとしては1組とカウントされます。 アルゴリズムの考え方 この問題を解く最もシンプルなア

問題の概要数値の配列（第1引数：arr）と数値（第2引数：num）を受け取るJavaScript関数を作成します。この関数は、配列内の任意の2つの要素間の絶対差がnum以下となる最長の部分配列（連続・非連続を問わない）の長さを求めて返す必要があります。入力例と出力例例えば、入力配列と数値が以下の通りだったとします。const arr = [7, 9, 8, 6, 6, 3];const num = 1;この場合、期待される出力は次のようになります。const output = 3;これは、条件を満たす最長の部分配列が [7, 6, 6] であるためです。この部分配列内の要素同士の絶対差は、すべ

本記事では、数値を第1引数（唯一の引数）として受け取るJavaScript関数の作成方法を解説します。この関数は、その数値自身を余りなく割り切る桁の個数を数えて返すものです。 問題の概要 例えば、入力される数値が次の場合を考えてみましょう。 const num = 148; このとき、期待される出力は以下の通りです。 const output = 2; 理由は簡単です。148は 1 でも 4 でも割り切れますが、8 では割り切れないためです。したがって、割り切る桁は「1」と「4」の2つとなり、答えは2になります。 実装コード それでは、実際のコードを見てみましょう。 const num =

問題の概要 JavaScriptで、文字列を引数として受け取る関数を作成します。この関数は、元の文字列から不要な文字を削除し、「最大でも2種類の異なる文字」だけで構成される最長の文字列を作り出します。そして最後に、その文字列の長さを返します。 なお、文字を削除しても残った文字の相対的な並び順は保たれます。そのため、この問題は厳密には連続した「部分文字列」ではなく、「部分列（subsequence）」を求める問題だと言えます。 たとえば、入力文字列が次の場合を考えてみましょう。 const str = kjeljsdl; このとき、期待される出力は次のとおりです。 const output =

プログラミングの学習やコーディング面接でよく出題されるテーマのひとつに「アナグラムの判定」があります。アナグラムとは、同じ文字を並べ替えてできる別の単語や文字列のことです。例えば「listen」と「silent」のように、使用されている文字の種類と数が完全に一致していれば、両者はアナグラムの関係にあると言えます。この記事では、JavaScriptを使って2つの文字列が互いにアナグラムであるかどうかを判定するプログラムの作成方法を、具体的なコード例とともにわかりやすく解説します。問題の例まず、具体的な入力と出力の例を見てみましょう。例1:アナグラムの場合入力:String a = india S

はじめに本記事では、JavaScriptから外部のJSONファイルを読み込む方法を解説します。まず、以下のようなデータを含むJSONファイル「config.json」があると仮定しましょう。{ secret: sfsaad7898fdsfsdf^*($%^*$, connectionString: mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=true&w=majority, localConnectionString: mongodb+srv://userna

Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した

セキュリティ上の理由により、ブラウザはinput要素で選択された画像ファイルのパスへの直接アクセスを許可していません。つまり、ブラウザ上で動作するJavaScriptはファイルシステムにアクセスできない仕組みになっています。そのため、ユーザーが選択した画像ファイルをサーバーやその他の場所へ送信する前にプレビュー表示したい場合は、少し工夫が必要です。本記事では、JavaScriptでアップロード前に画像をプレビューする2つの実装方法を、サンプルコード付きでわかりやすく解説します。方法1：URLクラスのcreateObjectURL()を使うURLクラスが提供するcreateObjectURL()

Webアプリケーションを開発していると、ブラウザから異なるオリジン（ドメイン）のサーバーにリクエストを送った際に、CORSエラーに遭遇することがよくあります。しかし、同じリクエストをPostmanなどのAPIツールから送ると、なぜか問題なく成功してしまいます。この挙動の違いには、いったいどのような理由があるのでしょうか。 問題の概要 現在表示しているページのURLと異なるオリジンのリモートサーバーに対してネットワークリクエストを送信すると、Webブラウザでは同一オリジンポリシー（Same-Origin Policy）により、CORSエラーが発生します。ところが、Postmanのようなツールを使

AJAXリクエストとCookieの基本的な仕組み Web開発では、AJAXリクエストの実行時に特定のCookieをサーバーへ送信したいというケースがよくあります。「どうやってリクエストにCookieを紐付けるのか」と悩む方も多いかもしれませんが、実は特別な処理はほとんど不要です。 ここで押さえておきたい重要なポイントは、リモートサーバーへのすべてのAJAXリクエストには、開発者が何もしなくても、ブラウザが保持しているすべてのCookieが自動的に送信されるという点です。これはブラウザの標準的な動作であり、意識的に設定を追加する必要はありません。 したがって、私たちがやるべきことはシンプルです。

問題の概要1から任意の整数 num までの連続した数列を考えます。この中から2つの数(それぞれ m と n と呼びます)を選び、次の条件を満たす組み合わせを見つけます。sum(1 to num) - (m + n) = m * nつまり、「選んだ2つの数を除いた残りの数の合計」が「選んだ2つの数の積」と等しくなるようなペアです。最終的に、条件を満たすすべての組み合わせを配列として返します。具体例入力が次の場合を考えてみましょう。const num = 10;このときの出力は次のようになります。const output = [ [7, 6] ];理由はシンプルで、1から10までの合計が