JavaScript
【JavaScritpt】ブラウザ保存領域にデータを格納するlocalStorageの使い方
JavaScritpでブラウザ保存領域にデータを格納するlocalStorageの使い方をまとめました。 Storageとは Storageはブラウザの保存領域にデータを格納するためのオブジェクトです。 実際にはStor…
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
JavaScript
【JavaScript】Babelの使い方とトランスパイルとポリフィルの違いについて
JavaScriptのモダンな開発に欠かせないBabelの使い方と、Babelが行うトランスパイルとポリフィルの違いについてまとめました。 Babelの使い方 いまだ多くの人が古いブラウザを使用しています。 そのようなブ…
JavaScript
JavaScriptにおけるリーダブルコードについて
JavaScriptにおけるリーダブルコードとはいったいどんな点に気をつければいいのかについてまとめました。 リーダブルコードについて JavaScriptにおけるリーダブルコードとは、次のようなコードのことです。 他人…
JavaScript
JavaScriptのWebアプリケーション設計とMVCモデルについて
JavaScriptのWebアプリケーション設計について、基礎的な部分をまとめました。 また、Webアプリケーション設計の考えが、どのようにMVCモデルに関係しているのかを説明します。 優れたWebアプリケーション設計に…
JavaScript
JavaScriptランタイム（JsRT,JavaScript runtime）って何?
JavaScriptランタイム（JsRT、JavaScript runtime）について説明します。 JavaScriptランタイム（JsRT）って何? JavaScriptランタイム（JsRT、JavaScript r…
JavaScript
JavaScriptの分割代入の使い方
一度配列でグループ化したけど、やっぱり別々に管理したいとなった場合、分割代入 (Destructuring assignment) が使えます。 分割代入とは、オブジェクトから特定のプロパティを抽出して宣言を行うことです…
JavaScript
JavaScriptの短絡評価(ショートサーキット) and / orについて
JavaScriptで使う&&と||の深いところをまとめました。 &&と||は実はtrue/falseだけを返すものではありません。 どんなデータ型でも使うことができますし、どんなデータ型…
JavaScript
JavaScriptの第一級関数と高階関数とは何かについてとそれらの違い
JavaScriptの第一級関数と高階関数とは何かについてとそれらの違いについてまとめました。 JavaScriptの第一級関数(first-class functions) JavaScriptは関数を第…
JavaScript
JavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差
とてもバグに繋がりやすいJavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差の具体例をみてみましょう。 JavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差 まずは下の具体例を…
JavaScript
JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例
JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例を紹介します。 JavaScriptのIIFE (即時実行関数式)の使い方と具体例 即時実行関数式は、(IIFE,immediately inv…
JavaScript
JavaScriptのクロージャーについて
JavaScriptのクロージャーについてまとめました。 クロージャー(closures)について クロージャーとは、レキシカルスコープの変数を関数が使用している状態のことです。 クロージャーを使ったプライベート変数の定…
JavaScript
JavaScriptの配列を加工するmap(),filter(),reduce()メソッドの使い方
配列データを加工するmap(),filter(),reduce()メソッドの使い方をまとめました。 データを転送する配列のメソッドには3種類あります。 map()メソッド,filter()メソッド,reduce()メソッ…
JavaScript
JavaScriptの配列を条件指定して確認するsome()とevery()メソッド
JavaScriptの配列を条件指定して確認するsome()メソッドとevery()メソッドをまとめました。 some()メソッド 似たようなメソッドにincludes()メソッドがあります。 includes()メソッ…
JavaScript
JavaScriptの配列のネストを解除するflat()とflatMap()メソッド
JavaScriptの配列のネストを解除するflat()メソッドとflatMap()メソッドの使い方と具体例をまとめました。 flat()メソッドの使い方 配列の中に配列があった場合でも、flat()メソッドを使うと簡単…
JavaScript
JavaScriptのfill()とArray.from()メソッドで配列を作成
JavaScriptのfill()とArray.from()メソッドで配列を作成方法をまとめました。 fill()メソッドの使い方 { const arr = [1,2,3,4,4,5,6,6,7]; console.l…
JavaScript
JavaScriptのMathメソッドと数値と文字列の変換や確認方法のまとめ
JavaScriptの数値確認方法をまとめました。 JavaScriptの数値で気をつけるべき挙動 Base 10（10進数）というのは、0から9で数値を表します。 Banary base 2(2進数)は0か1かで数…
JavaScript
JavaScriptのデータ型：Bigintについての基本まとめ
JavaScriptのデータ型であるBigint型についてまとめました。 JavaScriptのBigint型の導入背景 JavaScriptのNumber（数値型）は倍精度浮動小数点数です。 これはどういう意味かという…
JavaScript
JavaScriptでDOMはどうやって動いているのか？その背景事情
ブラウザが、HTMLを読み込むとDOM(Document Object Model、文書オブジェクトモデル)と呼ばれるデータ構造が作られます。 DOMはHTMLやXMLという文書のためのAPI(アプリケーションプログラミ…
JavaScript
JavaScriptで属性を操作する方法まとめ
JavaScriptで属性を操作する方法まとめました。 要素の属性を操作する DOMではいくつかの値以外は、属性と同じプロパティが用意されています。 たとえば、下の例では、alt属性を指定するために、JavaScript…
JavaScript
JavaScriptでスクロールをするプログラムの書き方(旧式とモダンなやり方)
JavaScriptでスクロールをするプログラムの書き方を旧式の方法とモダンなやり方の両方をまとめました。 モダンなやり方はまだブラウザサポートが完璧ではないので、状況に応じて使いこなせるといいでしょう。 JavaScr…
JavaScript
JavaScriptのイベントの伝播について【キャプチャリングとバブリング】
JavaScriptのイベントの伝播(Event Propagation)についてまとめました。 イベントの伝播(Event Propagation) 子要素にクリックイベントがある場合、親をたどってどんどん伝播していく…
JavaScript
JavaScript【タブ機能】のプログラムの書き方
JavaScriptでタブ機能のプログラムの書き方を紹介します。 タブ機能のプログラムの書き方 HTML <div class="about"> <div class="a…
JavaScript
JavaScriptのIntersectionObserverAPIでスティッキーナビを実装する方法
JavaScriptのIntersectionObserverでスティッキーナビゲーションを実装する方法を紹介します。 window.addEventListenerのscrollよりもパフォーマンスが改善されるメリット…
JavaScript
JavaScriptライブラリを使わずに【scrollReveal】ふわっと表示させる
JavaScriptのIntersectionObserverAPIを使って、ライブラリを使わずにscrollRevealのようなふわっと表示させる方法を紹介します。 IntersectionObserverAPIでふわ…
JavaScript
JavaScriptのLazyLoadのプログラム (画像の遅延読み込み)
LazyLoad (画像の遅延読み込み)は、パフォーマンスに大きく貢献するエフェクトです。 lazy-loadのJavaScriptプログラムの書き方を紹介します。 JavaScriptのLazyLoadのプログラム H…
JavaScript
JavaScriptのConstructor関数の基本的な使い方
JavaScriptのConstructor関数の基本的な使い方を紹介します。 Constructor関数とインスタンス Constructor（コンストラクター)関数とは、新しくオブジェクトを作成するための雛形となる関…
JavaScript
JavaScriptのObject.create()でプロトタイプ継承する方法
JavaScriptのObject.create()でプロトタイプ継承する方法についてまとめました。 JavaScriptのObject.create()でプロトタイプ継承する方法 Object.create()はプロト…
JavaScript
JavaScriptのカプセル化に関わるパブリッククラスフィールド
JavaScriptのカプセル化に関わる、パブリッククラスフィールドについて基礎的な部分をまとめました。 まだ、ステージ3のため、ブラウザの対応状況次第で使えなくなることもあります。 パブリッククラスフィールドの8つのフ…
JavaScript
同期(Synchronous)と非同期(Asynchronous)とAJAXとWeb APIについて
JavaScriptの同期(Synchronous)と非同期(Asynchronous)とAJAXとWeb APIについて、基礎的な部分をまとめました。 同期(Synchronous)と非同期(Asynchronous)…
JavaScript
クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて
クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて基礎的な部分をまとめました。 クライアントサーバモデル=HTTPリクエスト/レスポンスモデルについて クライアント（ユーザー）が、インターネット上で検…