JavaScriptReact Context を使ってProp drilling問題を解消INDEXなにを解決するのかContextを使用しない例Contextを使用する1. Contextを作成する2. Providerに共有させたい値をセットする3. Consumerを定義して値を受け取るuseConte...
JavaScriptReact Routerでルーティング処理react-router-domを使ったページ遷移を実装 INDEX準備ルーティング実装exactLinkSwitch準備 webpackで開発環境を作るのは少し手間なのでcreate-react-appを活用させてもら...
Dec 21JavaScriptNode.js 環境変数を取得する方法APIのキーなどをGitHubや外部のサービスに公開したくない!って場合に有効なのが環境変数を定義してそこからキーの情報を参照する事です。 今回はNode.jsのアプリで環境変数を設定する方法を紹介します。 Node.j...
JavaScriptJavaScript 便利な配列操作メソッド今回は個人的に便利だなと感じるJavaScriptの配列操作に関するメソッドを8つピックアップしてみました。 INDEXmapforEachfiltersplicereducefindsomeeveryincludesm...
JavaScriptReduxについてざっくりとまとめたINDEXReduxとはActionReducerStoreRedux三原則Reduxを使ってみるReducerActionStoreReact + ReduxReactからStoreのデータにアクセスするmapStat...
JavaScriptPure function (純粋関数)とはReduxを学習している際にPure Functionsという単語を見かけ、調べたことを議事録として残します。LispやHaskellなどの言語を学んでいる訳でないので深掘りした内容ではないです。 INDEX結論純粋関数...
JavaScriptJavaScriptの括弧で囲まれた変数名とは(分割代入)タイトルが分かりづらいですが、ReactであったりQiitaの記事などをみているとconst {something} = somethingelseみたいな構文をよく見かけます。調べてみると分割代入と呼ばれる記法でありE...
JavaScriptjQueryで動的に要素の追加・削除を行う久々にjQueryに触れたので備忘録がてら要素の動的な追加・削除について書いていきたいと思います。 作成するものとしては「追加」ボタンをクリックするとボタンの上にinput要素が追加され、要素横にある「削除」ボタンをクリ...
JavaScriptjQueryのappendメソッドをJavaScriptで実現したいDOMを操作する際はjQueryがすごく活躍します。要素を追加するときは頻繁にjQueryのappendメソッドを使用します。jQueryはあくまでJavaScriptのライブラリであるからJavaScriptだけでもa...
JavaScriptJavaScript Fetch APIで非同期通信をしてみるJavaScriptでの非同期処理、すごく便利ですよね。非同期通信を使うメリットの例として指定したURLからデータを取得し、ページ全体を再読み込みすることなくHTMLを更新出来るのはユーザビリティの向上に繋がることだけで...