KDE BLOG

不器用ですから

【ES2017】async/await の基礎(後編)

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

【ES2017】async/await の基礎(前編)

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

【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白(スペース)をよしなに削除する方法

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

【JavaScript】ちゃんと理解しておきたいPromiseの勘所など

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

【JavaScript基礎】Fetch APIの基礎

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

【ES2015】スプレッド演算子の基礎まとめ

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

【JavaScript基礎】Array.prototype.reduce() をしっかり理解する&サンプル集

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

【ES2015】テンプレートリテラルのタグについての基礎

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

CSS Grid Layout の基礎について社内勉強会で発表した

CSS

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

【React】複数のProviderで1つのstoreを参照 & React+Reduxの実装基礎まとめ

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

【JavaScript】Promiseを使った非同期処理

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

【git】リポジトリの移行時などでremote urlを変更する

git

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

【ES2015】分割代入の基本と便利な使い方

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

XAMPPのPHPをバージョンアップする(5.5→7.2)

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

Vagrant内でVirtualHostを設定する

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

unixコマンドの基本的まとめ

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

nodemonでnode.jsを自動再起動させる

<目次> 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…

データベースの基礎知識 ~データモデル、RDBMS、NoSQLの概要~

DB

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

Creative Cloud道場 懐テク#2 Flash編に参加してきてのレポート

先日9/7(木)に開催された、HTML5Experts.jp主催の「懐テク#2 Flash編」というトークライブに参加してきてのレポートです。 省略している箇所もあります。また誤っている所もあるかもしれませんので、正確に知りたい方はYouTubeに動画が上がっていますので…

一時的にQiitaで書いています

タイトルの通り、先週あたりから技術ネタを試験的にQiitaに投稿しています。 よかったらたまに見て頂き、もし気になった点などあればお気軽にお知らせ頂けると幸いです。 qiita.com 引き続きよろしくお願いいたします。

【JavaScript基礎】高階関数について

<目次> 高階関数とは何か 高階関数のメリット サンプル 参考

【JavaScript基礎】thisとは何か・シーン別参照先のまとめ

<目次> thisとは何か thisの値の決められ方 グローバルコンテクスト内でのthis 関数内でのthis メソッド内でのthis 入れ子の関数でのthis コンストラクタ内でのthis call()メソッド、apply()メソッドでのthis アロー関数内でのthis thisの退避 まとめ 参考

【JavaScript基礎】グローバルオブジェクトについて

<目次> グローバルオブジェクトとは グローバルオブジェクトの役割 定数と関数 グローバル変数とグローバルプロパティ var演算子を伴う場合 var演算子を伴わない場合 両者の違い グローバルオブジェクトへのアクセス windowを明示しない方がわずかに処理が…

【JavaScript基礎】プロトタイプチェーンについて

<目次> プロパティを参照して見つからない場合どのような処理が行われるのか プロトタイプチェーンを使うメリット prototypeプロパティ protoプロパティ protoプロパティは実際のコーディングで使用するのは要注意 プロトタイプチェーンは最初に見つけたプ…

【JavaScript基礎】オブジェクトは常に動的である

<目次> JavaScriptではいつでもオブジェクトにプロパティやメソッドを追加できる オブジェクトのプロパティにはどんな値も格納できる オブジェクトのプロパティを削除するにはdelete演算子を使う 参考

【JavaScript基礎】typeof演算子、constructorプロパティ、instanceof演算子を使ってデータ型、コンストラクタ関数を特定する

<目次> データ型の特定 typeof演算子 constructorプロパティ オブジェクトのClassを用いた判定 コンストラクタ関数の特定 instanceof演算子 参考

【JavaScript基礎】プリミティブ値の生成方法とラッパーオブジェクトに関して

<目次> プリミティブ値とは プリミティブ値の生成方法 リテラルを使う(推奨) コンストラクタ関数を使う new演算子とコンストラクタ関数を使う(非推奨) コードが冗長になる 返り値がプリミティブ値ではなくオブジェクトになる プリミティブ値もオブジェ…

【JavaScript基礎】JavaScriptの実行順序について

<目次> ブラウザでのJavaScriptの処理の流れ イベント登録のタイミング async属性とdefer属性 async属性:非同期で読み込み開始し、読み込み完了後に実行 defer属性:非同期で読み込みDOM構築完了後に実行 注意 参考

【JavaScript基礎】関数定義の基礎、サーキット演算、三項演算子について

<目次> 関数定義の方法 ①function命令で定義関数 ②関数リテラルで定義 ③Functionコンストラクタ経由で定義 ①function命令での定義と、②関数リテラルでの定義の関数の使用上の注意 関数登録のタイミングの違い 即時関数について 即時関数とは 書き方 即時関…

プログレッシブ ウェブアプリの概要と期待できそうなこと

※本記事は具体的な実装方法については触れていません。 <目次> プログレッシブ ウェブアプリとは 特徴 PWAに対応しているサイト 対応プラットフォーム 期待できること ネイティブアプリで作成するよりもユーザーへの負担が少なく、閲覧がされやすい。 オフ…