JavaScript

プログラミング言語のJavaScriptについて、初心者向けに解説しています。

JavaScript

JavaScript - クリックで切り替わる画像スライダーの作り方

ボタンをクリックすると画像が切り替わる画像スライダーを作ります。画像をいくつか用意して、右矢印ボタンで次の画像を、左矢印ボタンで前の画像を表示するようコーディングします。

JavaScript

JavaScript - スクロールで伸縮するプログレスバーの作り方

ページがどれだけスクロールされているかを示すプログレスバーを作ります。横へ伸びたり縮んだりするプログレスバーをページの上部に設置して、スクロールの進捗率を表示する方法を学びましょう。

JavaScript

JavaScript - タイプライター風に一文字ずつ表示する方法

キーボードで入力しているかのようなタイピングアニメーションを JavaScript で作ります。左から一文字ずつ順番に表示したあとで、今度は右から一文字ずつ削除するようコーディングします。

JavaScript

JavaScript - トップへ戻るボタンの作り方

scrollTo() メソッドや scroll イベントなどを使用して、ウェブページの一番上へ滑らかにスクロールするボタンを JavaScript で作ります。簡単なコードなので JavaScript 初心者の方もぜひ試してみてください。

JavaScript

JavaScript - タブメニューの作り方

ウェブページに表示する内容を簡単に切り替えることができるタブメニューを作ります。JavaScript の forEach() メソッドと for...of ループの反復処理でクラスの付け外しを行う方法を学びましょう。

JavaScript

JavaScript - パスワード生成アプリの作り方

ランダムなパスワードを生成するアプリを JavaScript で作ります。数字や記号をパスワードに含めるかどうかを選べたり、パスワードの長さを自由に変えられる、そんなアプリを一緒に作ってみましょう。

JavaScript

JavaScript - ランダムなパスワードを自動生成する方法

この記事では、数字やアルファベットや記号を組み合わせたランダムなパスワードを JavaScript で作る方法を紹介します。初心者の方にも分かりやすいように簡単なコードで解説しますので、ぜひご覧ください。

JavaScript

JavaScript - ボールが跳ね返るアニメーションの作り方

ボールが動き続けるアニメーションを JavaScript で作ります。requestAnimationFrame() メソッドの使い方や、キャンバスに図形を描画してアニメーションを作る基本的な方法を学びましょう。

JavaScript

JavaScript - 乱数の作り方とランダムな色を生成するコード

JavaScript の Math.random() と Math.floor() メソッドを利用して乱数を生成する方法を紹介します。乱数を使って RGB カラーをランダムに表示する簡単なプロジェクトも掲載しているので、ぜひご覧ください。

JavaScript

JavaScript - setInterval() を使ったアニメーションの基本

この記事では JavaScript でアニメーションを作る方法を解説します。ポイントとなるのは setInterval() メソッドと clearInterval() メソッドです。ボタンをクリックしてアニメーションを動かしたり止めたりする方法を学びましょう。

JavaScript

JavaScript - ボタンを押して表示を切り替える方法

ボタンをクリックしてコンテンツの表示 / 非表示を切り替えたり、ウェブページの表示をダークモードにする方法を解説します。CSS に切り替えたいクラスを追加して toggle() メソッドで切り替えるだけなので簡単です。

JavaScript

JavaScript - 図形に色やグラデーションを設定する方法

JavaScript で描画する図形にスタイルを設定するためのプロパティや、グラデーションカラーを作成するメソッドを紹介します。レインボーカラーや図形を立体的に見せるためのサンプルコードも掲載しているので参考にしてください。

JavaScript

JavaScript - Canvas に図形を描く方法

HTML の canvas 要素を利用すると、JavaScript でグラフィックを描くことができます。基本的なメソッドを学んで、四角形や三角形、円やテキストなど簡単な図形を描画できるようになりましょう。

JavaScript

JavaScript - for ループ (繰り返し) の基本【初心者向け】

繰り返し処理を実行するために使われる for 文の書き方や、ループの中で使われる break 文と continue 文について、プログラミング初心者の方でも分かりやすいように簡単なコードを例にして解説します。

JavaScript

JavaScript - イベントオブジェクト - function(e) の e とは？

function(e) の e はイベントオブジェクトを受け取るための変数です。イベントオブジェクトにアクセスして、押されたキーの種類やマウスポインターの座標などの情報を取得できるようになりましょう。

JavaScript

JavaScript - デジタル時計の作り方

Date オブジェクトを使ってデジタル時計を作ります。setInterval() で１秒ごとに時間を更新する方法や、表示する桁数を揃えるゼロパディングの方法、アロー関数 => の書き方について学びましょう。

JavaScript

JavaScript - Date オブジェクトで日付と時刻を取得する方法

Date オブジェクトで現在日時を取得する方法を紹介します。getMonth() や getHours() など日時に関するメソッドを使って、今日の日付や現在の時刻を表示できるようになりましょう。

JavaScript

JavaScript - オブジェクトの基本【初心者向け】

この記事では、オブジェクトとは何か、プロパティやメソッドの意味、オブジェクトを作る方法であるオブジェクトリテラルとコンストラクタについて、初心者向けに簡単に紹介します。

JavaScript

JavaScript - 数当てゲームの作り方【応用編】

この記事は「数当てゲームの作り方【基本編】」に続く応用編です。入力欄やボタンに機能を加えて遊びやすいように改良します。簡単なゲームなので、プログラミング初心者の方もぜひ挑戦してみてください。

JavaScript

JavaScript - 数当てゲームの作り方【基本編】

数当てゲームはランダムに選ばれた数を予想するゲームです。プログラミング初心者の方でも分かりやすいようにゲームの基本的な考え方をシンプルなコードで解説します。

JavaScript

JavaScript - 背景色を変更する方法 - 配列からランダムに色を選ぶには？

JavaScript で要素のスタイルを変更する方法を学びましょう。ユーザーのクリックで背景色を変えるコードを、基本と応用に分けて解説します。プログラミング初心者の方や、配列や乱数について知りたい方におすすめの内容となっています。

JavaScript

JavaScript - クリックカウンターの作り方【初心者向け】

ボタンのクリック数を画面に表示するクリックカウンターを作ります。コードのポイントとなるのはインクリメント演算子 ++ と innerHTML です。プログラミング初心者の方でも分かりやすいように、簡単な HTML と JavaScript で解説します。

JavaScript

JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。

JavaScript

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

JavaScript

JavaScript - 条件分岐の基本 - if 文の書き方と true, false の意味

if 文は、「もし〇〇ならAをする、そうじゃなかったらBをする」のように、条件によって処理を分岐させるための文です。if 文を理解する際に必要になる、真理値（真偽値）の true と false についても、一緒に学んでいきましょう。