JavaScript
目次 UserAgentの取得方法 UserAgentの取得方法 以下を実行することで、UserAgentを取得する事ができます。 window.navigator.userAgent 以下の様にコンソール出力させると console.log(window.navigator.userAgent); 以下のようなUserAgentがコンソールに出…
目次 数字の配列をソートする方法 文字列の配列をソートする方法 数字でも文字列でもソートする方法 数字の配列をソートする方法 以下のサンプルのように、sort関数を使用してソートを行うことができます。 const numArrayData = [1, 3, 2] numArrayData.sor…
目次 分岐処理とは 条件分岐 条件に当てはまらない場合 複数の条件分岐 分岐処理とは 信号が青の場合は、進む。 信号が赤の場合は、止まる。 といったように、「〜の場合は、〜する」という分岐する処理のことを、分岐処理と言います。 条件分岐 以下のよう…
目次 分岐処理とは 条件分岐 条件に当てはまらない場合 複数の条件分岐 分岐処理とは 信号が青の場合は、進む。 信号が赤の場合は、止まる。 といったように、「〜の場合は、〜する」という分岐する処理のことを、分岐処理と言います。 条件分岐 以下のよう…
目次 はじめに 例外発生時にも実行される処理 はじめに 例外処理を記載したが、エラーが発生しても実行したい処理があります。 その場合の対応として、finally文を使用して処理を記載する事ができます。 例外発生時にも実行される処理 「finally」を記載する…
目次 オリジナルエラーの実行 エラーオブジェクト オリジナルエラーの実行 以下のようにthrowを実行する事で、オリジナルのエラーを実行する事ができます。 var target = 0; try { if (target === 0){ throw new Error("オリジナルエラーです。") } console.…
目次 例外とは 例外処理の方法 例外とは 簡単に言うと、プログラムで発生したエラーのことです。 ※例外は、「エラー」と読み替えてください。 そのため、例外処理とは、エラー処理のことです。 例外処理の方法 以下のように、存在しない変数を使用した場合に…
目次 はじめに 一定時間毎に処理 はじめに 本記事では、一定時間毎に処理を実行する方法を記載します。 画面表示後からX秒毎に処理を行うなどの場合に使用することができます。 一定時間毎に処理 以下が、サンプルボタンです。 押下する事で、1秒毎にコンソ…
目次 はじめに 一定時間後に処理 はじめに 本記事では、一定時間後に処理を実行する方法を記載します。 ボタン押下したX秒後に処理を行うなどの場合に使用することができます。 一定時間後に処理 以下が、サンプルボタンです。 押下する事で、5秒後にダイア…
目次 はじめに プログレスバー はじめに プログレスバーとは、ダウンロードや何らかの処理の進捗を表示するバーのことです。 ゲームのインストール中などによく表示されます。 ここでは、HTMLの標準のprogressタグを使用して、プログレスバーの表示と進捗変…
目次 はじめに 入力ダイアログ 入力ダイアログに初期値を設定 入力ダイアログの入力結果取得 はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（pro…
目次 はじめに 確認ダイアログ 確認ダイアログのボタン押下結果を確認 はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（prompt）などがあります。…
目次 はじめに アラートダイアログ はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（prompt）などがあります。 本記事では、通常のダイアログ（al…
目次 はじめに 月初の判定 月末の判定 はじめに GoogleAppScriptやバッチなどで、当日が月初なのか？月末なのか？を取得したい時があります。 本記事では、月初、月末の判定処理を記載します。 月初の判定 以下のように、月初判定関数を用意します。 /** * …
目次 はじめに ローディングのJavaScriptの準備 ローディングのCSSの準備 ローディングを使用するHTMLの準備 ローディングの止め方 ソースコードの全量 はじめに 本記事では、SpinKitを使用したローディングの実装方法を記載します。 複数の画面で使用出来る…
目次 前提 公開可能キーを取得 HTML/JavaScriptのプロジェクト構成 ソースコードの用意 project/sample/index.html project/sample/index.js project/sample/finish/index.html アクセス確認 カード登録情報確認 テストカード 公式ドキュメント 前提 本記事…
目次 はじめに プロジェクト構成 共通関数の定義 共通関数の実行 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptで共通関数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成は以下とします。 p…
目次 はじめに プロジェクト構成 グローバル定数の定義 グローバル定数の取得 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptでグローバル定数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成…
目次 利用用途 8文字で、アルファベットの大/小文字と数字のパスワード生成 記号を含めたパスワード生成 利用用途 自分で生成したパスワードで各サイトのパスワードを設定しても良いですが、 システム的には、パスワードを生成してメールを送信し、ユーザー…
目次 ハッシュ化とは SHA-256のハッシュ化 SHA-512のハッシュ化 ハッシュ化とは ハッシュ化とは、データを不規則な文字列に変換する事です。 変換されたデータはハッシュ値と呼ばれ、データの変換にはハッシュ関数と呼ばれるアルゴリズムが使われています。 …
目次 置換を使用してスペースを削除する 正規表現を使用してスペースを削除する 置換を使用してスペースを削除する この方法では、最初のスペースのみが削除されます。 全てのスペースを削除したい場合などは「正規表現を使用してスペースを削除する」の方法…
目次 オブジェクト型とは オブジェクト型の宣言 オブジェクト型に値を追加 オブジェクト型に値を追加（Keyを変数にする方法） オブジェクト型の値取得 オブジェクト型から特定のプロパティ削除 オブジェクト型とは 以下の様な「{}」で囲われたKeyとValue（プ…
目次 async（非同期処理） await（同期処理） 非同期処理と同期処理まとめ async（非同期処理） 関数の前に「async」を付ける事で、非同期の関数になります。 そもそも、非同期とは順番を待たずに後ろで処理をしておくという状態です。 非同期にする事で、AP…
目次 九九をconsole.tableで表示する 画面上にTableタグで九九を表示する 九九をconsole.tableで表示する コンソールに以下の様な出力が行われます。 ソースコードは以下です。 <button type="button" onclick="consoleAction()">コンソール表示</button> <script> function consoleAction(){ var arrayLeft = [1, 2, 3, 4, 5, …
目次 toLocaleStringで3桁カンマ区切り 正規表現で3桁カンマ区切り toLocaleStringで3桁カンマ区切り 以下の様に数値型のデータに「toLocaleString」関数を使用することで、３桁毎にカンマ区切りされたデータが出力されます。 <script> const target = 100000000; co</script>…
データ保存方法の違い 比較項目CookieSessionStorageLocalStorage容量4KB5〜10MB（ブラウザ、環境依存）5〜10MB（ブラウザ、環境依存）保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える保存場所…
■はじめに 2つ以上の配列があり、A配列にB配列の要素が重複しているか？重複している場合はどれが重複しているのか？ を調べる方法を記載します。 「filter」関数を使用しての実装になります。 ■手順 A配列にB配列の要素重複確認 const arrayA = ['Apple', '…
■手順 以下の関数の第一引数にコピーしたい文字列を渡すことでクリップボードへコピーできます。 function copyText(target){ // コピー用の仮テキストエリア作成 const txtarea = document.createElement("textarea"); txtarea.textContent = target; // bo…
■はじめに ピュアなJavaScriptを使用したHTMLの要素の取得方法と、親子要素の取得方法を記載します。 ■HTML要素の取得方法 以下のHTMLを元に、要素を取得する方法を記載します。 <div id="sample" class="test"> </div> 取得方法は以下 //タグ指定での取得 document.getElementsByTagName('div');…