これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。 しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴…

表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。 事象 原因 最初のコード html css js 怪しいところを探る 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする マウスイベントを扱う場合…

APIモックサーバというと、json-server や swagger などが有名ですが、ただ fetch をしたいということであれば、gist を使うのが一番お手軽かもしれないのでメモしておきます。 作り方 とても簡単です。 Githubアカウントがなければ作成して、https://gist.g…

前回に続き、Async Function（async/await）の使い方について学びます。 今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。 Async Functionとコールバック関数の問題 Promiseだけ使ったケース Async Functionとコール…

Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。 async/await とは 簡単なサンプル Promiseを使った例 Async Functionを使った例 Async Functionの定義方法 Async Function の役割 Async Functionは常にPromiseインスタ…

ちょっとした小ネタを思いついたので書いておきたいと思います。 JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白（スペース）が開発者ツール上で見えたりして気になったりしないでしょうか？ <a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a> ▼ Chr…

以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。 kde.hateblo.jp ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。 Promiseと…

これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数（input） 第二引数（init） 戻り値 基本的なリクエスト＆レスポンスの取得 fe…

ES2015から使えるスプレッド演算子（Spread Operator）について理解がまとまっていないので、きちんとまとめておきたいと思います。 構文 関数呼び出しでの例 配列リテラルでの例 配列のコピー Objectリテラルでの例 レスト構文 分割代入でプロパティをまと…

配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理…

今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。 テンプレートリテラルとは タグとは タグを使ってテンプレートリテラル内の変数を大文字にする例 生の文字列にアクセスする Strin…

先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。 スライドは下記になります。 CSS Grid Layout の基礎 from KojiKobayashi14 …

今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。 今回は少し特殊な例ですが、複数の Provider を使ってのコンポーネントの連携のやり方を紹介しつつ、サンプルを作りながらReact + Reduxの実装を振り返りたい…

Promiseについてきちんと理解できていなかったので初歩から学ぶ。 Promiseとは 使用できる環境 基本の構文 Promise.prototype.then() Promiseの状態変化 Promise.prototype.catch() catchメソッドのメリット 1. コードの見通しがよくなる 2. onResolved時に…

やりたいこと 手順 1. 新しいリポジトリを作成 2. 現在のremote url を確認 3. remote url を変更 4. 新しいリポジトリにpush 参考 やりたいこと リモートリポジトリを変更した際に、そのままでは push や pull ができないので remote url を変更したい。

分割代入 (Destructuring assignment)とは 配列での使い方 オブジェクトでの使い方 便利な使い方 値の入れ替え 複数の返り値の取得 関数の引数を分かりやすく表現 ループ処理 JSONや、ネストされたオブジェクトや配列から値を取得 まとめ 参考

久々にXAMPPを使うことがあり、PHPのバージョンを確認すると 5.5 だった。 公開するサーバのPHPバージョンは 7.1 だったので、バージョンアップすることにした際のメモ。 やりたいこと 手順 1. 新しいPHPをダウンロードする 2. XAMPP内のphpディレクトリをバ…

やりたいこと 環境 手順 1. （ホストOS）hostsファイルにホスト名を書く 2. （ゲストOS）httpd.confファイルにvirtualhostの設定を書く 3. （ゲストOS）apache再起動して設定を反映 ハマったところ 参考 やりたいこと VirtualBox + Vagrantで作成したローカ…

＜目次＞ 基本編 ディレクトリ間の移動 ディレクトリの操作 ファイルの操作 bashの便利機能 コマンドの履歴 コマンドの詳細（ヘルプ） シンボリックリンクの作成 ユーザー、グループの確認 ユーザーの確認 グループの確認 パーミッションについて パーミッシ…

＜目次＞ nodemonとは 使い方 1. nodemonをインストール 2. server.js実行 実際に動かしてみた結果 参考 nodemonとは Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for developm…

これまで簡単なWordPressを使ったWebサイト制作でしかデータベースを使ったことしかなかったのですが、今後はNode.jsとデータベースを使っていろんなものを作っていきたいので、基本的なところからデータベースについて調べてみたことを自分用にメモしておき…