JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptで2つ以上の文字列を結合する3つの方法（+演算子・+=・concat()）

    JavaScriptで2つ以上の文字列を結合する方法を、具体的なコード例とともにわかりやすく解説します。 JavaScriptには、2つ以上の文字列を結合するためのさまざまな方法があります。代表的なのは、プラス演算子 +、プラスイコール演算子 +=、そして concat() メソッドの3つです。 なお、+ と += は代入演算子と呼ばれます。 それでは、3つの方法をすべて実際に試してみましょう！ プラス演算子（+） たとえば、firstName と lastName という2つの変数があり、その結合した値を fullName という3つ目の変数に代入したいとします。この場合、次のように書くこと

  2. JavaScriptで配列の任意の位置に要素を追加する方法 — splice()メソッド徹底解説

    JavaScriptで配列の特定の位置（インデックス）に要素を追加する方法を、実例を交えてわかりやすく解説します。 配列に要素を追加したいけれど、末尾への追加（append）や先頭への追加（prepend）ではなく、配列の中間など「特定の位置」に挿入したい——そんなケースはよくあります。 補足：特定の位置にあるデータを操作することを、一般的にインデックスと呼びます。JavaScriptの配列のインデックスは0から数え始めるため、以下のような対応関係になります。 0番目 ＝ 1つ目の要素 1番目 ＝ 2つ目の要素 以降も同様 たとえば5つの要素を持つ配列の3番目の要素にアクセスしたい場合は、

  3. JavaScript変数の命名規則を徹底解説！守るべきルールとキャメルケースの基本

    JavaScript変数の命名規則（ルール） JavaScriptで変数に名前を付ける際には、守らなければならない厳密な「ルール」（単なる推奨ガイドラインではなく、必須の規則）が存在します。ここでは、その基本ルールをわかりやすく解説します。 変数名に適用される基本ルール 変数名に使用できるのは、半角英数字（a〜z のアルファベットと 0〜9 の数字）、アンダースコア（_）、ドル記号（$）のみです。 変数名を数字で始めることはできません。 変数名の先頭は、アルファベット・ドル記号（$）・アンダースコア（_）のいずれかで始める必要があります。 変数名にスペースを含めることはできません。 変数名に

  4. 【レビュー】バニラJavaScriptだけで作られたスペースインベーダー（Andrea Maille氏作）

    Andrea Maille氏が開発した「Space Invaders」は、1978年に登場した伝説的な2Dシューティングゲームを、フレームワークやライブラリに一切頼らない純粋なバニラJavaScriptのみで再現した作品です。 主な機能 このゲームには、以下の機能が実装されています。 当たり判定（コリジョン検出） スペースキーでの射撃 矢印キーによる左右（X軸方向）の移動 ピースモード（ロケットの代わりにバラを投げて敵を倒すユーモアあふれるモード 😂） タイマー表示 スコアカウント ハイスコアボード スコアの送信機能 レビューの感想 敵AIの動きはそれほど複雑ではなく、サウンドエフェク

  5. JavaScriptとCSSでページ最下部へスムーズにスクロールさせる方法

    JavaScriptと少量のCSSを使って、長いWebページの一番下までユーザーをスムーズにスクロールさせる方法を解説します。 ユーザーがワンクリックでページの最下部まで滑らかに移動できるようにしたい場合、CSSのscroll-behaviorプロパティと、JavaScriptのscrollIntoView()メソッドを組み合わせるのが簡単で効果的です。 このチュートリアルでは、以下のものが必要になります。 ブラウザ右側に縦スクロールバーが表示されるほどコンテンツ量のある長いWebページ ページ上部に配置したid付きのアンカー要素 ページ下部に配置したid付きの任意の要素 CSSプロパティs

  6. JavaScriptで配列から特定の要素を1つ見つける方法（Array.find()の使い方）

    バニラJavaScript（フレームワークに依存しない素のJavaScript）で、配列から特定の要素を1つだけ見つけたい場合は、ES6で導入された Array.find() メソッドを使うのが最もシンプルで効果的です。 例として、野菜の名前が入った配列を用意し、その中から「carot（ニンジン）」を探してみましょう。 const vegetables = [broccoli, carot, kale, spinach] // 配列からcarotを検索 let carot = vegetables.find(function(vegetables) { return vegetables

  7. JavaScriptでマウスオーバー時にWebサイトの背景色を変更する方法

    バニラJavaScript（フレームワークやライブラリに依存しない素のJavaScript）を使って、マウスオーバー時にWebサイトの背景色を変更する方法を解説します。 HTML まず、シンプルなHTMLページのマークアップを用意します。 <!DOCTYPE html> <html> <body> <h1>Move your move over this page</h1> </body> </html> JavaScript ユーザーがページ上のどの場所にマウスを移動しても背景色が変わるように

  8. JavaScriptでマウスオーバー時にWebサイトの背景色を切り替える方法

    JavaScriptのmouseoverイベントとmouseoutイベントを使えば、マウスカーソルがWebページに入ったとき・出たときに、サイトの背景色を簡単に切り替えることができます。この記事では、その具体的な実装方法を初心者の方にもわかりやすく解説します。 HTML まず、シンプルなHTMLページのマークアップ例を見てみましょう。 <!DOCTYPE html> <html> <body> <h1>このページの上でマウスを動かしてみてください</h1> </body> </html> Cod

  9. インラインJavaScriptでmouseOver/mouseOutを使って画像を手軽に切り替える方法

    マウスカーソルを画像に重ねたとき（mouseOver）に別の画像へ切り替え、マウスが離れたとき（mouseOut）に元の画像へ戻す——そんな動作を、インラインJavaScriptだけで手軽に実現する方法をご紹介します。HTMLタグに直接イベントハンドラを記述するため、外部ファイルや追加のスクリプトは一切不要です。 <img onmouseover=this.src=new-image.png onmouseout=this.src=default-image.png src=default-image.png /> 仕組みはとてもシンプルです。onmouseover属性

  10. JavaScriptで印刷・保存ボタンを作る方法【window.print()の使い方】

    クリックするとブラウザの印刷・保存ダイアログが開くボタンの作り方を解説します。 ウェブサイトのページを印刷または保存したい場合、通常はブラウザのメニュー(多くの場合、画面左上)から操作できます。 ファイル → 印刷と進み、「保存」ボタンをクリックしてPDFとして保存するか、プリンターで印刷します。 ショートカットキー: Cmd + P(Mac)/ Ctrl + P(Windows) しかし、ユーザーがもっと手軽にページを印刷・保存できるように、クリックひとつでブラウザの印刷ダイアログが開くボタンを設置できたら便利ですよね。 印刷・保存ボタンを作成する それでは実装していきましょう。まずは、

  11. JavaScriptでアラートボックスを作成する方法

    アラートボックスとは？ アラートボックス（Alert Box）とは、クリック、スクロール、テキスト入力などのユーザー操作に反応してポップアップ表示される小さなウィンドウのことです。主にユーザーへ問題や注意点を警告する目的で使われますが、単に情報をお知らせする用途でも広く活用されています。 よくある使用例として、フォームの送信ボタンをクリックしたものの、必須項目の入力を忘れてしまったケースが挙げられます。この場合、アラートボックスが自動的に表示され、問題の内容をユーザーに分かりやすく伝えることができます。 アラートボックスの作成方法 それでは、上のスクリーンショットと同じアラートボックスを実際

  12. JavaScriptでサイト訪問者を別のページやURLへリダイレクトする方法を徹底解説

    JavaScriptのwindow.locationオブジェクトを使えば、サイト訪問者を別のURLへ簡単にリダイレクトできます。この記事では、基本的なリダイレクトの実装方法から、メッセージ表示付きのリダイレクト、実務での活用シーンまで詳しく解説します。 ページリダイレクトの基本 サイト訪問者を新しいURLへリダイレクトするには、リダイレクト元のページで以下のJavaScriptを実行するだけです。 window.location = https://wheretoredirect.com このコードは、外部の.jsファイルとして読み込むか、Webページの<head>セクション内にイ

  13. JavaScriptでブラウザを判定してサイト訪問者をリダイレクトする方法

    最新のWebサイトには先進的な機能が数多く実装されていますが、その一部は特定のブラウザ(特にInternet Explorerなどのレガシーブラウザ)と互換性がない場合があります。幸い、JavaScriptを使えばサイト訪問者がどのブラウザを使用しているのか(あるいは使用していないのか)を検出できます。これにより、訪問者をそれぞれのブラウザに対応したバージョンのサイトへ自動的に誘導することが可能になります。 Chrome以外のブラウザ利用者をリダイレクトする方法 たとえば、サイトの最新バージョンが現時点でChromeブラウザでのみ100%正常に動作するとしましょう。この場合、Chromeを使っ

  14. JavaScriptで数値を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで数値（Number型）を文字列に変換したい場合は、toString()メソッドを使うのが最も一般的な方法です。数値に対してこのメソッドを呼び出すと、その値を表す文字列が返されます。 let number = 10; let numberToString = number.toString(); console.log(numberToString); // 10 上記の例では、数値 10 を toString() メソッドで変換し、文字列 10 を取得しています。コンソール上の出力は一見同じに見えますが、データ型が number から string へと変化している点に

  15. 【JavaScript】Uncaught SyntaxError: Unexpected identifier の主な原因と解決方法

    ブラウザの開発者コンソールに、次のようなJavaScriptのエラーが表示されたことはありませんか？ Uncaught SyntaxError: Unexpected identifier この「キャッチされない構文エラー（予期しない識別子）」が発生する最も一般的な原因のひとつが、constで宣言した変数の値を変更（再代入）しようとしていることです。JavaScriptでは、これは許可されていません。 constは「不変（イミュータブル）な変数」 JavaScriptにおけるconstは、いわゆる不変（immutable）な変数を宣言するためのキーワードです。「後から誰にも書き換えられたり、再

  16. JavaScriptで印刷ダイアログを開く方法をわかりやすく解説

    JavaScriptで印刷ダイアログを開く基本 JavaScriptでブラウザの印刷ダイアログを表示するには、print()関数を使用します。ボタンクリックなどのユーザーアクションと組み合わせることで、Webページに簡単な印刷機能を実装できます。 基本的な使い方 window.print()を呼び出すだけで、現在表示しているページに対する印刷ダイアログが起動します。HTMLのボタン要素に組み込んで使うのが一般的です。 print()とconsole.log()の違いに注意 多くのプログラミング言語とは異なり、JavaScriptにおけるprint()はコンソールにメッセージを出力するための

  17. バニラJavaScriptでダブルクリックを検出する方法

    バニラJavaScript(フレームワークやライブラリに依存しない素のJavaScript)でダブルクリックを検出したい場合は、dblclick イベントリスナーを使用します。 windowオブジェクトでダブルクリックを検出する 以下の例では、window オブジェクトに対してダブルクリックのリスナーを登録しています。これにより、ページ内のどこを素早くダブルクリックしても、その操作が検出されるようになります。 { console.log(Double-click detected) // Double-click detected }) 特定のDOM要素にイベントリスナーを設定する

  18. JavaScriptで値が数値かどうかを判定する方法

    JavaScriptでは、ある値が数値なのか、それとも別のデータ型なのかを確認する方法がいくつかあります。本記事では、最も一般的に使われるtypeof演算子の基本的な使い方から、フォームのバリデーションなど実践的な活用例まで、コード例とともにわかりやすく解説します。typeof演算子の基本値の型を確認する最も一般的な方法は、typeof演算子を使用することです。typeofは、オペランドとして渡した値の型を文字列で返します。const value = 5 console.log(typeof value) // numberこの例では、変数valueに代入された5は数値型なので、typeof

  19. JavaScriptで明日の日付を取得する方法をわかりやすく解説

    JavaScriptで明日の日付を取得するのはとても簡単です。まず現在の日付を取得し、そこに1日分を加算するだけです。以下のコードを見てみましょう。 const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) tomorrow.toDateString() コードの仕組み まず new Date() で今日の日付オブジェクトを作成します。次に new Date(today) とすることで、同じ日時を持つ新しいDateオブジェクトを複製しています。これは元

  20. JavaScriptでオブジェクトが空かどうかを判定する方法

    JavaScriptでは、次のように書くと「空のオブジェクト」を作成できます。 const emptyObject = {} しかし、このオブジェクトが本当に空なのかどうかを、JavaScriptでどうやって確認すればよいのでしょうか。 答えは、Object.entries() メソッドを使うことです。 まず、別の空のオブジェクトを用意します。 const someObject = {} このオブジェクトに対して Object.entries() を実行してみましょう。 Object.entries(someObject) 結果をコンソールに出力すると、次のようになります。 console.l

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:291/297  20-コンピューター/Page Goto:1 285 286 287 288 289 290 291 292 293 294 295 296 297