あべぶろ

気になった技術の備忘録を残します。

[Golang] メソッドバリューについて触れてみる

概要

  • テストコードに関して、メルカリさんの記事を読んでいると、 tech.mercari.com
  • メソッドバリューという気になるワードを発見。
  • この概念を知らなかったので、今回調べてみた。

メソッドバリューとは

The method value x.M is a function value that is callable with the same arguments as a method call of x.M.

  • (意訳)メソッドバリューは、メソッドと同様に引数を渡して呼び出すことが出来る関数が格納されている値のことである。*公式サイトより
  • ソース見た方が早いので以下のように試してみる。
package main

import "fmt"

type T struct {
    a int
}
func (tv  T) Mv(a int) int         { return 0 }  // value receiver
func (tp *T) Mp(f float32) float32 { return 1 }  // pointer receiver

func main() {
    // 通常に初期化、メソッド呼び出し
    var t T
    fmt.Println(t.Mv(0))    // 0
    fmt.Println((&t).Mp(1)) // 1

    // メソッドを変数と保持する
    // この場合、レシーバーは束縛される
    // 上で定義したtがレシーバーで参照される
    mv := t.Mv
    mp := (&t).Mp
    fmt.Println(mv(0)) // 0
    fmt.Println(mp(1)) // 1

    // レシーバーを束縛しなくても良い
    // ただ、呼出し時に第1引数として必要になる
    mv_ := (T).Mv
    mp_ := (*T).Mp
    fmt.Println(mv_(t, 0))  // 0
    fmt.Println(mp_(&t, 1)) // 1
}
  • このメソッドバリューはテストコードで活用することが出来る。
  • テスト時に非公開なメソッドへのアクセスを許可することが出来る。
  • (詳しくはメルカリさんの記事で紹介されているので割愛します。)

参考

[Golang] 環境変数GO111MODULEの設定値の違いについて

概要

  • Golangで依存関係を管理するのに、depを使用しておりModule(vgo)を触ったことなかったので触れてみる。
  • Module全部理解するのは時間かかるので、GO111MODULEの挙動について纏める。
  • 自分用のメモ、内容薄いのは気にしない(これ大事)

GO111MODULEとは

  • Go 1.11から設定出来るようになった環境変数のこと、on/off/autoの3種類の値を設定することが出来る。
  • これを設定することでModuleを使うのか、今まで通り$GOPATHを用いて依存関係を管理するのか設定することが出来る。

onの場合

  • modulesを使う、module-aware modeと呼ぶらしい。
  • $GOPATH配下じゃなくても、依存関係を解決出来るらしい。

offの場合

  • $GOPATHを使った依存解決を行う必要がある。
  • Go 1.11以降でもdepなどのツールを使う場合は意図的にoffにする?

autoの場合

  • go.modが存在し、$GOPATH内であればmodulesを使うようになる。
  • Go 1.13より前の場合は挙動が変わる。

    GO111MODULE=auto enables module-mode if any go.mod is found, even inside GOPATH. (Prior to Go 1.13, GO111MODULE=auto would never enable module-mode inside GOPATH).

参考

【Java】JJUG CCC 2019 Springに参加してきた

概要

こちらに行ってきたので聞いたセッションを纏める。
CCCに参加するのは、今回2回目で雰囲気は大体分かってきた。
但し、毎回懇親会は行けておらず誰か一緒に行く人が欲しいとか思っている。

www.java-users.jp

初めてのgRPC by 前多 賢太郎さん

speakerdeck.com

  • gRPCについて
    • HTTP/2でデータを送受信する。
    • Protocol Buffersでデータ構造をとRPCを定義する。
  • RESTとの比較
    • ProtoファイルはSwaggerよりも記述量が少ない。
  • gRPC Javaの用語
    • Stub:RPCクライアント
    • gPRC Server:Stubからの接続を待つサーバー
    • gPRC Service:gRPC Serverで公開されるRPC
  • protoファイルをどこで管理するか
    • 各サービスごとにprotoファイルを格納する。
  • Spring BootでgRPCを使う
    • Spring Boot起動時にgRPCサーバーを起動してくれる。

パッケージ管理していなかった既存システムに後付けで Gradle を導入した話 by 矢崎 聖也さん

speakerdeck.com

  • レガシー改善の戦略
    • 困っていること・変えるメリットがあることを見極める。
    • そのために必要な必要十分な最小スコアを考える。
    • 小さいチャレンジで目的を達成する。
  • Gradle or Maven
    • 後付け導入にはGradleの方がオススメ
    • 柔軟性:GroovyやKotlin DSLで柔軟な処理が記述可能
      • 歴史的なプロジェクトの構成にはmavenは対応できない事がある。
    • 調査性:Groovy Javadocの方が読みやすい
    • 生産性:IDEのデバッガをフル活用できる。
    • 再現性:Gradle Wrapperがあるため、動作の再現性を確保しやすい。

