配列をランダムにシャッフルする(JavaScript)
配列をランダムにシャッフルする(JavaScript)
配列をランダムにシャッフルする機能を実装する機会があって、調べたことをメモ。
どうやら、Fisher–Yates shuffle という有名なアルゴリズムがある模様。
配列からランダムに要素を抽出して並べていくアルゴリズム。
こちらのサイトでグラフィカルにシャッフルの動きを見ることができる。
https://bost.ocks.org/mike/shuffle/
コードサンプル
/**
* Fisher–Yates shuffle
* @param {*} array
*/
shuffle(array) {
let length = array.length;
while (length) {
const r = Math.floor(Math.random() * length);
[array[length], array[r]] = [array[r], array[--length]];
}
return array;
}
nodebrew を使って最新の Node.js のバージョンに切り替える
たまにやると忘れているので記録する
nodebrew 自体のアップデート
nodebrew selfupdate を実行します
$ nodebrew selfupdate Fetching nodebrew... Updated successfully
現在インストールされているリストを表示する
nodebrew list を実行します
$ nodebrew list v6.5.0 v7.7.3 v8.9.3 v11.11.0 current: v11.11.0
安定版インストールする
nodebrew install-binary stable を実行する
$ nodebrew install-binary stable Fetching: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully
インストールされたリストを確認してみる
$ nodebrew list v6.5.0 v7.7.3 v8.9.3 v10.15.3 v11.11.0 current: v11.11.0
v10.15.3 が追加されていることがわかります。
使用するバージョンを指定する
nodebrew use v10.15.3 を実行する
$ nodebrew use v10.15.3 use v10.15.3
Node.js のバージョンを確認する node -v を実行します
$ node -v v10.15.3
無事、先程インストールしたバージョンに切り替わりました
最後に、グローバルにインストールしている npm パッケージを移行する
前回設定されていた Node.js のバージョンを指定します
nodebrew migrate-package v11.11.0
$ nodebrew migrate-package v11.11.0 Try to install firebase-tools ... 〜 + firebase-tools@6.4.0 added 1 package from 1 contributor in 2.223s npm is already installed Try to install create-react-app ... 〜 + create-react-app@2.1.8 added 1 package in 0.539s Installed successfully: firebase-tools create-react-app
firebase-tools と create-react-app が移行されました
JavaScriptの配列をspliceを使って変更する
JavaScriptの配列をspliceを使って変更する
splice: 古い要素を取り除きつつ新しい要素を追加することで、配列の内容を変更します。
参考サイト MDN web docs(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
使い方
numbers.splice("開始位置", "取り除く要素数", "配列に追加する要素");
例1
const numbers = [0, 1, 2]; // 1番目から0個取り除き、そこに3追加する numbers.splice(1, 0, 3); console.log(numbers); // [0, 3, 1, 2]
例2
const numbers = [0, 1, 2]; // 0番目から1個取り除き、そこに4追加する numbers.splice(0, 1, 4); console.log(numbers); // [4, 1, 2]
JavaScript配列操作まとめ(forEach, map, filter, every, some, find, findIndex, reduce)
JavaScript配列操作まとめ(forEach, map, filter, every, some, find, findIndex, reduce)
forEach
- 与えられた関数を、配列の各要素に対して一度ずつ実行します。
- 戻り値はundefined
const numbers = [1, 4, 2, 5, 2, 5];
numbers.forEach((number) => {
console.log(number)
});
// 1 4 2 5 2 5
// 省略記法
console.log(numbers.forEach(number => console.log(number)));
// 1 4 2 5 2 5
map
- 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumbers = numbers.map((number) => {
return number * 2;
});
console.log(newNumbers);
// [2, 8, 4, 10, 4, 10]
// 省略記法、returnも省略できる
console.log(numbers.map(number => number * 2));
// [2, 8, 4, 10, 4, 10]
filter
- コールバック関数を各要素に実行し、trueとなった要素を返却し、その結果からなる新しい配列を生成します。
const numbers = [1, 4, 2, 5, 2, 5];
const newNumbers = numbers.filter((number) => {
return number < 3;
});
console.log(newNumbers);
// [1, 2, 2]
// 省略記法
console.log(numbers.filter(number => number < 3));
// [1, 2, 2]
every
- 配列のすべての要素が条件を満たすかを判定する。
- すべての要素が条件を満たせばtrue。
- ひとつでも満たさないならfalseを返却。
const numbers = [1, 4, 2, 5, 2, 5]; const isEvenNumbers = numbers.every(number => number % 2); console.log(isEvenNumbers); // false
some
- 配列の中に条件を満たした要素があるかを判定する。
- ひとつでも条件を満たせばtrue, すべて違う場合はfalse。
const numbers = [1, 4, 2, 5, 2, 5]; const hasEvenNumbers = numbers.some(number => number % 2); console.log(hasEvenNumbers); // true
find
- 配列の要素から、条件を満たした最初の要素を返却する。
const numbers = [1, 4, 2, 5, 2, 5]; const newNumber = numbers.find(number => number === 5); console.log(newNumber); // 5
findIndex
- 配列の要素から、条件を満たした最初の要素のindexを返却する。
const numbers = [1, 4, 2, 5, 2, 5]; const newNumberIndex = numbers.findIndex(number => number === 5 ) console.log(newNumberIndex); // 3
reduce
- 配列の各要素に対して（左から右へ）関数を適用し、単一の値にします。
- 初期値0が最初のprevの値で、returnされた値が次のprevの値になる
const numbers = [1, 4, 2, 5, 2, 5];
const sumNumber = numbers.reduce((prev, current) => {
return prev + current;
}, 0);
console.log(sumNumber);
// 19
HTML5 Conference 2016に参加しました。
昨日、HTML5 Conference 2016に参加しました。
かなりの人数が参加していて、どのセッションも興味深くて、Webの進化は早いと思いました。
lacoさんのAngular2の話がとても良くて、いままでぼんやりしていたAngular2の世界観がまとまった気がします。
内容をメモってたので、マークダウンの練習として投稿します。
The First Step Angular2
@laco0416さん
http://slides.com/laco/first-step-to-angular-land#/
Angular2の特徴
Web Standards
Simple
- データバインディングなどがシンプルに書ける
Fast
- トップダウンで変更検知 常に一方向に 上から下へ
Full-Stack
- 一通り揃っているので、ライブラリ選定のコストがかからない
TypeScript
- 型の恩恵
TypeScript
型によって常に正しいAPIドキュメント
コンパイルチェック
入力補完が効く
@Decorators()が使える
- クラスやメソッドを修飾する機能
Type-base DI
- コンストラクタ引数の型をキーにしてDIする
Angular2の構成
Platform
ComponentTree
Module
確定API
@Component
@Input
親から子にデータを流す
- Top-down Data Flow
@Output
子から親にイベントを発行
- Bottom-up Event System
@Directeive
テンプレートを拡張する
- 主に要素を拡張など
@Pipe
- データバインディングを拡張
@NgModule
アプリケーションの設定を行う
コンパイラを作る
依存の設定
アプリケーションの起動
AngularPlatForm
設定を変えることで、どこでも使える
Web Worker
Server
Browser
RouterV3
簡潔に書けるようになった
OneConfigration
pathにcomponentを紐付ける
<router-outlet> <router-link>
アニメーションと整合性を持って実装できる
気がついたら一年経っていた件
一年ぶりの投稿です。
26歳になりました。
前回の記事では、なるべく続けていこうとか書いていたのに、ブログの存在を忘れてました。
去年より仕事が落ち着いて、プライベートの時間が割りと取れるようになったので、ぼちぼち再開しようかなと。
コンテンツの内容としては、最近考えてる事とか、調べた技術の事とか、読んだ本の感想を書いていこうと思っています。
続けるためには、なるべくハードルを下げたほうがいいので、記事のクオリティーとかは気にしない方針で。
