JavaScript(ジャバスクリプト) 【JavaScript】(querySelectorAll)クリックされた要素がNodeList内で何番目にあるかを基にelements2から同じ番号のテキストを取得する
querySelectorAllを使用してクリックされた要素がNodeList内で何番目にあるかを基に、elements2から同じ番号のテキストを取得する場合、以下のようなアプローチをとることができます。HTMLコード<h2>Example...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) 【for…of文】JavaScriptの繰り返し処理について
JavaScriptのfor...of文を使用した様々なパターンの具体的な例を示します。この文は、配列やマップ、セットなどの反復可能オブジェクトの各要素に対して繰り返しを行うのに適しています。配列の要素を反復処理するlet fruits =...
JavaScript(ジャバスクリプト) 【for-inループ】オブジェクトのプロパティを反復処理する
JavaScriptのfor-inループを使用すると、オブジェクトの各プロパティを反復処理し、それぞれのキーと値を出力することができます。for (let key in object)for (let key in object) { … ...
JavaScript(ジャバスクリプト) for文とは？コードブロックを繰り返し実行するためのループ処理について
JavaScriptのfor文は、指定された条件が偽になるまで、コードブロックを繰り返し実行するためのループです。主に、以下のように3つの部分に分かれています。初期化式初期化式 - ループが始まる前に一度だけ実行されます。通常、ループカウン...
JavaScript(ジャバスクリプト) mapとは？JavaScriptの配列オブジェクトについて
mapメソッドとは？map は、JavaScriptの配列オブジェクトが提供するメソッドの一つです。map メソッドは、配列内の各要素に対して指定した関数を実行し、その結果を新しい配列として返します。元の配列は変更されず、新しい配列が生成さ...
JavaScript(ジャバスクリプト) 【JavaScript】forEachメソッドとは？基本と使い方について
forEachメソッドとは？forEachは、JavaScriptで配列を繰り返し処理するためのメソッドです。与えられた関数を配列の各要素に対して一度ずつ呼び出します。ここで、提供されたコードでは、dataという配列の各要素に対してforE...
JavaScript(ジャバスクリプト) 【JavaScript】CSSで特定の文字が入った段落を非表示にしたい
特定の文字が入った段落を非表示にしたい段落を非表示にするにはCSSのセレクタで可能ですが、クラス名や指定する場所が決まっていない場合に「特定の文字が入った段落を非表示にしたい」といった場合に困ったことになります。代替手段としてJavaScr...
JavaScript(ジャバスクリプト) JSONデータとは？種類や基本的なフォーマットについて
JSON（JavaScript Object Notation）は、軽量でデータ交換のためのテキストベースのデータ形式です。以下はJSONデータの基本的なフォーマットです。オブジェクト（Object）JSONデータは、中括弧 {} で囲まれ...
JavaScript(ジャバスクリプト) 【JavaScript】async 属性を付与して読み込み順番を変える
async属性を使用してスクリプトの読み込み順序を変更する例を示します。以下は、3つのスクリプトがあり、それぞれが異なる順序で非同期に読み込まれる例です。async属性とは？async 属性は、HTMLの<script>タグに使用される属性...
JavaScript(ジャバスクリプト) 【JavaScript】画面遷移中にぐるぐるローディングアニメーションを表示したい
グルグル回るローディングアニメーションリンク先をクリックした際に、グルグル回るローディングアニメーションを表示してみます。スクリプト参考例特定のリンクをクリックしたときにローディングを表示するようにしたい場合、JavaScriptでそのリン...
JavaScript(ジャバスクリプト) 【JavaScript】リンクをクリックしたらTwitterに投稿できるようにしたい
HTML部分を作るまずは、表示するカードのHTML部分を作ります。<div class="card-container"> <div class="card"> <a href="#" onclick="tweetCard('いつもありがと...
JavaScript(ジャバスクリプト) 【JavaScript】クイズで正解したら下の方に正解・不正解と表示されるようにしたい
JavaScriptで簡単なクイズのWebページを作成します。HTML<div id="quiz-container"> <h2>クイズ</h2> <p>世界で最も高い山は？</p> <button onclick="checkAnswer...
JavaScript(ジャバスクリプト) 【JavaScript】URLパラメータ値でコンテンツの表示・非表示を切り替える
JavaScriptを使って、URLパラメータ値でコンテンツの表示・非表示を切り替えます。URLからパラメータを取得するURLからパラメータを取得します。 <script> $(document).ready(function() { //...
JavaScript(ジャバスクリプト) 【JavaScript】パラメーターを保持したままリダイレクトする
特定のパラメーターを保持したままリダイレクトするために、JavaScriptを使用する方法は以下の通りです。このコードは、ブラウザの現在のURLからパラメーターを取得し、指定のパラメーターが存在する場合、新しいURLを構築し、そのパラメータ...
JavaScript(ジャバスクリプト) 【JavaScript】プログレスバー（進捗状況）をページに表示する方法
プログレスバーを作るプログレスバーが0％から100％までアニメーションで増加し、ボタンをクリックすることでプログレスバーの進行を開始できます。プログレスバーを作成する方法はいくつかありますが、以下に基本的なHTMLとCSSを使用して簡単なプ...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにしたい
ボタンを連打できないようにしたいボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにするには、ボタンを非活性化（disabled）し、処理が完了した後に再度活性化させることができます。以下は、コードにボタンを非活性化および活...
JavaScript(ジャバスクリプト) 【JavaScript】ブラウザ上でWEBPからJPGへの変換を行うツールを作る
HTMLとJavaScriptを使用して、WEBP画像を読み込みJPGに変換してダウンロードする、ブラウザ上でWEBPからJPGへの変換を行うツールを作ります。サンプルページはこちらhtmlコード<!DOCTYPE html><html l...
JavaScript(ジャバスクリプト) 【JavaScript】「文字数カウンター」アプリケーションを作る方法
HTML, CSS, そして JavaScript だけで文字数カウンターを作成してみます。完成形はこちら▼以下は、画面に文字を貼り付けるとその文字数が表示されるコードの例です。文字数カウンターのHTMLコードユーザーがテキストエリアにテキ...
JavaScript(ジャバスクリプト) 【Draggabilly】HTML要素をドラッグアンドドロップできるJavaScriptライブラリ
Draggabillyとは？Draggabillyは、HTML要素をドラッグ可能にするためのJavaScriptライブラリです。指定したHTML要素をマウスやタッチ操作でドラッグできるようにします。以下はDraggabillyの基本的な使い...
JavaScript(ジャバスクリプト) 【JavaScript】JavaScriptのループ文について（for文・while文・do-while文・break文・continue文）
JavaScriptのループ文について、丁寧に分かりやすくひとつずつ説明します。for文for文は、特定の回数だけ繰り返し処理を行うための文です。for文の構文は、次のとおりです。for (初期化式; 条件式; 増減式) { // 繰り返し...
JavaScript(ジャバスクリプト) 【JavaScript】イベントリスナー・コールバック関数とは？
JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。イベントリスナーとは？JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が発生...
JavaScript(ジャバスクリプト) 【JavaScript】画像のバイナリデータとは？JavaScriptで画像に変換する方法
画像のバイナリデータとは？画像のバイナリデータとは、画像をコンピュータで処理するために使用されるバイナリ形式のデータです。バイナリデータは、0と1のビットの組み合わせで表現される情報です。画像は、ピクセルと呼ばれる小さな点の集合体で構成され...
JavaScript(ジャバスクリプト) 【JavaScript】指定された時間の経過後に指定されたコードまたは関数を非同期に実行する｜setTimeout・setInterval
指定された時間の経過後に指定されたコードまたは関数を非同期に実行するには「setTimeout関数」「setInterval関数」が使えます。setTimeout関数とはJavaScriptのsetTimeout関数は、指定された時間の経過...
JavaScript(ジャバスクリプト) 【JavaScript】「スコープ」の基本と種類について
JavaScriptにおけるスコープは、変数や関数がどの範囲で参照可能かを定義します。以下に、JavaScriptにおける主なスコープの種類を説明します。グローバルスコープ（Global Scope）グローバルスコープ（Global Sco...
JavaScript(ジャバスクリプト) 【JavaScript】Cookieに値を保存する関数
JavaScriptを使ってCookieに値を保存するサンプルコードを作成してみます。※セキュリティやデータのサイズに注意しながら利用してください。document.cookiedocument.cookieを使うことで、cookieに値を...
JavaScript(ジャバスクリプト) 【JavaScript】トークンを発行してメール認証する仕組みを作る(Part1)
トークンを発行してメール認証を行う仕組みを作るJavaScriptを使用してトークンを発行してメール認証を行う仕組みを作るためには、いくつかのステップを考える必要があります。以下に参考の流れを示します。ユーザー登録フォームを作成します。この...
JavaScript(ジャバスクリプト) 【JavaScript】特定の要素の前に要素を挿入する｜parentNode.insertBefore
parentNode.insertBeforeJavaScriptで特定の要素の前に要素を挿入するには、次の手順で挿入できます。挿入元の要素を特定します。挿入先の要素を特定します。挿入したい新しい要素を、挿入先の要素の直前に配置します。具体...
JavaScript(ジャバスクリプト) 【JavaScript】パラメータを使用してデータをエンコード・ハッシュ関数でハッシュ値を作成する
パラメータを使用してデータをエンコードしハッシュ値を計算してみます。ハッシュ値とは？「ハッシュ値」とは、ハッシュ関数を使用してデータを固定長の値に変換することで得られる値です。ハッシュ関数は、入力データの任意のサイズを受け取り、固定サイズの...
JavaScript(ジャバスクリプト) 【JavaScript】ハッシュ関数とハッシュ値についての基本
ハッシュ値とは？「ハッシュ値」とは、ハッシュ関数を使用してデータを固定長の値に変換することで得られる値です。ハッシュ関数は、入力データの任意のサイズを受け取り、固定サイズの出力であるハッシュ値を計算します。ハッシュ関数は、データの内容に基づ...
JavaScript(ジャバスクリプト) 【JavaScript】オブジェクト・プロパティ・メソッド・値について
今回はJavaScriptの基本、オブジェクト・プロパティ・メソッドについて見ていきます。オブジェクトとは？JavaScript のオブジェクトは、データとメソッドをまとめたものです。オブジェクトは、変数や関数などのプロパティの集合です。オ...