先行開発!Javaでクリーンアーキテクチャ -- ゼロから始める新規開発 成瀬 允宣さん

nrslib.com

ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割 索手 一平さん

www.slideshare.net

LINEのBOT Platformの裏側の話 長谷部 良輔さん

speakerdeck.com

Functional Spring Cookbook Toshiaki Makiさん

docs.google.com

  • Spring Bootで関数型ライクな記述方法の説明
    • Webflux.fnや@SpringBootApplicationを使用しないでAppを起動する方法の紹介
    • このセッションを聞いて、自分の知識が大分遅れていると思った。
    • こちらのHands onを申し込んだので、キャッチアップしたい。(抽選当たらないかな...)

pivotal-japan.connpass.com

【TypeScript】【React】react-scripts-tsは何をしているのか?

概要

TypeScriptでReactを開発する時にcreate-react-appを使用してプロジェクトを作成すると、以下のようなpackage.jsonが作成される。

{
  /** 一部省略 */
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
}

毎回何となくraect-script-ts startをしてReact Appを起動させているので、今回調べた上で理解して動かすようにしたい。

恐らくwebpackts-loaderなどが設定されて良い感じに動くようになっているはず。。。

解剖してみる

まずnpm run ejectを実行して、react-script-tsを展開する。

実行すると以下のようなログが出力される。

ログを展開する

ts-react-practice-simple-app shabe$ npm run eject

> ts-react-practice-simple-app@0.1.0 eject /Users/shabe/Desktop/MyApp/practice/ts-react-practice-simple-app
> react-scripts-ts eject

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into /Users/shabe/Desktop/MyApp/practice/ts-react-practice-simple-app
  Adding /config/env.js to the project
  Adding /config/paths.js to the project
  Adding /config/polyfills.js to the project
  Adding /config/webpack.config.dev.js to the project
  Adding /config/webpack.config.prod.js to the project
  Adding /config/webpackDevServer.config.js to the project
  Adding /config/jest/cssTransform.js to the project
  Adding /config/jest/fileTransform.js to the project
  Adding /config/jest/typescriptTransform.js to the project
  Adding /scripts/build.js to the project
  Adding /scripts/start.js to the project
  Adding /scripts/test.js to the project

Updating the dependencies
  Removing react-scripts-ts from dependencies
  Adding autoprefixer to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-preset-react-app to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding chalk to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding extract-text-webpack-plugin to dependencies
  Adding file-loader to dependencies
  Adding fork-ts-checker-webpack-plugin to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding jest to dependencies
  Adding object-assign to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding promise to dependencies
  Adding raf to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding source-map-loader to dependencies
  Adding style-loader to dependencies
  Adding sw-precache-webpack-plugin to dependencies
  Adding ts-jest to dependencies
  Adding ts-loader to dependencies
  Adding tsconfig-paths-webpack-plugin to dependencies
  Adding tslint to dependencies
  Adding tslint-config-prettier to dependencies
  Adding tslint-react to dependencies
  Adding uglifyjs-webpack-plugin to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding whatwg-fetch to dependencies

Updating the scripts
  Replacing "react-scripts-ts start" with "node scripts/start.js"
  Replacing "react-scripts-ts build" with "node scripts/build.js"
  Replacing "react-scripts-ts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset

Running npm install...
up to date in 4.623s
Ejected successfully!

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

  • ログ見るとconfigscripts系のファイルが追加されている。
  • package.jsonに依存関係が追加されている。
{
"dependencies": {
    /** 一部省略 */
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.2",
    "ts-loader": "^2.3.7",
    "tslint": "^5.7.0",
    "tslint-config-prettier": "^1.10.0",
    "tslint-react": "^3.2.0",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.11.3",
    "webpack-manifest-plugin": "1.3.2",
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}
  • startコマンドを実行すると、scripts/start.jsを実行するようになっている。

scripts/start.js

簡単に説明するとconfig配下のwebpack.config.dev.jsなどの設定ファイルを読み込んでwebpack-dev-serverを起動するよう実装されている。

詳しくは中身を以下のソースを参照のこと。

github.com

config/webpack.config.dev.js

webpackの設定ファイルである。自分が知っているwebpack.config.jsと大分違う(設定が複雑で分からない...)

まぁ、ts-loadertsconfig周りだけ軽く見てみる。

ts-loader

  /** 一部省略 */
  {
    test: /\.(ts|tsx)$/,
    include: paths.appSrc,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          // disable type checker - we will use it in fork plugin
          transpileOnly: true,
        },
      },
    ],
  },
  • testと書いているがこれはts-loaderが対象にするファイル拡張子のこと。
  • includetestで指定したファイルの場所を限定している、この例ではsrc配下のファイルが対象となる。
  • loaderで使用するローダであるts-loaderを指定している。

    • ローダーは他にもfile-loadercss-loaderなどがある。
  • optionstranspileOnlyはトランスパイルのみで型チェックをしなくなる。

