JavaScript講座

JavaSciptのロゴ画像
2018.12.18

管理人の1番好きなプログラミング言語はJavaScriptです。
App StoreやGoogle Playなどのように登録にわずらわしい手間が必要なく、ホームページとしてアップロードすればゲームでもアプリでも公開できるからです。パソコンでもスマホでも気軽に利用可能でいいですよね。

こちらでは、JavaScirptでアプリが作れるようにするための基本と実際の応用方法までを随時掲載していきます。

ある程度プログラミング言語に慣れた方で、JavaScirptの全体像を知りたい方は以下のMDNのリンクがよくまとまっています。

JavaScript 言語概要 - JavaScript | MDN
JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が Jav...
developer.mozilla.org

JavaScript基本

JS：JavaScriptの始め方
JavaScriptでのプログラミングを始めるにあたって最初に知っておきたい事柄をまとめました。 JavaScriptの概要、必要な環境、基本的な記述がざっと分かるようにしました。
dianxnao.com
2022.01.11
JS：JavaScriptの配列
JavaScriptの配列は可変長です。C言語のように最初に要素数を設定する必要はありません。 JavaScriptの配列とはArrayオブジェクトです。C#などの言語で言うところのリスト構造です。
dianxnao.com
2022.01.11
JS：関数の記述方法と使い方
JavaScriptでも関数は作成できます。 関数の定義方法と実行方法を簡単な例で示します。
dianxnao.com
2019.12.13
JavaScript：よく使う処理をライブラリにして外部呼出しで使う
JavaScriptでは、関数やクラスを～.jsとしてファイルに保存しサーバに公開すると外部から呼び出して使うライブラリとして利用できます。
dianxnao.com
2022.06.29
JS：JavaScriptでホームページを書き換える
JavaScriptを使って1度表示されたHTMLタグの内容を変更する（書き換える）ことが出来ます。 Webアプリ制作の第1歩と考えていいと思います。
dianxnao.com
2022.01.17
JS：JavaScriptでホームページの見た目を変える
JavaScriptを使うとホームページの見た目を変化させることが出来ます。ホームページの見た目を変えるという事は、要するにJavaScriptでCSSの値を変化させるということになります。
dianxnao.com
2023.10.18
JavaScript：イベント処理の書き方
JavaScriptを使うとブラウザ上の様々なイベント処理に対応したプログラムを作成できます。 新旧イベント処理の記述、無名関数による呼び出し、関数呼び出しそれぞれサンプルコードで示します。
dianxnao.com
2022.01.28
JS：起動時（ホームページ読み込みが完了した際）に実行する
JavaScriptのloadイベントを使うと起動時（＝ホームページの読み込みが完了した際）にスクリプトの実行が出来ます。
dianxnao.com
2022.01.06
JS：イベントプロパティ（on～）によるイベント処理【古い記述形式】
本記事内容は、DOM Level0というJavaScriptでは古い記述例となります。参考：イベントリスナーを登録するための古い方法 - MDN現在（2020年3月現在）のDOM Level2ではイベ...
dianxnao.com
2021.03.02
JavaScript：色々なイベント処理
JavaScriptのイベント処理は種類も多いので、比較的分かりやすいイベントで使いそうなものを1つにまとめた簡単なサンプルを作りました。
dianxnao.com
2022.02.08
JavaScript：端末サイズが変更されたことをチェックする(resizeイベント)
resizeイベント設定すると端末のサイズ変更やスマホの傾きが検出された際のチェックが可能です。 サンプルでは、端末サイズが変更されたら、ブラウザ表示領域の幅と高さが一緒に表示されます。
dianxnao.com
2022.06.21
JavaScript：日付と時刻を取得する
JavaScriptで日付と時刻を取得する方法、整形して表示する方法を解説します。
dianxnao.com
2022.04.27
JS：JavaScriptでの乱数の使い方
JavaScriptでの乱数の使い方をサンプルプログラムを交えて紹介します。Math.random()の値をそのまま表示させる。整数の乱数を得る。
dianxnao.com
2021.03.05
JavaScript：ランダムカラー文字列を生成する
CSSで利用できるような rgb(100, 25, 3) のような形式のランダムカラー文字列を生成するコードサンプルです。
dianxnao.com
2022.05.18
JavaScript：タイマー（setTimeout）によるイベント処理
JavaScriptを使って、一定時間後に処理したい、あるいは時計などのように再帰処理を使って指定時間ごとに数値をカウントアップする方法を解説しています。
dianxnao.com
2022.02.08
JavaScript：setTimeoutによる再帰処理でデジタル時計を作る
JavaScriptで呼び出した関数の最後にsetTimeout関数を使って自身の関数を再帰呼び出しすることでデジタル時計が簡単に作成できます。
dianxnao.com
2022.02.07
JavaScript：オブジェクトを利用する
クラスを使う以前に知っておきたいJavaScriptのオブジェクトという概念について簡単なプログラムを作って紹介します。
dianxnao.com
2022.06.01
JavaScript：3つのfor文を理解する
JavaScriptには3種類のfor文があります。 万能の 普通のfor文、配列をに便利なfor ~ of、オブジェクトに向いている for ~ inです。
dianxnao.com
2022.06.15
JavaScript：日常をオブジェクト化してみる
「JavaScriptのオブジェクト形式を日常の事物に利用したらどうなるか？」を考えてみます。 いくつかのサンプルからオブジェクト形式の利用方法が見えてくると思います。
dianxnao.com
2022.06.15
JavaScript：キャンバスに図形を描画する
キャンバスで日本国旗と文字を描画してキャンバスの使い方を学びます。 cavasタグへの描画の基本解説です。
dianxnao.com
2022.02.15
JavaScript：キャンバスでアニメーションする基本
canvasタグに描いた図形をアニメーションさせる基本です。 描画処理を関数化して再帰呼び出しが基本です。requestAnimationFrameメソッドを使うようにすると滑らかな描画が実現できます。
dianxnao.com
2022.02.15
JavaScript：キャンバスでマウスクリックした座標を得る
キャンバス（canvas）上でマウスクリックしたXY座標を得るサンプルです。
dianxnao.com
2023.02.07
JavaScript：canvasで壁に当たったら跳ね返るアニメーション
arcメソッドで描画した塗りつぶし円をキャンバスの範囲で跳ね返るように見せるアニメーションです。 ソースコードは簡単なので理解しやすいと思います。
dianxnao.com
2022.02.15
塗りつぶし円をキャンバスに描くクラスを作ってみる
キャンバスに塗りつぶし円を描く部分をクラス化して利用してみます。更に移動メソッド（move）を追加してアニメーションできるクラス（FillArcAnim）に改良してみます。
dianxnao.com
2022.07.05
JavaScript：キャンバスに星型(☆)を描画する
よくある一筆書きで描くような星型（☆）をキャンバスに描画する方法です。 まずは基本サンプルをご覧ください。
dianxnao.com
2022.11.17
JS：JavaScriptでのクラス作成基本
この記事ではJavaScriptでのクラス記述方法と利用例について詳しく説明します。 オブジェクト指向の心は、「再利用」にあります。
dianxnao.com
2019.02.20
JS：JavaScriptクラスを応用してみる
JavaScriptでクラス（class）どう使えばいいのか？ということを考えてみます。 1.RPGのキャラクタをJavaScriptのクラスで表現してみる　2.指定した位置に円を描くクラス　3.ランダムな位置にランダムな大きさの円を描くクラス
dianxnao.com
2019.03.05
JS：JavaScriptでスマートフォンの傾きを検出する
JavaScriptを使うとスマートフォンやタブレットの傾きを検出できます。この記事では、deviceorientationイベントを使って加速度センサーの値をブラウザ上に表示させてみます。
dianxnao.com
2019.03.12
JS：JavaScriptでスワイプ処理をする
ライブラリを使わずにJavaScript単体でスマホなどのスワイプ処理を実現する方法です。
dianxnao.com
2019.08.01
JavaScript：GPS情報を取得する
GPS情報の緯度と経度を取得するJavaScriptサンプルです。お使いのスマートフォン端末で確認すると正確なGPS情報を得る事ができます。
dianxnao.com
2022.05.25
JavaScript：ローカルストレージへの読み書き
テキストボックスに入力した文字列をローカルストレージに書き込みと読み込みを行うサンプルを紹介します。
dianxnao.com
2022.07.13
JS：ローカルストレージの基本
今回ローカルストレージの例として取り上げるのは、サイトの背景色を変更すると、次回アクセスした際に同じ背景色で表示されるというものです。
dianxnao.com
2019.08.01
ローカルストレージに保存されたデータをChrome上で確認する方法
ローカルストレージに保存されたデータをChrome上で確認する方法。 ローカルストレージデータは、ブラウザChrome上で確認や変更、削除などが出来ます。
dianxnao.com
2019.08.01
JavaScript：前回のアクセス日時を表示する
ローカルストレージ機能を使って前回アクセスした日時を表示するサンプルです。
dianxnao.com
2022.08.22
JavaScript：文字色と背景色をローカルストレージに保存する
テキストボックスに入力した文字色と背景色をサイトに適用させます。 適用した色を次回以降のアクセスでも継続するため、ローカルストレージにそれぞれ保存します。
dianxnao.com
2022.08.22
Stringオブジェクト(JS)：配列の文字列化と文字列の配列化
JavaScriptのjoinメソッドとsplitメソッドを使うと、配列を1つの文字列にしたり、1つの文字列から区切り文字を指定して配列化したりできます。
dianxnao.com
2022.08.23
JavaScript：端末の短辺に合わせた正方形キャンバスを設定する
どの端末でも同じような縮尺でキャンバスに描いた図形や文字を表示したい。 キャンバスサイズを端末の短辺に合わせて正方形とし、端末のサイズが変更された際も対応するようにしました。
dianxnao.com
2022.01.17
JavaScript：imgタグの画像を変更する
ボタンを押すとimgタグに表示されていた画像が切り替わるJavaScriptサンプルです。
dianxnao.com
2022.02.21
JavaScript：キャラを選ぶ
selectタグで選択したキャラを選ぶ、という操作でimgタグの画像ファイルを変更するサンプルです。
dianxnao.com
2022.02.18
JavaScriptでスライダー値を表示する
input type=”range” を使うとサイトにスライダーを設置できます。 JavaScriptを使ってスライダーを動かしたときにリアルタイムに値を表示する方法を紹介します。
dianxnao.com
2022.09.01
JavaScript：端末が縦か横かを判定する
JavaScriptでスマホやタブレット端末が縦になっているか横になっているかを判定するには、 window.matchMedia("(orientation: portrait)") を使って判断できます。
dianxnao.com
2022.09.21
JavaScript：スマホでタッチした座標を取得する
スマホ、タブレット、あるいはタッチ式のPCでは、タッチイベントが発生します。 JavaScriptを使って特定タグの枠内でタッチしたxy座標を取得するサンプルを紹介します。
dianxnao.com
2022.09.28
JavaScript：fetchを使ったJSONファイル読み込み例
JavaScriptのfetchを使ったJSON形式ファイルの読み込み例です。ファイル（=ネットワークリソース）を読み込んだ後、整形してページに表示します。
dianxnao.com
JavaScript：オーディオの再生と停止をする
JavaScriptからmp3やm4aなどのオーディオファイルを再生・停止する方法についてサンプルコードを交えて解説します。
dianxnao.com
2022.11.18

