Javascript 構文の比較や使用できる構文
javascriptで、構文の違いや、使用できる構文をまとめています。その他に様々なケースで「javascript」を使ってできることをまとめたサンプルコードも記載しております。
構文の違い
使用した構文による動作の違いをまとめてます。
- 変数宣言letとvarの違い
- addEventListenerとonの違い
- sliceとsubstringの違い
- clickとonclickの違い
- everyとsomeの違い
- callメソッドとapplyメソッドについて
- NaNとInfinityとは
- nullとundefinedの比較
- targetとcurrentTargetの違い
- textContentとinnerHTMLとinnerTextの違い
- 変数++と++変数の違い
- ドット演算子とブラケット演算子の違い
その他の構文
javascirptで使用できる構文をまとめてます。
- ===(厳密等価演算子)の使い方
- ${}(テンプレートリテラル)の使い方
- ${}(テンプレートリテラル)をカスタマイズする
- use strictを使用する
- カンマ演算子の使い方
- label構文を使用する
- break文を使用する
- ブロックスコープの使い方
- Symbolの使い方
- mapの使い方
- mapをソートする
- mapのサイズを取得する
- map内の最大値・最小値を取得する
- map内の値を反転して取得する
- mapが空であるかを判定する
- mapであるかを判定する
- mapのkeyから配列を作成する
- mapからjsonに変換する
- setの使い方
- setのサイズを取得する
- Setが空であるかを判定する
- setであるかを判定する
- setを配列に変換する
- set同士を結合する
- setの差分を取得する
- set内に指定した配列が含まれているか判定する
- set内の合計値を取得する
- setからjsonに変換する
- set内の最大値・最小値を取得する
- set同士で同じ値からsetを生成する
- set同士が等しいかを判定する
- setの値を反転させる
- Setを逆順して処理を実行する
- setの値に条件を指定して新しいsetを生成する
- curry(カリー化)の使い方
- 分割代入を使用する
- メソッド定義構文を使用する
- Withステートメントを使用する
- BigIntを使用する
- BigIntをNumberに変換する
- Optional chainingを使用する
- クロージャの簡単な使い方
- モジュールを作成する
- 複数の変数に同じ値を代入する
- try catchを使用する
- throwを使って例外を発生させる
- throw文で例外処理を場合分けする
- 複数行をコメントアウトする
- プロトタイプチェーンを使用してみる
- プライベートプロパティやメソッドを使用する
- メソッドチェーンを作成する
- プライベートメンバを使用する
- Promise.anyで一番初めresolveになった処理を取得する
- Promise.allSettledを使用する
- Promiseであるかを判定する
- 論理否定演算子（!）を使用してtrue・falseを使用する
- 論理和代入演算子(||=)を使用して変数代入を少し省略する
- new演算子のカッコ()を省略する
- ドルマール（$）の使い方
- bindを使ってオブジェクト内のthisを紐付けする
- 変数を動的に作成する
- 変数に括弧をつけてオブジェクトのプロパティを指定して代入する
三項演算子
三項演算子を使用したサンプルコードです。
アロー関数
アロー関数を使用したサンプルコードです。
その他
その他、様々なjavascriptでできることをまとめたサンプルコードとなります。
- 処理にかかっている時間を計測する(performance.now)
- boolean型であるかを判定する
- 全ての空白を除去する
- join時にカンマを削除する
- buttonの色をクリック時に変更する
- 文字の色をanimateで変化させる
- 前と後ろにある空白を全て削除する
- 左側のみか右側のみにある空白を全て削除する
- テキストの選択を禁止する
- プロトコルを取得する
- オンライン・オフライン状態を検知する
- 送信ボタンの二度押しを防ぐ
- 文字列を反転させる
- isConnectedでドキュメントオブジェクトモデル (DOM) に接続されているかを判定する
- フォームに入力した内容をファイルとしてダウンロードする
- Content-Typeを取得する
- 座標を指定して要素を取得する
- リクエスト時間やレスポンス時間を取得する
- テーブルをソート及び検索する
- WebカメラにWeb APIを使用してアクセスする
- 指定した時間後に処理を実行する
- カウントダウンをsetTimeoutとletとfor文で作成する
- setTimeoutの引数に文字列を指定する
- 一定の時間ごとに処理を実行する
- 十二支を求める
- 関数がasyncを使用しているか判定する
- csvデータから指定したカラムに指定した値が含まれているものを取得する
- ファイルのパスからファイル名のみを抽出する
- sleepを自作して待機時間を作る
- linkを使用して任意の文字列にリンクをつける
- 指定したURLの画像が存在するかを判定する
- ファイルを読み込んで内容を表示する
- アクセスしているhtmlファイルの更新日時を取得する
- document.writeで生成したテキストにリンクをつける
- localStorageの簡単な使い方
- sessionStorageの簡単な使い方
- MutationObserverを使ってDOMの監視を行う
- htmlcollectionにアクセスしてDOMを操作する
- DOMParserを使用してhtml要素を追加する
- WebSQLを使用する
- プリミティブ型とオブジェクト型を比較する
- 変数に値が同じであれば一括で代入する
- スタックトレースを出力
- 型を取得する
- typeofを使用せずに型を判定する
- エルビス演算子と同じ処理を実行する
- コールバック関数で指定した条件を満たす最初の値を取得する
- メールアドレスの「@アットマーク」以前の値を取得する
- httpかhttpsであるかを判定する
- URLをエンコードする
- URLのパスを取得する
- URLのパラメーターのみを取得する
- URLのアンカーを取得する
- 現在のページのURLとドメインを取得する
- URLから「#(シャープ)」以降の値を取得する
- URLがlocalhostであるかを判定する
- TOPページであることを判定する
- アクセス中のホスト名を取得する
- onclick実行時に引数に変数やテキストフォームの値を渡す
- ファンクションキーを全て無効化する
- Obfuscatorを使って難読化してみる
- Copyrightの年数を自動取得する
- プライベートIPを取得する
- 手書き風のチャートが作成できるjavascriptライブラリ「roughViz.js」を利用してみる
- 最大公約数を求める
- 最大公倍数を求める
- 共分散を求める
- 中心角を求める
- 和暦を西暦に変換する令和対応のライブラリ「wareki2era」の使い方
- スプレッド構文で任意の可変な値のチェックボックスにチェックをする
- 長い文章を一部表示に変更する
- 拡張子を取得する
- 指定した値をクリップボードにコピーする
- PDFファイルを開く
- 数値を区切り文字（アンダーバー）で区切って使用する
- 形態素解析を実行する
- MACアドレスであるかを判定する
- 西暦を和暦に変換する
- 平米（m2）から坪に変換する
- 摂氏から華氏に変換する
- フィート(feet)からセンチメートル(cm)に変換する
- ヤード(yd)からメートル(m)に変換する
- ヤード表記からメートル表記に変換する
- キロメートルからマイルに変換する
- ガロン (gallon)からリットル(L)に変換する
- ポンド（Pound）からグラム(g)に変換する
- インチ(inch)からセンチメートル(cm)に変換する
- 数値を指定した通貨単位に変換する
- 国コードから国名を取得する
- everyとsomeを空の配列に使用した場合
- uuidを生成する
- ユーザーエージェントを表示する
- 英語の文章を単語単位でアルファベット順に並び替えをする
- ランダムな色を生成する
- 九九を計算する
- トランプを作成する
- キャメルケースに変換する
- アルファベットの母音の数を取得する
- 季節によって処理を分ける
- ダークモードであるかを判定する
- Chart.jsを使って散布図を作成する
- Chart.jsを使って回帰分析の結果をグラフ化する
- underscoreを使って配列の要素をランダムに取得する
- underscoreを使ってforEachと同じ処理をする
- underscoreを使って配列内に指定した値が含まれているかを判定する
- underscoreを使って配列内の値をグルーピングする
- underscoreを使ってオブジェクトの配列をプロパティ値でグループ分けする
- ライブラリ「decimal.js-light」を使用して誤差が発生しない小数点計算を実行する手順
- ライブラリ「marked」使用してmarkdownをhtmlに変換する
- ライブラリ「moji.js」使用して、ひらがなをカタカナに変換する