tsconfig

// Perform type checking and linting in a separate process to speed up compilation
new ForkTsCheckerWebpackPlugin({
  async: false,
  watch: paths.appSrc,
  tsconfig: paths.appTsConfig,
  tslint: paths.appTsLint,
}),
  • ForkTsCheckerWebpackPluginを使う事で、別プロセスで型チェックや静的チェックを実行するのでスピードがあがるらしい。

実際のtsconfigファイルは以下になる。

/** 一部省略 */
"compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  • moduleesnextはESモジュールの最新版と考えれば良さそう。
  • forceConsistentCasingInFileNamesはファイル名の大文字小文字のチェックを行う。
  • importHelperstslibのヘルパーをimportするかどうか。
  • 他は後々覚えていこう。

まとめ

react-scripts-tswebpackts-loaderなどの煩雑な設定を簡単にしてくれる物である。 但し、react-scripts-tsの状態では各種設定を弄る事は出来ないので、ejectする必要がある。 設定に疎いのであれば、react-scripts-tsに頼ってしまって問題ないのかなと思った。

参考

JJUG ナイトセミナー 3/28 参加してきた

概要

3/28日実施された、JJUGナイトセミナーに参加してきた。
今回のテーマは「Java 12リリース記念」ということで、
Java12の新機能および、ZGCの仕組みについて聞いてきた。

Java12の言語やAPIに関する変更 by きしだなおきさん

  • JEP 325 Switch式(プレビュー)
    • switchステートメントが式として使えるようになる。
    • caseに複数の値を指定出来るようになった。
    • プレビュー機能なのでjavac時に--enable-previewをつける必要がある。
      • 仕様変更が入りそうなのであまり取り入れない方が良い。
      • アロー構文を使うとbreak不要でswitchを使える。
  • Collectors.teeing
    • ふたつのCollectorの結果をまとめられる。
    • 3つ以上のCollerctorを使いたい場合は、teeingの中でteeingを呼べば実現出来る。
  • String.transform
    • 値→関数の順で書けるようになっている??
  • FIles.mismatch
    • ファイル違う箇所を返してくれる。
  • InputStream.skipNBytes
    • スキップするByte数を超えてしまうとExceptionを返却する。
    • skipはExceptionを返却しない。
  • Java13に入りそうなこと
    • Switch式の正式化
      • 13でpreviewが外れるかも。
      • ただし、break-withキーワードになる可能性がある。
    • JPackage
  • Default CDS Archives
    • クラスデータをあらかじめ作成して共有するという仕組み
    • JDK12からはbin/server/classes.jsaがあらかじめ含まれている。
    • Javaの起動が少し速くなったいるはず。
  • Java Flight Recorderツール
    • Javaのプロセスに入って、Javaのログを取得してくれる。

The Z Garbage Collector by Devid Buckさん

  • JDK11以降の新しいGC
    • どんなに大きいデータ量でもLow-Latencyで動作する
    • Compactionをすることが断片化を抑えることが出来る。
    • Single Generationなので1つの世代のみ管理する。
    • ヒープと生存データのサイズが停止時間に影響しない。
    • CMSやG1でStop The World起きてしまう処理が、ZGCだと一部しか起きない。
  • ZGCの仕組み
    • 最初に4TBのメモリ空間を確保する?
    • Coloerd Pointers(タグを含むポインター)
      • 利用されていないビットにメタデータを格納する
      • 32bitのJVMはサポート対象外
  • 利用方法
    • -XX:+UseZGCをつける
    • 開発中なので-XX:+UnlockExperimentalVMOptionsをつける必要がある。

参加してみて

Java12にすることで今までより、少し便利に書けるようになるという印象を受けた。
ZGCに関してはすごいの一言、ただマシンのスペックにも依存するので、適切なGCを選択するのが良いのかな。

JJUG ナイトセミナー 2/27 参加してきた

概要