JavaScript応用

JS：CanvasAPIでダンジョンを描画する
棒倒し法というアルゴリズムを使った2次元ダンジョンを描画するプログラムです。 JavaScriptの標準機能であるCanvasAPIを利用した描画方法です。
dianxnao.com
2024.12.19
JS：Web Audio APIの超簡単なサンプル
Playボタンを押すと指定した音声ファイルを再生するだけのWeb Audio APIを利用した超簡単なサンプルです。
dianxnao.com
2024.05.16
JS：Web Audio APIを利用した簡単なサンプルと解説（参考文献MDN）
これはMDNにあるWeb Audio APIの使用で扱っているサンプルを少し簡単にしたものです。サンプルでは、音源の再生と一時停止、ボリュームコントロールを行っています。
dianxnao.com
2024.05.16
Web Audio API：複数の音声ソース読み込み後に処理を実行したい
JavaScriptのWeb Audio APIを使ってゲームのBGMや効果音などを再生する際、音声ソースが全て読み込まれてから処理を行いたい場合があります。
dianxnao.com
2024.08.01
JS：スマホの縦でも横でもキャンバスが収まるようにする
スマホを縦（ポートレート）にしても横（ランドスケープ）にしても縦横比を保ったままキャンバス全体を表示できるようにする処理について解説します。
dianxnao.com
2024.03.05
JavaScript：Socket.IOでチャットアプリを作ってみる
この記事は、Socket.IOの公式サイトにあるGet startedで示されるチャットサンプルの制作手順を日本語で解説したものです。
dianxnao.com
2023.05.12
JavaScript：クリックで格子状のマス目番号を取得する
画面を格子状に区切ってクリックした位置のマス目番号を取得したいときがあります。 キャンバス上でクリックしたマウス座標からマス目番号を取得するサンプルを紹介します。
dianxnao.com
2023.01.10
JavaScript：zipcloudを使って郵便番号から住所を取得する
郵便番号データ配信サービスzipcloudを使うと7桁の郵便番号からJSON形式の住所情報を取得できます。 この記事では、サンプルコードと利用の注意点を紹介します。
dianxnao.com
2022.12.07
JavaScript：スワイプカウンター
右スワイプで＋１加算、左スワイプで－１減算、ダブルタップでリセットという機能のJavaScriptで作ったスワイプカウンターです。
dianxnao.com
2022.10.05
10行でクリップボードデータをHTMLサイトに表示させる
10行プログラムでクリップボードに保存したテキストデータをサイト上に表示させることをやってみます。
dianxnao.com
2022.07.14
JS：テキストボックスの文字数を得る
時々（ほんとうに時々ですが）自分で書いた文章が何文字あるのかを知りたいときがあります。JavaScriptで簡単にできるのでは？と思い作成してみました。単純にテキストボックスに入力した文字数を知りたい...
dianxnao.com
2019.09.30
JS：今年の残り日数を表示する
JavaScriptで今日の日付を取得して今年の残り日数を表示するサイトを作りました。JavaScriptは、時刻を基本的にミリ秒として扱います。
dianxnao.com
2018.12.28
JavaScript：キャンバスで普通のアナログ時計を作る
キャンバスのrotate命令を効果的に使ってアナログ時計を作る上での考え方とコードを紹介。 ブラウザを最大化するとディスプレイが時計になります。
dianxnao.com
2022.05.01
JS：端末の傾きに応じてボールを動かす
この記事ではJavaScriptから加速度センサーを利用する例として、スマートフォンやタブレットなどの端末の傾きに応じて画面上のボールを動かす処理のコード例を示します。
dianxnao.com
2019.03.11
HTML+JS：textareaタグを使ってブラウザをターミナル風に装う
HTMLとJavaScriptを使いブラウザ上でターミナル風の見た目を表現できないだろうかと考えて作成した。確認リンクは以下から（それがどうしたの！なんて言わないで下さいね）textareaタグを使っ...
dianxnao.com
2019.06.21
JS：スワイプでカウンター増減、数値をストレージに保存
JavaScriptで、スワイプ処理とローカルストレージ処理を組み合わせて、ブラウザ上で数値が保存されるカウンターを作ってみました。
dianxnao.com
2022.10.05
JavaScript：ブラウザがだんだん暗くなる
CSS背景色（background-color）のRGB値をタイマーイベントで操作してブラウザ画面をだんだん暗くするスクリプトです。
dianxnao.com
2022.02.21
JavaScriptラーメンタイマーを作る
JavaScriptのsetTimeout関数を使って3分後にラーメンが出来たことを知らせるラーメンタイマーを作ってみます。
dianxnao.com
2022.09.02

