reactのlazy load & suspenseを試してみた

ちょっとずつしか手が出せてなかったReact.jsをニートになったのを気に学び直している
その過程でReact.lazyとSuspense`をwebpackで試したのでそのログ

reactjs.org

tl;dr

コード自体はここに全部おいてある

github.com

動作チェック

動かすための方法はREADME.mdに書いてあるので、そちらを参照していただくとして
実行してページを開くと一瞬「Loading...」という文字が表示され、lazyロードしたComponentが読み込まれると「Happy Birthday Nogizaka46」*1という文字が表示されます

解説

パッケージについて

基本的には上記のgithubにおいてあるコードのpackage.jsonを見てもらうとして

今回dynamic importをしているので、babelでそれを扱うプラグインをインストールしている

babeljs.io

プロジェクトコード

componentをロードするときにReact.lazy(() => import(''))としてると、ファイルが分割されlazyロードすることができる

これで読み込んだcomponentを<Suspense>で囲うことで、dynamic import*2が読み込まれるまではfalllbackプロパティで指定した要素（今回の場合は「Loding...」という文字列）が表示され、ロードが終わるとcomponentが普通にレンダリングされる

import React, { Suspense } from 'react'

const Nogi = React.lazy(() => import(/* webpackChunkName: "Nogi" */'./Nogi'))

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Nogi />
      </Suspense>
    </div>
  )
}

react-split-sample/App.js at master · yuzu-sandbox/react-split-sample · GitHub

まとめ

個人でやってるもののほんの一部に使っているだけで、Reactを仕事で使ったことがほぼなく、lazy loadが求められるほどパフォーマンスセンシティブなものを作ってないので、この対応がどこまで通用するのかはわからないがかなり簡単にコード分割が実現できるのでよかった

ただwebpackのこの辺↓と組み合わせるとどうなるのか気になるところなので、今度試したい

webpack.js.org

*1:お察しください https://twitter.com/yuzu_441/status/1098781354710294528

*2:要するにPromise

Goのnet/httpパッケージを使ったAPI開発を素振りしてた

最近調査を兼ねてgolang触ってみてるのでメモがてらgoでのhttp処理の書き方をまとめる

Goのnet/httpパッケージの仕組み

まだ全然詳しくないので、雑に言うとhttp.Handlerを定義し、それをパスと関連を付ける事によってルーティングされて実行される

例えば

package main

import (
  "fmt"
  "net/http"
)

func main() {
  http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintln(w, "Hello World")
  })
  
  http.ListenAndServe(":8080", nil)
}

これでgo run等で実行すると以下のようにcurlで実行できるようになる

curl -v 'http://localhost:8080'

POST等の判別

リクエストのメソッド（GET, POST等)を判断するためにはhttp.RequestのMethodプロパティを参照すればいい

例えばGETかそれ以外かを見分けるならこんな感じ

if r.Method == http.MethodGet {
  fmt.Fprintln(w, "Get Method")
} else {
  fmt.FPrintln(w, "Other Method")
}

POSTでForm valueを取得する

POSTメソッドにFormの形式で送る

package main

import (
    "fmt"
    "net/http"
)

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
            fmt.Fprintln(w, r.FormValue("nogizaka"))
    })

    http.ListenAndServe(":8000", nil)
}

これでcurlで"nogizaka=maiyan"をPOSTすると「mayiyan」が返ってくる

curl -v -X POST -F "nogizaka=maiyan" 'http://localhost:8000'

JSONをPOSTする

web application作ってるとよくあるjsonを投げて、それを解釈してJSONを返す*1

package main

import (
    "encoding/json"
    "fmt"
    "io/ioutil"
    "net/http"
)

// jsonのSchema
type InputJsonSchema struct {
    Name string `json:"name"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    // request bodyの読み取り
        b, err := ioutil.ReadAll(r.Body)
        if err != nil {
            fmt.Println("io error")
            return
        }

        // jsonのdecode
        jsonBytes := ([]byte)(b)
        data := new(InputJsonSchema)
        if err := json.Unmarshal(jsonBytes, data); err != nil {
            fmt.Println("JSON Unmarshal error:", err)
            return
        }
        fmt.Fprintln(w, data.Name)
    })

    http.ListenAndServe(":8000", nil)
}

これでcurlを投げるとnameプロパティに設定したものが返ってくる

curl -v -X POST -d '{"name": "乃木坂"}' 'http://localhost:8000'

まとめ的なもの

ちょこちょこ軽いapiなら'net/http'だけで作るみたいなの見たことあった気がしたので挑戦してみたけど、流石に何かしらweb framework入れて開発したほうがいい気はした

まだ配列操作*2とかDBへの処理軽く見ただけで実際に動かせてないのでそこらへんやったら何か作れそう

*1:Content-Typeはifで分けるだけっぽいので無視してる

*2:厳密にはスライス操作かな

vscodeでgoの設定をしてlspを動かしてみた

vscodeでgolangの開発環境を構築にあたってgocodeではなくlsp*1を使う設定をやってみて動いてみたのでまとめます

なぜvscodeを使わないのかというのは以下の記事を見たのと、lspすごいという個人的な期待感です

mattn.kaoriya.net

インストール

とりあえずvscodeにvscode-goをインストールします

github.com

インストール自体は他の拡張と同じように"go"とかで絞り込むと表示されると思いますので、それをインストールします。

設定

インストールしたら設定は自分の環境だと以下の感じ*2
(setting.jsonからじゃないと設定できないっぽい項目があるのでjsonを編集しました)

"go.gopath": "/home/yuzu/develop",
"go.goroot": "/home/yuzu/.goenv/versions/1.11.4",
"go.useLanguageServer": true,
"go.languageServerExperimentalFeatures": {
    "format": false,
    "autoComplete": true,
    "rename": true,
    "goToDefinition": true,
    "hover": true,
    "signatureHelp": true,
    "goToTypeDefinition": true,
    "goToImplementation": true,
    "documentSymbols": true,
    "workspaceSymbols": true,
    "findReferences": true
}

設定をしたらctrl + shift + p等でコマンドパレットを開き「go: Install/Update Tools」を実行し、go-langserverにチェックを入れてOKを押すとgo-langserverがインストールされます

github.com

実行されることを確認する

"autoComplete": trueを設定したので補完されることを確認します。自分は以下のようなコードを書いて、fmt.をタイプした時にPrintlnが候補として表示されるかで確認できると思います*3

package main

import (
    "fmt"
)

func main() {
    fmt.Println("Happy Aura")
}

*1:Language Service Protocol

*2:gorootの指定がversion変えるたびに変更したいので納得いってない

*3:けやきちゃんのハッピーオーラなんか好きです