2/27日実施された、JJUGナイトセミナーに参加してきた。
今回のテーマは「JVM言語を作ろう! GraalVMで遊ぼう!」ということで、
Javaというよりは、JVMや言語自体の仕組みについての発表だった。

JVM言語の動き方・動かし方 by 宮川 拓さん

  • 翻訳系
  • 実行系
  • OSの仕事
    • プログラムを使う仮想アドレス空間を確保する。
    • レジスタの元の値を退避しておく領域をスタック領域と呼ぶ。
    • スレッドごとにスタック領域を確保する。
    • 呼び出しの作業領域としてフレームを確保する。
    • 実行中のプログラムのコールで動的にメモリを確保する。
  • CPUの仕事
  • コンピューター、JVM、WebAssembly
  • JVM言語処理系
    • JavaScala、Kotlin、Groovyなど
    • JVMGCを任せられ、マルチスレッドの処理系で実用的に動くGCはとても難しい。
    • リフレクションのおかげでJava APIを使うことができる。

GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう by 阪田 浩一さん


この辺りから業務対応が入り、セッション聞けなかった...

TruffleでPHPぽい言語を実装したら爆速だった by きしだ なおきさん

がっつり業務対応していた...

参加してみて

今回のセミナーは結構難しかったが、自分の知識が広がった気がする。

【React】React + Redux 触ってみた

概要

Reactを学ぶべく、こちらの参考書を使って学習したので、
復習を兼ねてReactとReduxについて学んだことを記載する。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

Reactとは?

  • 画面表示を担当するフレームワークのこと。
  • 画面をコンポーネント(=部品)単位に分けて開発する。
  • コンポーントは基本的にJSXで記述される。
    • JSX(Javascript eXtension)はJS内でHTML構文を使えるようにしたもの。
    • 当然そのままではブラウザで表示できないので、トランスパイラというツールを使って変換される。
  • VDOM(Virtual DOM)を用いて差分のみ画面表示するので速い(らしい。
    • 今回学習した中では、VDOMの良さはよく分からなかった。

Reduxとは?

  • アプリケーションの状態を管理してくれるライブラリのこと。
  • 状態を更新をさせるにあはイベントを発生させる必要がある。
  • イベントを発生させる以外に更新方法がないので、シンプルな更新フローとなる。
  • FluxというFacebook公式ライブラリもあるため、Reduxを無理に使う必要はないかも。
    • FluxとReduxの違いはよく分からなかった。

React + Redux

表示を担当するReactと状態を管理するReduxを組み合わせる。
ここは初見殺しかと思うぐらい訳が分からなかった。
特にReactをReduxに接続する部分を理解するのに時間が掛かった。

概念

概要

自分の理解はこんな感じです。

Reactが表示している画面をユーザーが操作し、その時に発生したイベントでReduxが状態を更新、Reactは更新された状態を見て画面表示を変更する。

個人的には以下2つのポイントを理解すれば良いかと思う。

  • ReactはどのようにReduxにイベントを渡しているか。
  • Reactは更新した状態をどのように参照しているのか?


上記を実現するためにはreact-reduxというライブラリが必要になってくる。

登場人物
  • Action
    • Redux側の人物
    • 上で説明していたイベントに該当する。
    • ReactはこのActionを発行する。
  • Reducer
    • Redux側の人物
    • Actionを元に状態を更新する。
  • Store
    • Redux側の人物
    • 状態を管理している、Reudcerのみ更新可能。
  • ConnectedComponent
    • ReactとReduxを繋げる人物
    • react-reduxライブラリのconnect関数を用いて繋げる。
概念図

図で説明してみる、こちらの記事から概念図を拝借する。
qiita.com

f:id:shabe:20190106202722p:plain

ReactはどのようにReduxにイベントを渡しているか。

  • これはConnectedComponentがRedux側に渡している。
    • ConnectedComponentはdispatchという特殊な関数を保持している。
    • dispatchの引数にActionを与えることで、Reducerを呼び出すことが出来る。
  • その後Reducerでは渡ってきた引数を元に、Storeの状態を更新していく。
    • この時に前の状態をみて差分更新するのが大事。
    • 差分更新することで、React側は更新された箇所のみ描画をすることが出来る。

Reactは更新した状態をどのように参照しているのか?

  • mapStateToPropsという関数を使うことで、React側に値を渡している。
    • Store側の状態(State)をReact側の変数(Props)にマッピングすることが出来る。
    • この関数はConnectedComponent内で定義される。

感想

基本概念については大分理解してきた。
特に今回使った参考書の10章目がかなり理解を促進してくれた。

あとはComponentやStoreの設計方法などを知っていきたい。
まぁ、実践あるのみかなー、実務で使いたいなー!