目次

一般 2023年～2024

  1. 空判定関数
  2. 数値チェックの検証 | 数字チェック | isNaN
  3. 汎用的な数値変換関数 空文字やNaNにも対応
  4. クラスの継承 | スーパークラス, 基本クラス, サブクラス, extends
  5. if文 ワンライナー → let x = animals[animal_value] ?? 0;
  6. submit時、form内に存在する全入力要素のバリデーションを検知する
  7. Axiosとcsrf-cookieにおけるSPAの不具合対策 | GETリクエストは正常なのにPOSTリクエストが419エラーになる | Laravel | sunctum

Vue3.jsの覚書

  1. Vue.jsをnpmでインストールして、<script>で読み込む

一般 2014～2022年

  1. デバッグ方法
  2. メモリ解放の方法
  3. チェックボックスにチェックを入れる方法
  4. 数値を文字列化する
  5. 文字列を数値化する
  6. 文字列を検索し、その位置を取得
  7. 極小値と極大値（Number.MIN_VALUE、Number.MAX_VALUE）
  8. 覚書：連想配列（オブジェクト）に要素を追加
  9. filter（フィルター）の使い方
  10. SELECTのオプション要素にリストの値をセットする
  11. 動的にセレクトボックスの選択肢を変更する。 | SELECTの動的変更
  12. 重複チェックをfilterで行う
  13. JSON文字列化とパース
  14. 2次元配列の行列を入替
  15. 2次元配列の重複チェック
  16. サブミットのキャンセルと注意点
  17. 連想配列から最初のキーを取得
  18. Chromeでクッキーを確認する方法
  19. 文字列を配列化する
  20. 連想配列（オブジェクト）の要素数を取得する方法
  21. HTML(JS)だけでCSVファイルをダウンロード
  22. 複数ファイルダウンロード | HTML5版
  23. BPG画像ファイルを表示する | bpgdec8b.js
  24. JSでリロード | location.reload(true);
  25. メールアドレスからドメインを採取する関数
  26. 連想配列の存在確認
  27. IE8で使えない関数と代替手段 |trim,indexof,onchange
  28. 数値を2桁固定の文字列にする。(例 3→03)
  29. オブジェクト（連想配列）の件数を取得する
  30. jqPlotグラフのダウンロード
  31. img要素の画像をcanvas要素にコピー
  32. 画像ファイルを直接canvas要素へ書き出す
  33. ローカルストレージとセッションストレージ | localStorage,sessionStorage
  34. 現在URLを取得
  35. クエリを除いたURLを取得
  36. 現在のURLからドメイン部分を抜き出す
  37. プルダウンメニュー
  38. URLのサニタイズ | url sanitize
  39. 連想配列（オブジェクト）から指定キーとそのデータを削除する
  40. ファイル名から拡張子を取得する
  41. XSSサニタイズ
  42. 改行コードをBRタグに変換する
  43. JSONからHTMLテーブルを生成する | JsonToTable.js
  44. カラーピッカー.jsの使い方 | cpick.js
  45. 置換と全置換 | replace
  46. cssをJavaScritで切り替える
  47. JSクラス内のコールバック関数内で、自分のメンバやメソッドにアクセスする | コールバックにあらかじめ引数を渡す | バインド(bind)
  48. ワーカーログクラス | LogForWorker
  49. 文字列から記号を取り除く
  50. URLからホスト・ドメインを取得する
  51. JavaScriptでサブミットする
  52. テキストエリアに貼り付けたExcelデータをJSONコード化する
  53. 数値範囲入力のUI noUiSlider
  54. livipage.js | ページ内リンク先プレビュー
  55. URLエンコード | encodeURIComponent
  56. 印文字から左側および右側の文字を切り出す
  57. 選択状態のテキストを取得 | jQuery.selection
  58. テキストエリア内にて選択状態のテキストを取得 | jQuery.selection
  59. テキストエリアにアンドゥ機能とリドゥ機能を組み込むundo_a.js | Undo,Redo
  60. JavaScriptのクラスその1
  61. JavaScriptのクラスその2
  62. JavaScriptのクラスその3
  63. JavaScriptのクラスその4 | 基本クラスの継承
  64. JavaScriptのクラスその5 | ES6版
  65. クラス存在チェック
  66. クラスその6 機能テンプレート
  67. クラスその7
  68. HTMLファイル（自身）の更新日を取得
  69. テキストエリアの全選択
  70. テキストエリアの部分範囲選択
  71. 要素内のコンテンツをPDF変換する | jsPDF
  72. テキストエリア内でタブ入力する | tab_input_k.js
  73. URLからクエリを抜き出す | GETパラメータ
  74. 現在ページのURLクエリを取得する | GETパラメータ
  75. 約時変換 | UNIXタイムスタンプから適切な単位（年月分秒のいずれか）で返す
  76. SimpleAjaxFormK.js | Ajax簡易入力フォーム
  77. SectionEditK.js | div内の節文を編集可能にし、その節文をAjaxで送受信する
  78. アップロードJPEGファイルからExifを取得 | jquery.exif.js
  79. サーバー上のjpegからExif情報を取得 | jquery.exif.js
  80. Yahooキーフレーズ
  81. WikipediaのAPIをajaxで利用する | MediaWiki API
  82. 変数の型を調べる | typeof
  83. 文字列から先頭の１文字を取得する
  84. 先頭の一文字を削除する
  85. 文字列から末尾の１文字を取得する
  86. 末尾の一文字を削除する
  87. 連想配列内のデータをまとめてXSSサニタイズ
  88. オブジェクト型データのダンプを取得
  89. 指定個数のタブスペースを作成する関数
  90. プロトコルおよびホスト名を取得 | location
  91. まとめて変数宣言
  92. return function | 無名関数を返す
  93. CakePHPのユーザー認証状態をAjaxで取得する
  94. 編集モードと一般モードの切替関数
  95. 文字列をにパース
  96. スネーク記法をキャメル記法に変換する
  97. キャメル記法をスネーク記法に変換する
  98. テーブル名からモデル名を作成
  99. モデル名からテーブル名を作成する
  100. 画像を重ねて表示
  101. 画像を重ねて表示 | 文字も重ねる
  102. 画像を重ねて、1枚の画像としてIMG要素に表示
  103. 画像を重ねて、1枚の画像としてダウンロードする
  104. 画像を重ねて、1枚の画像としてダウンロードする | ファイル名指定可能
  105. 画像を重ねて、1枚の画像とし、Ajaxでサーバーに送信する
  106. TableDataK.js | テーブル要素からフィールドを指定してデータを取得する
  107. カテゴリ連動型SELECT | CSelectLinkage.js
  108. ラジオボタンのイベント挙動を調査
  109. ラジオボタンを扱いやすくする方法 | ラジオボタンをhidden要素と連動する
  110. ラジオボタンをhidden要素と連動する | リフレッシュ
  111. name属性名とvalueを指定してラジオボタンにチェックを入れる
  112. 親要素からフィールドリストを指定してエンティティを取得する | GetEntityFromParent.js
  113. ファイルのソースコードを表示する
  114. onkeypress属性、onkeydown属性、onkeyup属性を組み込める要素
  115. データを指定キーでソートする
  116. エンティティリスト型のデータからHTMLテーブルを生成
  117. テーブルの行を入れ替えることによる並べ替え | ExchangeTr.js
  118. 複数選択SELECTと選択順でデータ取得
  119. Ajax送信データの実体参照エスケープ
  120. 要素オブジェクトから自分自身のタグを含めたHTMLコードを吐き出す
  121. ファイル存在チェック
  122. 文字列を末尾から置換する
  123. 一意値（ユニーク値）を取得する
  124. 関数の存在チェック
  125. 文字列の関数名を実行する（evalを使わない）
  126. データのグループ化
  127. 文字列の関数名が存在するかチェックする | evalは使わない
  128. ImportFu.js | インポートに特化したファイルアップロード
  129. SELECTにサイズ(size属性)をセットしたとき、スクロールを選択中の位置へ
  130. スクロールの位置
  131. スクロールを相対的に移動させる | scrollBy
  132. SELECTのOPTION要素部分を再作成する
  133. ツリーデータの各ノードへ、それぞれの子孫数を数えてセットする
  134. 配列の重複を連番化しつつ昇順になるようシフトする
  135. 新しいタブ（またはウィンドウ）でページ遷移する | window.open(url, '_blank');
  136. ページ遷移 | window.location.href = URL
  137. スマホ（端末）とPCを判別
  138. デバイスによるテーブル型入力フォームの切替 | PC版とスマホ版（SP版)の切替
  139. HTML5の進捗バー | progress
  140. undfinedを暗黙数値変換するとnull判定ではじかれる
  141. 要素の縦幅と横幅の取得検証
  142. HTMLテーブルに行を追加（挿入）
  143. 参照を切らずに配列を初期化する（配列を再生成せずに初期化）
  144. 配列の値をすべて0でリセット
  145. オブジェクトにキーが存在するか判定する | in,hasOwnProperty
  146. DateTimePicker.jsの使い方
  147. 要素を別の処理で書き換えたら、参照先の要素オブジェクトにも反映されるか？
  148. スリープ関数
  149. バックグランドの並列処理 | WebWorkerの使い方
  150. 要素に設定されているすべてのCSSプロパティを取得する
  151. 容量サイズの数値を適切な単位付き数値に変換する（Byte,KB,MB,GB,TB)
  152. 数値から桁数を取得する
  153. JavaScriptの旧覚書
  154. TR要素のスキマに編集フォーム要素を移動
  155. DOM要素をIMG画像として書き出し、さらに画像ダウンロードする
  156. 入力フォームの各input要素にEnterキー押下イベントを組み込む
  157. wysihtml5_jsによるリッチテキスト
  158. データidを指定して行要素を取得する
  159. DOM構築直後のイベント | DOMContentLoaded
  160. Ajax送信不具合、「&」記号対策 | データ中の「&」を「%26」に一括サニタイズ
  161. 折り畳み式テキストエリア
  162. メモリを確認する | performance.memory
  163. リクエスト分散バッチ処理【シンプル版】 | ReqBatchSmp.js
  164. リクエスト分散バッチ処理
  165. 画面間におけるローカルストレージの値共有を検証する
  166. ローカルストレージのキーにURLを用いる
  167. 全角を半角に変換する
  168. 手入力数値の数値化および入力チェック | 全角数値を半角数値に変換
  169. 移動範囲を要素内に限定したドラッグ | jQuery UI Draggable
  170. 小数点以下の桁数を固定する | n.toFixed(4);
  171. 金額3桁カンマ区切り | Number(value).toLocaleString();
  172. QRコード作成 | jQuery.qrcode.js
  173. Div要素内のコンテンツを画像化する | html2canvas.js
  174. グローバル変数の存在チェック
  175. 整数チェック | バリデーション
  176. ユーザーエージェントを取得する
  177. クラスとstaticメソッド
  178. autocomplete オートコンプリート | 入力ごとに入力候補を表示する
  179. サインイン | メールを介した新規アカウント登録の資料
  180. テキストエリア(textarea)の高さ自動調整
  181. YES NO ダイアログ
  182. QRコード読込検証 | jsQR.jsの拡張クラスJsQrEx.js
  183. モーダル表示
  184. ページネーション(Bootstrap4対応) | PaginationRain.js
  185. 時間差ポップアップ | ポップアップを追加してブラウザリロードした後、ポップアップを表示 | PopupLion.js
  186. モーダル化ライブラリ | modal_cat.js
  187. ポップアップ | PopupCat.js
  188. 自身のクラス名を取得する | this.constructor.name
  189. 数値チェック | 数字チェック | 自然数を正規表現でチェックする
  190. datalistの検証: 値取得, jQueryで操作, oninput,onchange, onblur, onclickの動作確認
  191. 検索機能付きセレクトボックス | select2
  192. datalistによるSELECTのような使い方 | サジェスト（入力候補）と実際の入力値が異なる場合



