KDE BLOG

web制作で学んだことを記していきます

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に対応しているサイト 対応プラットフォーム 期待できること ネイティブアプリで作成するよりもユーザーへの負担が少なく、閲覧がされやすい。 オフ…

CSS3 animationのまとめ(基本編)

前回のtransitionに続き、animationについてもまとめておきます。 transitionよりも長くなりそうなので基本編と発展編に分けたいと思います。 まずは基本編から。 <目次> animationのできること 対応ブラウザ 各プロパティの概要・構文 animation-name ani…

CSS3 transitionのまとめ

個人的に使うことがとても多いCSS3のtransition。 細かい設定をするとなると忘れてしまっている事柄もあるので整理してまとめておきます。 <目次> transitionができること transitionが適応できるcssプロパティ 対応ブラウザ 各プロパティの概要・構文 tra…