React+Reduxでライフゲームを作る
React + Redux でライフゲームを作る React + Redux でライフゲームを作ってみます。 Reduxでセルの状態を管理し、その状態をReactで描画するというイメージです。Canvasなどを使わずにDOMのスタイルを状態に応じて動的に切り替えて描画するようにしてみます。 ライフゲームというのは、生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲーム […]
Javascript
- 2018.03.12
- Javascript, React, Redux,
React+Redux で Todoアプリを作ってみる
ReactでTodoアプリを作ってみる Reactのサンプルとして、Todoアプリを作ってみます。 テキストボックスで入力した値が、画面に追加される単純なものを作っていきます。 状態管理には Redux を使用します。 install まずは必要なものをインストールします。 create-react-app $ npm install -g create-react-app Reactのプロジェク […]
- 2018.02.19
- Angular, Javascript, Typescript,
Angular の環境構築方法入門
Angular5 の環境構築 Angular – クイックスタート Angular5 の開発環境を構築します。手順は上記公式サイトの手順に倣います。 Node.js と npm Download | Node.js Angular を使うには、Node.js と npm がインストールされている必要があります。 上記URLからNode.jsのLTS版をインストールしてください。npm […]
- 2017.11.13
- ソート,
Javascriptで配列をソートする方法
Javascriptでソートを行う方法 Javascriptで配列をソートするには、sort() を使用します。使用方法は以下の通りです。 文字列の配列をソートするサンプル // sort()で文字列の配列をソートする。 var array = ['C', 'B', 'D', 'E', 'A']; var sortedArray = array.sort(); console.log(sorted […]
- 2017.11.06
[jQuery] on() で後から追加した要素にもイベントを定義したい
jQueryで後から追加された要素にもイベントを発火したい jQueryで “$(‘button’).on(‘click’, function() { … });” みたいな感じで、たとえばボタンクリックのイベントを定義したとします。この定義時点で存在していたボタンにはクリック時の処理が追加されますが、あとからJa […]
[VSCode] Cordovaの開発環境構築
VSCodeでのCordovaの開発環境構築 Cordovaを使ったハイブリッドアプリの開発環境構築方法をまとめます。 WindowsOSであれば、Visual Studioを使って開発環境を構築するのが良いと思います。 VSでの開発用参考リンク 第1回 Apache Cordovaでできること (1/6) Visual Studio 2015で進化するCordovaアプリ開発環境 ですが今回はM […]
- 2017.05.31
- Javascript, SPA, URL,
[JS] アドレスバーのURLを動的に書き換える方法
JavascriptでURLを書き換えたい 通常のWebでは、URLの変更とページ更新はセットです。ただし、シングルページアプリケーション(SPA)などでは、同一ページのコンテンツを非同期に書き換えたりします。したがってコンテンツの書き換えに従いURLも書き換わらなければなりません。 URLの書き換えも非同期に行わなければ画面の再読み込みが発生してしまいます。もちろんURLの書き換えを行うことで、 […]
- 2017.02.27
- 文字列,
[Javascript] ゼロ埋め(ゼロパディング)する方法
javascriptで0埋め(ゼロパディング)する方法 ある数値について、指定桁数まで左にゼロ埋めしたい場合があります。その実現には slice() を利用します。例えば、12 を3桁で0埋めするには次のように書きます。 var a = ("000"+12).slice(-3); // "012" このコードではまず、文字列 “000” とゼロ埋めしたい […]
- 2017.02.22
- 文字列,
Javascriptで同じ文字列を繰り返す方法
Javascriptで同じ文字列を繰り返す方法 Javascriptで同じ文字列を繰り返して新しい文字列を生成する方法が知りたかったので調べました。例えば “abc” という文字列を3回繰り返した “abcabcabc” という文字列を取得する方法です。 join()を使う方法 空文字を n+1 個持った配列を用意し、繰り返したい文字列を区切り文字と […]
- 2017.01.18
- Javascript,
[Javascript] スプレッド演算子(Spread Operator)の使い方
スプレッド演算子とは Javascript(ES6) には スプレッド演算子 (Spread Operator)と呼ばれる演算子があります。これは ” … “(カンマ3つ)で表現され、分割代入(複数値の展開)の為に用いられるものです。検索しにくいですが。 例えば引数を3つ取る関数に配列をスプレッド演算子で展開して渡したりすることができます。具体的には以下のコード […]