文字列操作

  1. 数値を文字列化する
  2. 文字列を数値化する
  3. 文字列を検索し、その位置を取得
  4. 文字列を配列化する
  5. 数値を2桁固定の文字列にする。(例 3→03)
  6. 文字列から記号を取り除く
  7. 文字列から先頭の１文字を取得する
  8. 先頭の一文字を削除する
  9. 文字列から末尾の１文字を取得する
  10. 末尾の一文字を削除する
  11. 文字列をにパース
  12. 2つの印文字に挟まれた文字列を取得する
  13. 文字列を左側から印文字を検索し、左側の文字を切り出す
  14. 文字列を左側から印文字を検索し、右側の文字を切り出す
  15. 文字列を右側から印文字を検索し、左側の文字を切り出す
  16. 文字列を右側から印文字を検索し、右側の文字を切り出す
  17. 全角数字を半角数字に変換する
  18. 文字列からタグを除去

配列とObject

  1. 連想配列（オブジェクト）に要素を追加
  2. 2次元配列の行列を入替
  3. 2次元配列の重複チェック
  4. 連想配列から最初のキーを取得
  5. 文字列を配列化する
  6. 連想配列（オブジェクト）の要素数を取得する方法
  7. 連想配列の存在確認
  8. オブジェクト（連想配列）の件数を取得する
  9. 連想配列（オブジェクト）から指定キーとそのデータを削除する
  10. 連想配列内のデータをまとめてXSSサニタイズ
  11. 配列から重複を除去
  12. 配列内を検索（存在チェック）
  13. 文字列を改行で分割する
  14. オブジェクトのキーを数値にすると自動ソートされてしまう
  15. オブジェクトのマージ | jQuery.extend()メソッドの代わりにES2015のObject.assign()メソッド
  16. 配列の先頭要素を削除
  17. 配列から指定要素を削除する | splice
  18. 配列の要素を入替 | 配列の要素を入れ替え

