純粋関数(pure function)とは、これら２つの条件を満たす関数を指す。
純粋関数は、上記の2つの条件を満たす限り、関数内のローカルデータを変更することができる。
const a = (x, y) => x + y const b = (arr, value) => arr.concat(value) const c = arr => [...arr].sort((a, b) => a - b)
const a = (x, y) => x + y + Math.random() const b = (arr, value) => (arr.push(value), arr)
以下の挙動をする pipe関数を作成する
const square = v => v * v const double = v => v * 2 const addOne = v => v + 1 const res = pipe(square, double, addOne) res(3) // 19; addOne(double(square(3)))
...を使って収集する。Array.prototype.reduce()を使って一連の関数を実行する。そのとき、reduceで逐次得た結果を次の関数の引数として渡すようにする。const pipe = (...fns) => x => fns.reduce((v, fn) => fn(v), x)
上記をわかりやすく冗長に書くと以下のようになる。
const pipe = (...fns) => { return (x) => { return fns.reduce((v, fn) => fn(v), x) } }
スプレッド構文...を使うと、オブジェクト自身の列挙可能なプロパティを新しいオブジェクトにコピーできる。オブジェクトの浅いクローン(shallow clone)が作成される。
const obj = { a: 1, b: 2 } const shallowClone = { ...obj }
上記のテクニックでは、prototypeは無視される。さらにネストされたオブジェクトはクローンされずそれらの参照がコピーされるので、ネストされたオブジェクトは依然としてオリジナルと同じオブジェクトを参照する。ディープクローンする場合は、オブジェクト内にネストされる可能性のある任意のタイプのオブジェクト(Date, RegExp, Function, Setなど)を効果的にクローンするために上記の方法よりはるかに複雑になる。
JSON.parse(JSON.stringify(obj))
Object.assign({}, obj)
Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {})BEMとは、スコープ問題を解決するために名前空間を定義することでよりCSSをメンテナンスしやすくするCSSクラスの命名規則。
BEMはblock, element, modifier の略。blockはプロジェクトを通して再利用可能なスタンドアロンなコンポーネントであり、サブコンポーネント(elements)の名前空間として機能する。modifiersは blockまたはelementが特定の状態にあるとき、または異なる構造やスタイルのときにフラグとして利用される。
/* block component */ .block { } /* element */ .block__element { } /* modifier */ .block__element--modifier { }
<nav class="navbar"> <a href="/" class="navbar__link navbar__link--active"></a> <a href="/" class="navbar__link"></a> <a href="/" class="navbar__link"></a> </nav>
上のケースの場合、navbar はblock, navbar__linkはelement(navberコンポーネントの外では意味をなさない)、navbar__link--activeはmodifier(navbar__link 要尾とは異なる状態を示す)。
modifiersは冗長なので、多くの場合、modifierとしてis- *フラグを使用される。
<a href="/" class="navbar__link is-active"></a>
これらは、必ずelementに連鎖し、決して単独で使用しない。
.navbar__link.is-active { }
HTML5では、ウェブサイトはブラウザのローカルにデータを保存できる。データはname-valueペアで格納され、ウェブページは自身で格納したデータにのみアクセスができる。
どちらのstorageも、オリジンが異なると格納されたオブジェクトは共有されないため、スコープはオリジン単位となる。
30 seconds of interviewsを一通り読んで面白かったので紹介していきたい
defer and async attributes on a <script> tag?<script src="myscript.js"></script> <script src="myscript.js" defer></script> <script src="myscript.js" async></script>
inputの基底コンポーネントを作る。
v-modelは使わずに、@inputでそのまま親に変更されたvalueをemitする。
# input基底コンポーネント Vue.component('baseInput', { props: ['initValue'], template: ` <input type="text" :value="initValue" @input="$emit('inputText', $event.target.value)" /> ` })
See the Pen vue.js base-input component by tic40 (@ccpzjoh) on CodePen.