エラー関連

JavaScript：[Intervention] Unable to preventDefault inside passive eventが出る際のイメージと対処法
エラーの意味は、preventDefault()を含むソースコードで、端末のデフォルト動作を無視して実行しています 対処方法…
dianxnao.com
2023.02.19

JavaScriptおすすめ書籍

基本は、MDNのJavaScriptドキュメントです。

JavaScript | MDN
JavaScript (JS) は軽量でインタープリター型（あるいは実行時コンパイルされる）第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラ...
developer.mozilla.org

ただドキュメントだけ見ても分かりにくいのが現状で、わたしは以下の書籍がJavaScriptらしい記述を体系的に学ぶ上で大変参考になりました。
JavaScriptを基本から学ぶことができます。おすすめしておきます。

JavaScript課題

JavaScriptに慣れてきたら課題に挑戦してみてください。
解答例も記事内にありますので参考にどうぞ！

JavaScript課題：足し算アプリ
2つのテキストボックスに入力した数値を即座に足し算して表示するアプリを作ってください。
dianxnao.com
2022.06.08
JavaScirpt課題：おみくじ
おみくじを引く！ボタンをクリックすると、下におみくじが表示される。 大吉、中吉、吉、凶 を乱数で決定 凶は赤色で表示される。その他は青色
dianxnao.com
2022.05.16
JavaScript課題：日めくりカレンダー風
日めくりカレンダー風の表示をするサイトを作ってみてください。 仕様 今日の月、日、曜日が日めくりカレンダーっぽく表示される レイアウトや見た目は全てCSSを使う
dianxnao.com
2022.05.16
JavaScript課題：コンソールじゃんけん
ブラウザのコンソールに結果を表示するだけのじゃんけんプログラムを作ってみてください。 コンピュータとユーザがじゃんけんをする ユーザの手は グー・チョキ・パーを 1・2・3の数値にしてprompt命令で行う…
dianxnao.com
2022.05.16
JavaScript課題：クリックすると背景色がランダムで切り替わる
クリックするたびにブラウザの背景色がランダム色で切り替わるプログラムを作ってください。
dianxnao.com
2022.05.23
JavaScript課題：犬語に変換する
テキストボックスに入力した日本語を犬語に変換するプログラムを作ってみてください。
dianxnao.com
2022.05.23
JavaScript課題：正規表現（文字列置換とパターン一致）
dog と cat を bird に置換してコンソール表示するプログラムを作ってください。 16進数カラーコードをチェックする正規表現を考えてください。
dianxnao.com
2022.05.30
JavaScript課題：端末の画面サイズが縦長か横長かをチェックする
端末の幅と高さをチェックし、縦長か横長かを判定して表示するプログラムを作ってください。解答例をみる
dianxnao.com
2022.06.27
JavaScript課題：デジタル時計を端末幅に応じて中央表示する
デジタル時計を作って、画面中央に表示させてください。仕様／時・分・秒をそれぞれ0埋め2桁で表示させる。解答例をみる…
dianxnao.com
2022.06.27

JavaScriptで憶えておいた方が良いと思ういくつか

JavaScriptでプログラミングするにあたって憶えておいた方が良いと思われる項目を紹介しておきます。
外部リンクになります。

  1. JavaScript 忘れがちな　=== と == の違い
ホーム
タイトルとURLをコピーしました