日付

  1. 現在日時、現在日付、現在時刻を取得する
  2. UNIXタイムスタンプと日時を相互変換
  3. 2つの日付の日数差
  4. 日数差を適切な単位（年月日時分秒のいずれか）で返す
  5. 時刻入力のタイムピッカー | jQuery UI Timepicker
  6. 時刻入力のタイムピッカー(時のみ)
  7. 日時のn秒後であるかチェックする
  8. 日付から年、月、日をそれぞれ取得する
  9. 日付から曜日を取得
  10. 日付の加算と減算
  11. 日付、時刻、日時オブジェクトを指定フォーマットに変換する
  12. 月初日を取得
  13. 月末日を取得
  14. 日付の引き算（日付の差分を求める）
  15. 日付をyyyy-mm-dd型に変換する
  16. 年月をyyyy-mm型に変換する
  17. 年月による日付範囲入力 | RangeYm.js
  18. 年月による日付範囲入力【拡張】 | RangeYmEx.js
  19. 時分秒からDateオブジェクトおよび時分を取得

JQueryの覚書

  1. 読込イベント　｜　$( function() {　｜　read
  2. リンク遷移を無効にする方法
  3. ラジオボタン
  4. エレメント（要素）の表示切替と表示状態判定
  5. マルチセレクト（jQuery UI MultiSelect Widget）
  6. 特定の属性値を持つエレメントにアクセス
  7. 特定タグを持つ先祖をさかのぼる
  8. 一覧のチェックボックスをまとめて、すべて選択
  9. テキストエリアの文字数を数える
  10. JQuery | セレクト要素(SELECT要素）から値を取得、またはセット
  11. JQuery | チェックボックスから値を取得
  12. JQueryの要素存在確認
  13. 所定位置までジャンプ | ページ内遷移
  14. 列の表示、非表示を切り替える
  15. テーブルの列表示切替 | clm_show_hide.js
  16. テーブルの列表示を切り替える関数
  17. ループ | $(".xxx").each
  18. チェックボックスを配列として扱う
  19. 連想配列（オブジェクト）のマージ | $.extend(a1, a2);
  20. クリックされた要素のインデックスを取得する。 | 何番目の要素であるか？
  21. 対象要素のインデックス（順番）を取得する
  22. イベントリスナーの登録
  23. イベントの発火
  24. カラーピッカー | farbtastic
  25. オブジェクトのクローンコピーとマージ | jQuery.extend()
  26. フェードインとフェードアウト | fadeOut,fadeIn,fadeTo
  27. jQuery UI ダイアログ | シンプルひな形
  28. JQuery UIによる確認ダイアログ
  29. document.getElementByIdとの等価オブジェクトを取得する | get(0)
  30. 要素のサイズ変更 | jQuery UI Resizable
  31. jQuery UIのいくつかの機能をスマホ等に対応させる | jquery.ui.touch-punch.js
  32. cssへセットと除去
  33. 要素の縦横サイズを取得 | width,height,outerWidth,outerHeight
  34. 要素の位置を取得およびセット| position,offset
  35. マウスオーバーイベント | jQuery hover
  36. リストの並び替え | jquery-ui-sortable
  37. キーボードのイベント| keydown keypress keyup
  38. フォーカスしたときに値を全選択する
  39. 子要素を取得する
  40. 第一の子要素を取得 | 長男要素の取得
  41. タグ名を取得する
  42. 別ページである外部HTMLからDOMを取得
  43. HTML文字列をDOM扱いで検索 | $.parseHTML
  44. オリジン許可を必要としないクロスドメイン | jquery.xdomainajax.js | スクレイピング
  45. スライドアニメーションによる画面要素の切替 | SlideK.js
  46. 要素の存在チェック
  47. 弟要素を追加および取得
  48. 兄要素を追加および取得
  49. 兄弟要素を取得する
  50. テーブルから対象要素の行番（インデックス）を取得する
  51. name属性で取得する
  52. 複数要素である場合の $('#xxx').text() を検証する
  53. 対象文字列をID属性とセレクタに分類する
  54. 兄弟要素の末尾を取得 | $(xxx).eq(-1)
  55. プロパティ（属性）の追加および除去 | prop,removeProp
  56. jQuery.UI | テーブル行を並べ替え
  57. jQuery.UI | テーブル行を並べ替え：コールバック
  58. 表示順の入れ替え
  59. 要素を削除する | jquery.remove
  60. 要素数を取得する | jQuery
  61. 指定要素を数える | jQuery
  62. テーブルの行数を数える
  63. テーブル行内の任意要素から行番（行インデックス）を取得する
  64. テーブルから最初の行要素（インデックス=0）を取得する
  65. jQueryオブジェクトであるか判別する
  66. jQuery.uiが読み込まれていなければ読む込む
  67. jQueryとjQuery UIのバージョンを調べる
  68. オリジナル属性を選択する
  69. オブジェクトとして保持してから操作したほうが処理は速い
  70. jQueryオブジェクトに紐づいている要素が変更されたとき、jQueryオブジェクトにも変更が反映されているか？
  71. 複数要素からインデックスを指定して各要素にアクセス、および複数要素の要素数の取得
  72. class属性の追加および削除
  73. CSSをグループ化し一括でCSS適用する
  74. 「insertAfter」による要素移動を検証 | イベントは消えていまいか
  75. class属性の確認、追加、削除 | hasClass,addClass,removeClass.toggleClass
  76. 指定文字列を一部でも含むすべての要素を選択する | :contains
  77. 1つでも条件式に一致するならtrueを返す | .is
  78. カルーセル jQueryプラグインSlickの使い方
  79. Slickのリフレッシュ | 動的に内容が変化した時
  80. Slick | テキスト選択ができない状態を解除する
  81. スマホでjQuery.uiのタッチを有効にする方法 | jquery.ui.touch-punch.min.js
  82. クリックイベントの除去
  83. jQuery要素とイベント削除、ならびにjQuery要素の再生成と再イベント登録

非同期処理

  1. 非同期で実行する | setTimeout
  2. setTimeoutをキャンセルする | clearTimeout
  3. スレッドやタイマーのように間隔をあけて定期的に処理を行う | setInterval
  4. ES6のクラス版のsetIntervalによるスレッド、バッチ処理、バックグラウンド
  5. jQuery:複数の非同期通信を制御する | $.Deferred
  6. JSファイルを非同期で読み込む | async属性の挙動実験 | <script async>
  7. コールバック地獄対策 | Promise
  8. クラス版のPromiseの使い方
  9. Promiseのエラーキャッチ | rejected
  10. ループ型非同期処理を同期的に処理する
  11. 複数の非同期処理がすべて終わったらコールバックを実行(原始的手法)
  12. 複数の非同期処理がすべて終わったらコールバックを実行(汎用)

Vue.jsの覚書

  1. Vue.jsの一覧表示、簡易検索、ソート
  2. CRUD
  3. 要素を複製してもvueのデータバインドは引き継がれるか？
  4. Vue.jsの基本
  5. 外部からVue.jsのデータを変更する
  6. Vue.jsのフィルタ
  7. Vue.jsのメソッド
  8. Vue.jsの表示切替 | v-if | v-show
  9. Vue.jsとjQueryの連携 | 外部によるinput要素の値変更をvue.jsに反映 | dispatchEvent
  10. Vue.jsのラジオボタン | リストからラジオボタンを生成
  11. vue.js | チェックボックスとラジオ
  12. vue.js | 複数チェックボックス
  13. vue.js | セレクトボックス SELECT
  14. vue.js | セレクトボックス 選択肢を追加
  15. vue.js | 動的複数チェックボックス
  16. v-forとinput要素へのbind
  17. v-bindとv-modelの違い
  18. vue.js | セレクトボックスとマッピング表示
  19. vue.js | v-ifの使い方
  20. vue.js | 全データループ
  21. Vueのappからバインドされていないプレーンなデータを取得する
  22. vue.jsによるメンバー登録フォーム | 新規登録フォーム, 会員登録, 利用登録, ユーザー登録
  23. Vue.jsの要素の表示切替
  24. Vue.jsのクリックイベント
  25. HTMLエスケープしないでバインドする。 | XSSサニタイズを行わないバインド | v-html
  26. Vue.js | テキストエリア
  27. 動的に後からvueオブジェクトのdataにバインドを追加する
  28. vue.jsでバインドしている要素群をjQuryで移動させてみる
  29. vue.jsによるテーブル
  30. vue.jsによるテーブル | 追加と削除
  31. vue.jsによるテーブル | 行中にセレクトボックスあり(SELECT要素)
  32. vue.jsによるテーブル | 行中にセレクトボックス その2
  33. セレクトボックスのチェンジイベント | SELECT onchange
  34. Vue.jsのラジオボタン
  35. Vue.js | ラジオボタンのクリックイベント
  36. vue.jsのバリデーション | 基本
  37. vue.jsのバリデーション | 応用
  38. vue.jsとjQueryの競合により、ファイル要素のチェンジイベントに不具合
  39. Vue.js | style属性を制御 | CSS
  40. 文字を入力するたびにイベント |Vueのonclickとonchange | v-on:click v-on:change v-on:input
  41. 要素のインナー(innner)に値を表示 {{hoge}} v-html, v-text
  42. Vue.js 繰り返しの検証 | iterator イテレータ ループ と新規入力フォーム
  43. Vue.js 入力フォーム動的追加 | 一覧型入力フォームの行追加
  44. Vue.js バージョン表示
  45. Vue.js Laravelのbladeとの競合対策 → {{}}
  46. Vue.js 1万件データの検証 | Vue.jsの限界
  47. Vue.jsをnpmでインストールして、<script>で読み込む

D3.jsの覚書(v4)

  1. D3.jsの基本 | 円を描く
  2. 矩形シェイプを描く
  3. シェイプをグループでまとめる
  4. 文字列をリンク化してみる
  5. リンクをBootstrapでボタン化してみる
  6. ラインを描画する
  7. 半透明のラインを描画
  8. ベジエ曲線
  9. 文字列の幅取得
  10. 多次元配列のデータセットを出力
  11. スケール
  12. 矢印
  13. d3.jsで描画したチャートをSVG形式でダウンロード

要素関連の一律化

  1. class属性またはname属性からフィールド名を取得する
  2. 親要素内からname属性またはclass属性を指定して要素を取得する
  3. 親要素内からname属性またはclass属性を指定して値を取得する
  4. タグ種類を問わずに要素から値を取得する | getValueEx
  5. 親要素からclass属性、name属性、id属性を問わずに一致する要素を探す
  6. フィールドを指定して親要素から値を取得する
  7. 要素の種類を問わずに値をセットする | _setValueEx
  8. フィールドを指定してフォーム要素（親要素）に値をセットする | _setValueFromForm
  9. セレクタから識別子「#」「.」を取り外したコードを取得する

バリデーション

  1. vue.jsのバリデーション | 基本
  2. vue.jsのバリデーション | 応用
  3. 半角英数字チェック
  4. カタカナのバリデーション
  5. 日付チェック | isDate()
  6. 年月チェック | isYM()
  7. 数値範囲入力チェックのバリデーション
  8. 文字数チェック | isMaxLength()
  9. 自然数チェック
  10. 正規表現
  11. 正規表現 if文の省略記法
  12. 正規表現 | パスワードバリデーション
  13. PwValidK.js パスワードバリデーションK
  14. 会員登録フォームのバリデーション | jquery.validate.js

ファイル関連

  1. File upload in AJAX | Ajaxファイルアップロード | 基本
  2. File upload in AJAX | Ajaxファイルアップロード | ファイルチェンジイベント時にアップロード
  3. File upload in AJAX | Ajaxファイルアップロード | 複数のファイル要素
  4. File upload in AJAX | Ajaxファイルアップロード | 複数ファイル
  5. File upload in AJAX | Ajaxファイルアップロード | 一般的な値データも同時に送信
  6. Image file upload in BASE64 format | Base64方式の画像アップロード
  7. 拡張子によるバリデーションでファイル情報を入力チェック(複数ファイルアップロードに対応）
  8. File API | ファイル名、サイズ、MIME、更新を取得
  9. File API | テキストファイルからテキスト文字列を取得
  10. アップロードファイル要素のクリア（リセット）
  11. 画像を重ねて、1枚の画像とし、Ajaxでサーバーに送信する
  12. アップロードファイルのバリデーション | UploadFileValidation.js
  13. 任意要素にドラッグ＆ドロップによるファイルアップロード機能を組み込む
  14. 画像ファイルアップロード | 画像サイズ(width,height)を取得する
  15. 画像ファイルアップロード | プレビュー,DnD
  16. 画像プレビューの表示 | ES6対応
  17. ファイルアップロードを拡張し、進捗バー、DnD、複数ファイルに対応させる
  18. ファイルアップロード拡張クラス | FileuploadsK.js
  19. JavaScriptでバイナリデータを扱う
  20. Image file upload in BASE64 format | Base64方式の画像アップロード
  21. img要素にデータURLスキームを指定して画像を表示する
  22. XMLHttpRequestでサーバー上のファイルを読み込む
    1. サーバー上のファイルからBlob,arraybufferを取得する方法
    2. サーバー上のファイルからBlobを取得する
    3. XMLHttpRequestでファイルを読み込みMIME,サイズ,更新日,ファイル名を取得する
    4. XMLHttpRequestでファイルを読み込みヘッダー情報を出力する
  23. FileReaderについて
  24. データURIスキームとは | Data URL Scheme
    1. データURLスキームをimg要素にセットして画像表示
    2. データURLスキームをa要素にセットしてダウンロードリンクを作成
    3. データURLスキームからBASE64に変換する
    4. BASE64からデータURLスキームに変換する
  25. base64とは
  26. Blobとは
  27. 基本的なBlobの作成
  28. Blob URL Schemeとは
  29. Blob URL SchemeとData URL Schemeの違い
  30. MIMEとコンテンツタイプ
    1. Content-Type | コンテンツタイプ
    2. MIMEのContent-Transfer-Encoding
  31. FileReaderでBlobを読み取る
  32. UTF-8文字列からbase64に変換する
  33. BASE64とMIMEコンテンツタイプからBLOBを作成する
  34. BASE64をテキストファイルとしてダウンロードする
  35. canvasからBASE64を作成する
  36. MIMEと拡張子のマッピングデータを取得
  37. ディレクトリとファイル名を連結してファイルパスを作成
  38. CSV文字列を2次元配列に変換(ダブルクォート、改行に対応)
  39. CSVファイルアップロードとプレビュー表示
  40. file入力要素 | HTMLのonchangeで画像プレビューを表示する
  41. ファイルパスからファイル名を取得する
  42. 画像を同期的にプリロードする
  43. 複数画像をすべてプリロードしたらコールバックを呼び出す

Canvasの覚書

  1. Canvasの基本
  2. 文字を描画する
  3. 背景をクリアする
  4. テキストの横幅を取得する
  5. 改行を含むテキストを描画する
  6. 半透明図形を描画
  7. 矩形を描画
  8. 画像ファイルから描画する
  9. Canvasを画像ファイルとしてダウンロードする

ES2015(ES6)の目次

  1. ES2015のクラスと基本
  2. 仮想DOMとは | Virtual DOM
  3. ES6のthisとjQuery.eachのthisが競合してしまう問題
  4. ES6のthisとjQuery.clickのthisが競合してしまう問題
  5. ES6のヒアドキュメント
  6. クラスの継承
  7. ES6クラス内のファイルアップロードイベントで「this」が重複して使えなる問題
  8. 改行文字列と埋込を扱えるテンプレートリテラル | Template literal

Axiosの目次

  1. 基本

パネル

bootstrapのパネルを活用
  1. メニュー付パネル(★おすすめサンプル 2019)
  2. ドラッグとリサイズが可能なパネル
  3. 埋込と子画面を切り替えられるパネル
  4. テキストエリア付パネル
  5. プルダウン・パネル（オリジナル）
  6. 移動パネル ＆ Canvas
  7. パネルをドラッグで動かしたりリサイズする
  8. パネルをドラッグで動かしたりリサイズする | 埋め込み切替機能付き
  9. プルダウン・パネル
  10. パネルX【プルダウン・ドラッグ・リサイズ】
  11. パネルX【画像】

A-Frameの覚書

  1. A-Frameで画像を表示 | 位置パラメータの説明

html2canvasの覚書

  1. A-Frameで画像を表示 | 位置パラメータの説明
  2. DIV要素を画像化(pngファイル)、さらにサーバー側（バックエンド）に保管

WebRTCの覚書

  1. カメラとマイクを起動

サインイン（新規アカウント登録）の覚書

  1. サインイン | メールを介した新規アカウント登録の資料
  2. vue.jsによるメンバー登録フォーム | 新規登録フォーム, 会員登録, 利用登録, ユーザー登録
  3. 会員登録フォームのバリデーション | jquery.validate.js

ServiceWorkerの覚書

  1. ServiceWorker（サービスワーカー）とは何か
  2. ServiceWorkerの基本 | messageイベント
  3. fetchイベント

Fetch APIの覚書

  1. fetchの基本と概要

オリジナルライブラリ

  1. showModalBigImg
    モーダル大画像表示モジュール
  2. CSelectLinkage.js
    カテゴリ連動型SELECT | 2つのSELECTボックスの連動
  3. DatalistSelectEx.js
    datalist型テキストボックスをSELECTボックスに近い感覚で扱えるようにするクラス | 中途版
  4. FileUploadK.js
    DnD（ドラッグ＆ドロップに対応。
    アップロード区分のドレスアップ。
    エンティティなどのデータも一緒に送信。
    複数のファイルをアップロードできる。
    複数のファイルアップロード要素に対応。
    進捗バーの表示
  5. SlideK.js
    複数要素をローテーションしながら、スライド表示する
  1. ホーム
  2. プログラミングの覚書目次