JavaScript

React:SWRで簡単にフェッチする

SWR とは useSWR の API コンテキストとして SWR を使う 関数として利用する 自動再検証 条件付きフェッチ 引数 参考 SWR とは SWR(stale-while-revalidate) は、データ取得のための React Hooks ライブラリで、次の戦略で実装されている。 キャッシュからデ…

React:イベントハンドラと state

インタラクティビティの追加 – Reactで理解した内容をまとめていきます イベントへの応答 イベントハンドラ イベントオブジェクト state:コンポーネントのメモリ コンポーネントでデータ更新するために必要なこと state セット関数にはコールバック関数が渡…

JavaScript:値渡し?参照渡し?

コンポーネントを純粋に保つ – Reactのチャレンジ問題の最後でハマってしまいましたハマったのは下記コード: export default function StoryTray({ stories }) { let storiesTray = stories; storiesTray.push({ id: "create", label: "Create Story", }); …

React:JSX でのマークアップ概要

React がマークアップとレンダリングロジックを混在する理由 JSXのルール コンバータの利用 参考 React がマークアップとレンダリングロジックを混在する理由 ウェブサイトは、コンテンツを HTML、デザインを CSS、ロジックを JavaScript で書くというのが一…

JavaScript:等価と等値の違い

等価と等値の意味をちゃんとできていなかったので整理。 項目 説明 等値 同一のオブジェクトであること(同じアドレス値を指している) 等価 意味的に同じであること ちゃんと理解できていなかったのは、厳密等価演算子と等価演算子の使い方を勘違いしていた…

JavaScript:単項演算子は式の中で使わない

単項演算子は前後のどちらかにつけるかによって評価結果が変わり、どっちの結果となるかがわかりにくいため、式*1の中では用いないようにする。 ++, -- を使いたい場合には文*2として記述する。 式で書くパターン: var Items = []; var maxId = 0; // 式で…

Vue.js について簡単にまとめてみた

Vue.js とは Vue.js の重要な技術 コンポーネントシステム リアクティブシステム レンダリングシステム Vue.js の基本操作 Vue インスタンスのマウント データの定義 データの変更検知 テンプレート構文 フィルタ 算出プロパティ ディレクティブ 条件付きレ…

vue チュートリアルをやってみる

Vue とは Vue コンポーネントの2つのスタイル Vue アプリケーションの作成 前提条件 テンプレートを作る アプリケーションのインスタンスを作る アプリケーションのマウント 参考 Vue とは 説明は次のように書かれている。 Vue (発音は /vjuː/、view と同様…

JavaScript:オブジェクトを持つ配列のソート

基本構文は次のようになっている。 // アロー関数 sort((a, b) => { /* … */ } ) ソート方法をアロー関数内に書き、昇順降順は次のように、アロー関数内の比較結果によって変わる。 a, b の返値 ソート順 > 0 a を b の後に並べる(昇順) < 0 a を b の前に並…

JavaScript:非同期処理②

非同期処理の流れ Async Function が返す Promise の種類 await 式はエラーを throw する 参考 非同期処理の流れ 下記のコードと図がとてもイメージしやすく、理解しやすい。 function taskA() { console.log("タスクAを実行 at " + Date.now()); } function…

npm パッケージを公開する

npm を公開するために npm レジストリを使用する。以下に使用するための流れをまとめておく。 アカウント登録 npm レジストリを使うためにアカウント登録を行う。 登録ページ にアクセスする。手順はこちらが参考になる。 アカウント確認 コマンド上で npm l…

JavaScript でHTMLページのソースを取得する

async/await を使う場合は次のような感じ。async 関数はプロミスを返すので、受け取り側で値を取るときには、.then で受け取ればいい async function GetHtml(url) { const promise = fetch(url) // Promiseを返す const response = await promise; // fetch…

JavaScript:非同期処理①

コールバック関数 コールバック関数とは コールバック地獄、破滅のピラミッド promise イベントと処理を結びつける イベントを受け取る コールバックとの違い Promiseチェーン Promise での例外対応 再スロー reject を未処理にしない Promise API Promise.a…

JavaScript:ガベージコレクション

ガベージコレクションは、JavaScriptのメモリ管理の仕組みで、使用されなくなったオブジェクトを削除し、メモリを解放する。 実行は、ガベージコレクタと呼ばれる、バックグラウンドプロセスにより自動的に実行される。ガベージコレクタはオブジェクトを監視…

ESLint、Prettierを使ってコード一貫性を実現する

ESLint ESLint とは ESlint をコマンドラインで使ってみる ESLint を VSCode で使ってみる Prettier Prettier とは? Prettier をコマンドラインで使ってみる Prettier を VS Code で使ってみる 参考 ESLint ESLint とは ESLint は、コードの一貫性を高め、…

npm 概要

npm とは npm を使ってみる 参考 npm とは npm(Node Package Manager) は、JavaScript 系のパッケージを管理するツール。インストール時に依存関係を考慮してインストールしてくれる。 OS系パッケージ管理だと、 apt, dpkg, Homebrew のようなもので、言語系…

nvm と Node.js を使ってみる

nvm って? nvm(Node Version Manager) は Node.js のバージョンマネージャ。コマンドラインにて異なるバージョンの node を使えるようにできる。node については後述。 下記のような感じで、コマンドライン上で node の切り替えやインストールなどができ…

JavaScript入門〜ブラウザ操作とフォーム〜

JavaScript でブラウザ操作 ダイアログ表示 ウィンドウ操作 自動実行 ウィンドウ表示 ページのURL情報参照 ページを移動・更新する JavaScript でフォームを操作する 参考 JavaScript でブラウザ操作 JavaScript では色々ブラウザに対して操作できる。 ダイ…

JavaScript入門〜イベント処理〜

イベント処理とは イベントハンドラーの登録 イベントハンドラの記述位置 イベントを受け取る イベントの伝搬 イベントの種類 マウス系 キーボード系 change イベント input イベント コピペ系 データ読み込み系 その他 参考 イベント処理とは JavaScript で…

JavaScript入門〜DOMとは〜

DOMとは DOMオブジェクトの操作方法 ノードの作成と追加 参考 DOMとは DOM (Document Object Model) は HTML や XML 文書を取り扱うための API 。 DOM では、ドキュメントに含まれる要素やテキストデータをオブジェクトとして扱い、ドキュメントはオブジェク…

JavaScript入門

Webページが表示されるまでの流れ defer属性 async属性 基本事項 プリミティブ型とオブジェクト型 noscript要素 strictモード(非推奨コードの制限) falseとみなされる値 長数の書き方 文字列 テンプレートリテラル 文字列操作でできること 変数宣言の種類 …

JavaScript is 何?

スラスラ読める JavaScript ふりがなプログラミング を読んだので、大事と思ったことをまとめておく。 概要 使いどころ 変数の使い方 条件分岐 厳密等価と厳密不等価 繰り返し文と配列 配列のループ操作と配列操作メソッド 関数とオブジェクト 関数の書き方 …