フロントエンド フロントエンドのセキュリティ対策
フロントエンドで特に注意すべき攻撃 XSS（Cross Site Scripting / クロスサイトスクリプティング） 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用...
JavaScript
フロントエンド 
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の...
読んだ本 【読書記録/レビュー】開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
書籍名 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 著者名 Cody Lindley リンク Amazon 楽天 読んだ理由 フロントエンド開発には欠かせず、ほぼ毎日書いているJavaScript。使い方は分...
JavaScript 【JavaScript】変数を定義する時の{}波カッコって何？意味は？
以下のようなコードを見たときに、解読が出来なかったので備忘録です。 const { data: itemList } = getData(id) {}の正体は？ ズバリ、分割代入です。 例えば、以下のようなコードがあるとします。 const...
JavaScript 【JavaScriptライブラリ/React Particles-js】簡単にParticleアニメーションを作る
しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。 どんなアニメーションが作れるのか こちらにデモが載っているので、ぜひ見てみてください。 インスト...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたので...
JavaScript 【JavaScript】ホイスティング（巻き上げ）とは
ホイスティング（巻き上げ）とは 変数や関数の定義（宣言）をコード実行前にメモリに配置すること。 メリット 定義する前に呼び出しても、問題なく実行されます（例：関数の定義よりも、実行を先に書く）。以下のようなコードも実行可能です◎ findN...
JavaScript 【JavaScript】getElementsByClassNameでうまくクラスを取得できないとき
クラス名に基づいて要素を取得したいときに用いられるgetElementsByClassNameですが、うまくいかないときに注意したい点があります。 それは、idなどとは異なり、複数の要素を取得してしまうことです。 そもそもid は1ドキュメ...
JavaScript 【JavaScript】var, let, const の違い・使い分け
理解に必要な前知識 ①再宣言・再代入 >>>>> 「【JavaScript】再宣言・再代入とは？」 ②スコープ >>>>> 「【JavaScript】スコープとは？スコープの種類と違い」 var 再宣言できる再代入もできる関数スコープは持つ...
JavaScript 【JavaScript】再宣言・再代入とは？
再宣言・再代入とはどういうことかお伝えします。 基本的な内容ですが、理解しておかないと「var, let, const の違い」が判りづらいです。 再宣言・再代入とは 簡単な例を挙げます。 まず、以下のコードは、「 a という変数を宣言して...
JavaScript 【JavaScript】スコープとは？スコープの種類と違い
スコープとは？ スコープとは、変数の適用範囲（使える範囲）を示す概念です。 大きく分けて２種類のスコープがあります。 グローバルスコープローカルスコープ（ブロックスコープ・関数スコープ） 以下がざっくりとした図解です。1つ1つ説明していきま...