正月にfullstackopenをやってみた

はじめに

イタンジの福崎です。 社内のslackで煽られてblog記事2本書くって言ったことを思い出し、2本目の記事を書いています。 f:id:g_fukusaki:20200105172101p:plain

正月休みに入ってから速攻インフルエンザになって、インフルエンザ治ってからはやろうと思ってた fullstackopen をちょいちょい進めてました。 今回は fullstackopen でやってみて知らなかったことを記事にまとめておきたいと思います。 fullstackopen.com

fullstackopenとは

フィンランドヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。

この記事を読んでからやろうとおもってました。 fortkle.hatenablog.com

ちなみに教材は英語ですがGoogle翻訳で和訳して進めてました。

分割代入

developer.mozilla.org

例えばこんな事が出来ます。

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

スプレッド構文

developer.mozilla.org

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のプロパティ定義を簡略化出来ます

developer.mozilla.org

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モックサーバーを立てれるやつです。

github.com

# 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