はじめに
イタンジの福崎です。 社内のslackで煽られてblog記事2本書くって言ったことを思い出し、2本目の記事を書いています。 
正月休みに入ってから速攻インフルエンザになって、インフルエンザ治ってからはやろうと思ってた fullstackopen をちょいちょい進めてました。 今回は fullstackopen でやってみて知らなかったことを記事にまとめておきたいと思います。 fullstackopen.com
fullstackopenとは
フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。
この記事を読んでからやろうとおもってました。 fortkle.hatenablog.com
ちなみに教材は英語ですがGoogle翻訳で和訳して進めてました。
分割代入
例えばこんな事が出来ます。
const t = [1, 2, 3, 4, 5] const [first, second, ...rest] = t console.log(first, second) // 1, 2 console.log(rest) // [3, 4 ,5]
objectも
const obj = {a: 'a', b: 'b', c: 'c'}
const {a, b, c} = obj
console.log(a, b, c) // a b c
スプレッド構文
concatを代替え出来ます
const animals = ['cat', 'dog', 'rabbit'] const humans = ['taro', 'hanako'] console.log([...animals, ...humans]) // ["cat", "dog", "rabbit", "taro", "hanako"]
objectの一部を書き換えて新しいobjectを生成できます
const obj = {a: 'a', b: 'b', c: 'c'}
console.log({...obj, c: 'd'}) // {a: "a", b: "b", c: "d"}
mergeもできます
const obj = {a: 'a', b: 'b', c: 'c'}
const obj2 = {d: 'd', e: 'e', f: 'f'}
console.log({...obj, ...obj2}) // {a: "a", b: "b", c: "c", d: "d", e: "e", …}
ReactではStateで管理しているObjectの破壊的変更は禁止されているので、上記のようなスプレッド構文等により生成した新しいObjectを、State変更用の関数に渡します。
object定義の簡略化
objectのプロパティ定義を簡略化出来ます
const name = 'taro', age = 18
// 今までのやり方
console.log({name: name, age: age}) // {name: "taro", age: 18}
// 簡略化したやりかた
console.log({name, age}) // {name: "taro", age: 18}
json-server
コーディング不要で、30秒以内にRESTfulなAPIモックサーバーを立てれるやつです。
# installして
npm install -g json-server
# 適当な初期データ用意して
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
# 起動するだけ
json-server --watch db.json
起動すると以下のように表示されるので後はresourceにアクセスしてhogehogeするだけです。 postするとidも自動採番してくれます。 他にもページングや全文検索の機能もあるっぽいです。 APIをモックでとりあえず済ませてフロントの開発すすめる時に便利。
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
最後に
なんかECMAScriptの機能紹介みたいになってしまいましたが、fullstackopenはReact Hooksを使ったレンダリングを解説していたり割と新しめな開発手法を学ぶことが出来ました。 フロントは進化が早くすぐに情報が古くなりがちですが、fullstackopenを使えば新し目な情報で実際に手を動かしながらReact,Reduxを学ぶことが出来ます。 例題も復習させることをベースによく考えられており普通に面白かったです。 まだpart 7, 8が残っているので引き続きやっていきます。
例題解いたやつ
途中ですが例題解いたやつcommitしておきました。 良ければ参考にしてください。 github.com
