Javascript サンプル集
javascriptを使用した、使えそうなサンプルコードをまとめたサンプル集です。基本的にはソースをまるまるコピーアンドペーストで利用できると思います。是非、ご活用下さい。
javascriptの実行方法
javascriptを、実行して動作をブラウザで確認する方法です。
javascriptの基礎
javascriptの基礎的な内容をまとめてます。
サンプル集
文字列操作
文字列の作成方法や操作方法に関するサンプルコードとなります。
- 文字列を置換する
- 大文字・小文字を区別せずに置換する
- replaceAllを使用して全て置換する
- 文字列を結合する
- 文字列の一部を抽出する
- 文字列の最後の1文字だけを抽出する
- 文字列から最後の1文字だけ削除する
- 文字列の先頭に指定した文字列を挿入する
- 文字列の後方に文字を加える
- 文字列の先頭にある空白を除去する
- 文字列の最後にある空白を除去する
- 指定した文字以降の文字列を削除する
- 文字列から開始位置と文字数を指定して抽出する
- 文字列に指定した文字が含まれている位置を取得する
- 文字列内から指定した文字列の1つ前の1文字を抽出する
- 文字列内から指定した文字列の後ろにある1文字を抽出する
- 指定した範囲の文字列を選択する
- 文字列を除去する
- 先頭から指定した数の文字列を削除する
- 後ろから指定した数の文字列を削除する
- 文字列を数値型に変更する
- 文字列を数値に変換可能か判定する
- 数字を文字列として連結させる
- 文字列を指定した回数繰り返す
- 文字列を1文字ずつ表示する
- 文字列の文字数をカウントする
- 文字列を逆順にする
- 文字列内で指定した文字の出現数をカウントする
- 文字列のバイト数を取得
- 文字列からASCIIコードに変換する
- 文字列から数値を全て除去する
- ASCIIコードを文字列に変換する
- ランダムな文字列を指定した桁数生成する
- 文字のUnicodeコードポイントを取得する
- Unicodeコードポイントから文字列を作成する
- base64に日本語をエンコードする
- for-ofでサロゲートペア文字列も抽出する
- サロゲートペア文字を考慮してUnicodeコードポイントを取得
- charAtを使用せずに文字列から指定した1文字を取得する
- 全角文字は2文字で半角文字は1文字としてカウントする
- アルファベットの全角を半角に変換する
- アルファベットの大文字・小文字を判定する
- 文字列を\nを使用せずに改行する
- \nをエスケープせずに文字列として扱う
- 文字列のエスケープ(escape)を行う
- 文字列のアンエスケープ(unescape)を行う
- 文字列を日付に変更する
- 文字列を句読点単位で分割する
- 文字列をtrue・falseとして利用する
- boolean型「true・false」を文字列として扱う
- 小文字⇔大文字の変換を行う
- 先頭の文字だけを大文字に変換する
- アルファベットの大文字ごとにスペースで区切る
- アルファベットの大文字小文字の区別をせずに指定した文字が含まれているかを判定する
- アルファベットの大文字ごとに文字列を分割する
- includesで大文字・小文字を区別せずに文字列に指定した文字列が含まれているかを判定する
- 文字列の先頭から指定した文字列が含まれているかを判定する
- indexOfを使って文字列が含まれているかを判定する
- 改行を全て削除する
- 区切り文字を指定して文字列を分割する
- 文字列を改行ごとに分割する
- 改行を「br」タグに変換する
- 文字データをドラッグ＆ドロップする
- 文字列内で一番使用されている文字の文字数を抽出する
- htmlタグ内の文字列を変更する
- alert内の文字列を改行する
- lengthプロパティ使用時に1文字が2文字とカウントされる場合の対処法
- 文字列が数値であるかを判定する
- 文字列から数値のみを抽出する
- 文字列内で最初に見つかった数値を取得する
- 文字列内で最後にある数値を取得する
- 空文字であるかを判定する
- 指定した文字列が含まれているか判定する
- シングルクォーテーションを文字として扱う
- 文字列内にあるバックスラッシュとスラッシュを削除する
- 複数個の空白を1つに変更する
数値操作
数値の作成方法や操作方法に関するサンプルコードとなります。
- 割り算の余りを求める
- 割り算の結果を整数部のみ取得する
- 割り算の結果と余りを両方取得する
- 端数がでないように割り算を行う
- 数値を整数部と小数部に分ける
- Numberを使用せずに数値型に変換する
- 指定した桁数で数値を文字列に変換する
- シフト演算子を使って2の累乗計算を行う
- 消費税込みの価格を求める
- 正の数か負の数を判定する方法
- 整数であるかを判定する
- parseIntを使わないで16進数を10進数に変換する
- 数値を指数表記にして文字列で返す
- Math.truncを使用して小数点以下を切り捨てる
- 絶対値を計算して表示する
- 数値判定を行う
- 偶数と奇数を判定する
- 小数であるかを判定する
- 数値から一番最後の数値を取得する
- 数値が0(ゼロ)でないかを判定する
- 小数点以下を四捨五入する
- 小数点以下の値を切り上げて表示する
- 小数点以下の値を切り捨てて表示する
- 小数点以下の値だけ抽出する
- 小数の計算結果がおかしくなる
- ランダムな整数を生成する
- 小数点以下の数値に0を加えて桁数を揃える
- 数値の桁数を取得する
- 整数の指定した桁数の数値を取得する
- 小数の桁数を取得する
- 小数の整数部が0の場合の省略して記述する
- 桁数を揃えるため数字の先頭に0を付ける
- ビット否定演算子(~~)を2つ使用して小数の切り捨てを行う
- ビット演算子を使用して四捨五入を行う
- **を使用して累乗を計算する
- 累乗計算に指数を使用する
- 2進数を10進数に変換する
- 10進数をn進数に変換する
- 数値の最大値を取得する
- 数値の最小値を取得する
- 素数であるかを判定する
- 階乗を計算する
- マイナスの場合は「0」に変換する方法
- 円周率を取得する
- 数値を配列に変換する
- 引数を全て2乗した総和の平方根を計算する
- 2乗、3乗等の累乗の値を計算する
- 平方根の値を計算する
- 立方根(3乗)を計算する
- 扇形の長さを求める
- 小数の桁を指定して切り上げを行う
- 三角関数sin（サイン）の値を計算する
- 三角関数cosine（コサイン）の値を計算する
- 三角関数tan（タンジェント）の値を計算する
- 三角関数asin（アークサイン）の値を計算する
- 三角関数acos（アークコサイン）の値を計算する
- 三角関数atan（アークタンジェント）の値を計算する
- 自然対数の底 であるe(ネイピア数)の累乗を計算する
- もっとも近い5の倍数に丸める
- 正確に取り扱える最大・最小の整数値を取得する
- 数値をアンダーバーで区切って見やすくする
- 数値をカンマ付きで表示する
- 数値を文字列に変換する
- 回帰直線を求める
日付操作
配列やオブジェクト操作
正規表現・チェックまたは判定
関数やクラス
console
ブラウザで確認できる「console」関連のサンプルコードとなります。
- 結果がfalseの場合のみconsoleに出力する
- consoleで変数の使用回数をカウントして表示する
- consoleにあるログを全てクリアする
- console.logで複数の変数を１列で表示する
- コードの実行時間をconsoleで計る
- console.logにhtmlをそのまま表示する
- console.logを簡単に記述する
- console.logでJSONデータを見やすく表示する
JSON
JSONの取り扱いに関するサンプルコードとなります。
- JSONオブジェクトの数を取得する
- jsonを繰り返しで使用する
- JSONデータをXMLHttpRequestを使って取得する
- JSONデータをjsのオブジェクトに変換する
- jsonデータを再帰的に表示する
- 2階層あるjsonデータを1次元配列として出力する
- jsonファイルを指定して読み込む
- JSONのパース(解析)がサポートされているかを確認する
- axiosを使ってjsonデータを取得する
- JSONデータであるかを判定する
- JSON.stringifyでSetを使用する
- JSON.stringifyは「undefined」が削除されてしまう
- JSON.stringifyでMapを扱う
リンク
htmlやform操作のサンプルの一覧はこちら
構文の比較やその他の構文はこちら
パフォーマンスを比較した結果の一覧はこちら
エラーメッセージ集はこちら
小ネタやワンライナーはこちら
ライブラリのlodashサンプル集はこちら