「Meguro.css #4 @ oRo」に参加してきました

  • Meguro.cssに参加してきました

megurocss.connpass.com

  • Meguro.css#2以来の2回目の参加でした。
  • 実用的な話が多くて特にShadowDOMの実践的な話を聞けてとても勉強になりました。
タイトル 発表者
雑誌風レイアウトをCSS Grid Layoutでリファクタリング @c_re
CSSフレームワークを自作してみた話。 @kokushing
CSS と Shadow DOM @ktsn
outline: none; @yamanoku
Marqueeタグでゲームを作りたい @bug_ojisan
word-wrap周りのベストプラクティスを考えてみた @masahiko888

雑誌風レイアウトをCSS Grid Layoutでリファクタリング

  • @c_reさん

雑誌っぽいレイアウト

前提

  • 既存のflexboxをGrid Layoutに
  • レスポンシブに

苦労したとこ

  • IE11対応苦労した
    • grid itemに指定したmargin/paddingがおかしい
    • grid containerに対するalign-item, grid itemに対するalign-selfが効かない

よかったとこ

  • ゴードが読みやすくなった
  • レスポンシブはモバイルファーストで組んだ方が楽

CSSフレームワークを自作してみた話。

  • @kokushingさん

CSSフレームワーク使ってて

  • 使いづらいなと思うところがある
    • 記述の癖
    • 使わないスタイル
    • 日本語つまってる
    • デザイン好みじゃない
  • -> 自分で作った

自作フレームワーク

UNITS

unitscss.kokush.in

Uny

unys.github.io

  • 柔軟性を意識
  • SCSSを採用
  • スタイルの一括調整
    • メンテナンス性
  • pxではなくremを使ってフォントサイズ管理楽になった

Unim

kokushin.github.io

  • まだ公開してない
  • レイアウト用、テーマ用、カラー用のスタイルに分割
  • 日本語での表示に特化

mono.css

kokushin.github.io

jpn.css

kokushin.github.io

  • bootstrap合わせて使うと日本語が読みやすくなる

CSS と Shadow DOM

  • @ktsnさん

ShadowDOM

  • スコープが区切られたDOMを作れる
    • 外部のCSSは内部に影響を与えない
    • 内部のCSSは外部に影響を与えない
  • CSSが漏れない

使ってみって

  • reset.cssどうする?
    • shadowDOMごとに読み込む
  • 手っ取り早くリセット
    • all:initial;
    • all:unset;
  • テーマ変更
    • CSS Custom Property
:root {
  --text-color: red
}

var(--text-color);
  • 外から自由にスタイルを変えたい
    • ;;part``::themeが提案中

対応状況

outline: none;

  • @yamanokuさん

outline

  • 輪郭線
  • outline: none;
    • フォーカスした要素の輪郭線を消す

outline: none;なぜよくない?

  • 現在位置わからなくなる
  • a11yが悪くなる
  • http://www.outlinenone.com/
  • とはいえデフォルトのフォーカスはいけてない

マウスとキーボードを別にする

  • forcus-visible
  • キーボード操作でフォーカスしたときだけスタイルを当てる
    • 使えないブラウザがほとんど
  • jsライブラリ

github.com

まとめ

  • outline: none;をする前に一旦立ち止まろう
  • 問題なければデフォルトでいいとおもう
    • スタイル変えるならよく考えないといけない
  • いろんなサイトをタブキーで移動してみよう

Marqueeタグでゲームを作りたい

  • @bug_ojisanさん

Marqueeタグ

Marqueeタグの可能性

  • ゲームとか作れそう

  • パラメータは変数ではないので衝突判定とかできない

  • CSS in JSで作り直す
    • remarquee

remarquee

www.npmjs.com

  • 衝突判定したい
  • Reactベースで
  • 横に動くだけで100%追従してるものはない

word-wrap周りのベストプラクティスを考えてみた

  • @masahiko888

word-wrap

  • 固定幅の要素内で文字が横にはみ出させずに折り返したい
  • word-wrap: break-word
  • word-wrap: break-all
  • break-wordでダメな時に安易にbreak-allしてはダメ
  • 考えないと行けないパターン
    • 英字の連続
    • 、。…の連続
    • 、。…の禁則処理

どうしたらよいか

  • 基本はbreak-word
  • 禁則処理が発生しないところはbreak-all

「どこでもKotlin #6 〜Kotlin 1.3の新機能に触れる〜」に参加してきました

  • どこでもKotlin #6 〜Kotlin 1.3の新機能に触れる〜に参加してきました。

m3-engineer.connpass.com

  • 最新のKotlinの話やサーバサイドKotlin、Kotlin/Nativeと幅広い話が聞けて勉強になりました。
  • Kotlin/Nativeは気になりつつもあまり情報収集できていなかったので参考になりました。着実に進歩しているものの今はまだ様子見といった印象ですかね。
  • 後は太郎さんのContractsの説明めちゃくちゃわかりやすかったです。
タイトル 発表者
What's new in Kotlin LINE 藤原 聖
コードで見る Kotlin 1.3 M3 大和 康平
8割完成済みのJavaプロジェクトにKotlinを途中導入した話 M3 川俣 涼
Kotlin/Native 「使ってみた」の一歩先へ M3 星川 貴樹
Kotlin Contracts Ubie 長澤太郎

What's new in Kotlin

  • LINE 藤原 聖さん
  • エムスリー技術顧問

Kotlin Conf 2018

  • JetBrainsが主催
  • 今年で2回目
  • 1300人以上参加
  • 65セッション全て動画公開

www.youtube.com

Keynote

  • Kotlin言語設計者のAndrey
Pragmatic
  • 実用主義
  • 開発者が考えたことをそのままコードにできる

Evolution

  • Keep the language modern
  • Comfortable update
  • 言語をモダンに保ちつつIDEの補完でサポート

Kotlin 1.3 Release

  • 10/29リリース
  • Coroutinesがstable
  • Kotlin/Nativeがbeta
  • Contracts, Inline classes等experimental

最新情報

コードで見る Kotlin 1.3

  • M3 大和 康平さん

Kotlin1.3事始め

  • brew install kotlinで1.3入る

Croutines

  • 軽量なスレッド
  • Croutines builder

Inline Classes

  • コンパイル時にオーバヘッドが少なく展開できる
  • static methodとして展開される
  • プライマリコンストラクタのプロパティ1つまで
  • init文を持てない

標準関数

  • Random
  • isNullOrEmpty/orEmpty
  • Array.copyInto
  • ifEmpty/ifBlank

8割完成済みのJavaプロジェクトにKotlinを途中導入した話

  • M3 川俣 涼さん

JavaプロジェクトにKotlin導入

  • 社内でKotlin導入の流れ
  • 新しい技術への挑戦

進め方

  • 新規追加のクラス/テストはKotlinで

メリット

  • コード量の減少で開発効率アップ
    • data class
  • Null安全がいい
    • nullpo事前に分かるのいい

デメリット

  • なかった
  • 強いて言うなら情報が少ないこと
    • qiitaの記事Java + SpringBootは1250、Kotlin + SpringBootは132
  • Javaコンパイラ周りの知識は必要
    • lombokを使ってるJavaクラスのプロパティを参照できない
    • JavaからKotlinのクラスを参照するとビルドエラー
    • コンパイルの処理順序を知っておくことが必要

Kotlin/Native 「使ってみた」の一歩先へ

  • M3 星川 貴樹

Kotlin/Nativeとは

Kotlin/Nativeの歩み

  • 2017/4登場
    • Cのヘッダーファイルを解釈することできた
  • 2017/11
  • 2018/2
    • MPP対応
  • 2018/4
  • 2018/6
    • JVM, JSのstdlibに
  • 2018/11beta
    • 安定版コルーチンサポート
    • Kotlin1.3

Kotlin/Nativeの使いみち

  • Java資産使えないのに価値あるの?
    • Cのライブラリなら使える
    • iOSならSwift, Objective-Cのライブラリ使える
  • Kotlin stdlibにない機能はどうするの?
    • コルーチン等いろいろ対応されてきてる
  • メモリ管理どうするの?
    • GC独自実装している
    • iOSであればARC値返る
  • 想定される使い道
    • Andoroid, iOS, (Web)の共通モジュール
    • サーバとクライアントのモデルクラスの共通化
    • MVPのMとPをKotlinでVはOSごとのコードで

Kotlin/Native速いの?

  • JVMの方が2倍速い
  • 最適化作業がまだされてないから?

Kotlin/Nativeのこれから

  • MPPで使えるライブラリを使うようにする
  • KotlinライブラリのMPP化
  • iOSエンジニアの理解

Kotlin Contracts

  • Ubie 長澤太郎

従来のKotlin

  • 便利な関数があるのにスマートキャストできない
    • !name.isNullOrBlank()と書くと
      • Nullableな変数をnullでないと確認した後はNonNullで扱いたい
      • 文脈的に明らかにnull出ない場合でもコンパイラがエラーという
      • name != nullって書かないと行けなかった
      • これが1.3からちゃんと動くようになる

Contracts

  • 事前条件
    • 関数の利用者が条件を満たす
  • 事後条件
    • 関数を呼び出した後の状況を関数が保証する
    • ex. List#addしたらlengthが1増える
  • 不変条件
    • オブジェクトが満たすべき状態を維持する
  • Contractsは事後条件の部分
    • しかも静的に

対応してる標準関数

  • 引数がtrueを保障
    • assertTrue
    • check
    • require
  • 引数がfalseを保障
    • assertFalse
  • 引数がNotNullを保障
    • assertNotNull
    • checkNotNull
    • requireNotNull

従来のKotlin2

  • val変数の初期化が絶対成功するはずなのにできない
  • ラムダの中での初期化はは一度だけしか呼ばれないのに分かってくれない
    • これが1.3からちゃんと動くようになる
  • InvocationKind
    • AT_MOST_ONCE
    • EXACTRY_ONCE
    • AT_LEAST_ONCE
    • UNKNOWN

契約DSLまとめ

  • contract: 関数の先頭
  • returns(): 関数が成功したら..
  • returns(Any?): true/false/nullを返したら..
  • callsInPlace: 関数が呼ばれる回数を保障する
contract {
  returns(true implies (arg != null)
}
contract {
  callsInPlace)block, InvocationKind.EXACTRY_ONCE)
}

「Vue Fes Japan 2018」に参加してきました

  • Vue Fes Japan 2018に参加してきました。

vuefes.jp

会場A 会場B
キーノート
Evan You
-
Next-level Vue Animations
Sarah Drasner
Vue.js と Web Components のこれから
Takanori Oki
Vue Designer: デザインと実装の統合
katashin
Unit testing a Vuex store
Edd Yerburgh
Atomic Design のデザインと実装の狭間
菅原 孝則
Nuxt.js 2.0
Sébastien Chopin
A deep dive in SFC compilation
Rahul Kadyan
note のフロントエンドを Nuxt.js で再構築した話
福井 烈
Vue CLI 3 and its Graphical User Interface
Guillaume Chau
1年間単体テストを書き続けた現場から送る Vue Component のテスト
土屋 和良

キーノート~ Vue3.0 Updates ~

  • Evan Youさん

Vue3.0

  • より速く
  • より小さく
    • tree shaking対応
  • よりメンテナンスしやすく
  • よりネイティブ向けに作りやすく
    • カスタムレンダラAPI
  • よりあなたのコードの保守性を向上
    • tsxによるTypeScriptサポート
    • HooksAPI(Experimental)
    • TimeSlicing(Experimental)

より速く

  • 仮想DOMの実装を作り直した
    • moutとpatch処理が最大100%向上
    • 後方互換性も保つ
  • ネイティブプロキシを使って高速化
  • コンパイルの仕組みも高速化
    • コンポーネント探索の最適化
    • 依存関係を正しくトラッキングし不要な親子のレンダリングを回避
    • 静的ツリーの巻き上げ
      • テンプレートの静的な部分と動的な部分を区別して最適化
      • インラインで定義してる関数も巻き上げてキャッシュする
  • => コンポーネントの初期化が最大で100%高速化する!

より小さく

  • tree shaking対応
    • 使われていないコードをバンドルされたファイルに含まないようにする

よりメンテナンスしやすく

よりネイティブ向けに作りやすく

  • カスタムレンダラAPI
    • 対象はブラウザだけでない
    • ios/android(WeexやNativeScript)

あなたのコードの保守性を向上

  • リアクティビティAPI
    • observableメソッドでstateの変更を監視
    • リアクティブの画面に反映
  • コンポーネントの再描画をデバッグしやすく
    • renderTriggered
  • TSXによるTypeScriptサポートの強化
    • render関数にtsxを書ける
  • warningメッセージの改善
  • HooksAPI(Experimental)
    • mixinのネームスペースの問題を解決できる
  • TimeSlicing(Experimental)
    • 重い処理があってもブロッキングしなくなる
    • 処理を分離させている
    • 60fps

Vue.js と Web Components のこれから

  • Takanori Okiさん

WebComponsntesとは

仕様

  • Custom Elements
    • 自分でHTMLのタグを作れる
  • Shadow DOM
  • HTML Template
    • 独立したHTMLかたまりを定義できる
    • <templates>
  • ES Modules
    • JSファイルをimport/exportできる
  • HTML Modules
    • HTMLをJavaScriptの中に直接import可能にする仕様

どうやってWebComponentsをVueで作るか

  • VueCLI3のBuildTargets
  • --target wcをつけるとvueのコンポーネントをWebComponentsに変換してbuildできる
  • これで生成されたファイルは単体でWebComponentsとして動く
  • VueからWebComponentsにスムーズに移行できる

なぜWebComponentsを使うのか

- 今のところVueの機能を使ってWebComponentsを作ったほうが楽

メリット

  • 同じコンポーネントをどんなライブラリとも一緒に使える
  • FullScoped
    • VueだけではうまくScopedに振る舞わせられるだけ
    • グローバルなCSSに影響されなくなる

デメリット

  • 属性にString型しか渡せない
  • 外部から渡されるイベントハンドリングが難しい

Micro Frontend

  • サーバサイドのマイクロサービスのようにフロントエンドもマイクロサービス化
  • 外側はVueで細かいパーツはWebComponents

変更に強い柔軟なWeb

  • WebComponentsならScopedなので以下のような変更が楽
    • CSSの変更
    • JSの変更
    • ライブラリの変更
    • DOMの変更
  • Framework移行はとても大変
    • Vueが死んでもWebComponents使ってればmigrationしやすい
  • Web標準であることは強い

今後どうなるか

  • VueはWebComponentsに置き換えられていく?
    • No
    • 共存していくもの
  • WebComponents is to encapsulate HTML elements

まとめ

  • WebComponentsまだ課題もある
  • VueとWebComponentsは共存できる
  • UIをWebComponentsに任せることで負債を減らせる

Vue Designer: デザインと実装の統合

  • katashinさん

今のWebアプリ

デザインと実装が分かれている

  • デザイナー
    • デザイン用のツール
  • 開発者
    • デザインの通りに実装
  • 昔よりUIや設計が複雑になってきたので分業化されてきた
  • 分業することによる課題もある

デザインと実装が分かれることによる課題

  • デザインのファイルと実装するファイルが違うので二度手間
  • 小さな改修でのコミュニケーション問題
  • デザインは静的
  • => みんな解決しようとしている
ライブラリ
  • vuegg
    • 結局プロトタイプでしか使えなさそう

vuegg.now.sh

technical-creator.com

  • SFCが実装かつデザインになるようなツールがほしい
    • そこでVue Designer

Vue Designer

github.com

  • VSCode上で使う
  • VueアプリのプレビューがVSCode上で見られる
    • windowsサイズを柔軟に変えられる
    • プレビューで画面を選択するとそれに該当するコードがハイライトされる
  • SFCが唯一のデータ
    • デザインしたものがVueのコードになる
    • 実装もデザインも同じコード

仕組み

  • html
    • vue-eslint-parser
  • js
    • @babel/parser
    • babelはtsにも対応した
  • css
    • postcss

今後

  • v1.0.0までの展望
    • 開発者が使って便利なものにしたい
    • SFCのプレビューツールとしてでも便利
    • Chrome devtools on VSCode
    • Layouting tool
  • その先
    • npm i element-ui vuetify quasar-framework vuesaxするだけでデザイン使えるように
    • デザイナーと開発者がgithubで同じコードを編集
    • コンポーネントカタログ自動生成

まとめ

  • デザインと実装が分かれてることによる課題がある
    • 統合したい
    • Vue Designer
  • まずは開発者が便利に使えるツールに
  • 将来的にはデザイナーも開発者も使えるツールに

Atomic Design のデザインと実装の狭間

  • 菅原 孝則さん

コンポーネント

  • デザイナーとエンジニアが同じ目線でコンポーネントを設計するのは難しい
  • AtmicDesignでもダメ
  • 知識の分断が大きい
  • 大事にしていることも違う

デザイナーがやってること

  • やってること
    • UXデザイン
    • UIデザイン
    • 他にもいろいろ
  • 大事なのはユーザの反応
    • 綺麗に作ることも大事だけどその次
  • コンポーネントはエンジニアリングの概念

デザインのツール

  • コンポーネント指向のデザインツールはあまり流行ってなかった
    • 最近は出てきた
    • みんな慣れてないだけ
  • 手段が進化したので手法も変わる
    • まだまだツールのサポートが足りない
    • 時間が解決するところもあるだろう
  • コンポーネント指向でAtomicDesign
    • Cしか知らない人にSpringBootでアプリ作れと言ってるようなもの

Design Ops

  • デザインの仕事に集中できるように
  • デザインプロセスをサポートする仕組み組織を作る

まとめ

  • デザイナーがデザインに専念できる環境を作ろう
  • やり方はまだみんな手探り
  • エンジニアがそれをサポートしよう

note のフロントエンドを Nuxt.js で再構築した話

  • 福井 烈さん

Nuxt移行のモチベーション

  • 2013年にAngularJSで実装開始した
    • UI複雑
      • 2way-binding

現状の課題

  • 初期表示の遅さ
  • 技術的制約
    • AngularJSはSSRサポートしてない
    • Railsに乗ったフロントエンド
  • 技術的負債

技術選定要件

  • 要件
    • SSR
    • 学習運用コスト
      • デザイナーもコード書く
        • フロントエンド専任がいない
    • 開発コミュニティの活発度
  • Vueがこれらを満たすので採用
  • さらにNuxtも採用
    • SSRが作りやすい
    • コードの規約がある
    • Webpack等も入ってる

移行計画

  • ベージ単位で移行
  • ドックフーディン
  • 一部のページはNuxt版が動いてる
  • lighthouseのパフォーマンス 3点 -> 41点
    • 現状残っている指摘は画像の最適化

技術

コンポーネント設計

  • Vuex
  • AtomicDesign
    • atomsとmoleculesはvuex参照禁止
    • organismsはvuex参照可
  • Storybook
    • Nuxtとの設定互換がつらい
      • v4で改善

ユニバーサルJS

  • SSRするから対応必須
  • サーバサイドからはwindowやdocumentが見えないから改修しないといけない
    • ライブラリが使ってるとどうしようもない
    • jsdomを使って対応

ファイルサイズの圧縮

  • nuxt build --analyze
  • highlight.js(コードに色つけるやつ)言語絞ってサイズ削減
  • moment.jsをday.jsに
  • lodashやめる

インフラ

  • 当初はEC2 + node + pm2
    • Serverless Frameworkに変更
  • nodeのバージョンがLambdaに依存してしまう

まとめ

  • URL単位で小さく移行するの有効
    • ドックフーディング容易
    • 完全移行までの二重メンテは覚悟いる
  • NuxtはSSR必要なら有用

1年間単体テストを書き続けた現場から送る Vue Component のテスト

  • 土屋 和良さん

コンポーネントのテスト書いてますか

  • UIは変更が多いからテストしない?
    • テストがないと意図しない変更が起きないか不安

コンポーネントの何をテストするのか

  • 外部からみた振る舞いをテストする
    • 自動テストのターゲットは外から見た振る舞い
  • input/outputを整理
  • mount? or shallow?
    • 基本的にmount

どうやってコンポーネントをテストするか

Lifecycleのテスト

  • 他のテストよりは優先度低
    • 得られる安心感は少なめ

Props/VuexStateのテスト

  • 単純なassert
    • どこまで細かくチェックする?
    • 文言変わっただけで書き直さないといけないの面倒
  • SnapshotTest
    • DOMのスナップショットをとって次のテストのexpectedにする
    • CSSもテストしたい
      • -> VisualTesting
  • VisualTesting
    • SnapshotTestの画像版
    • Storybook + reg-suit
  • reg-suit
    • CIのフローに組み込むとこまでサポートしてくれている
      • PRで結果が見えるとか
    • PRのレビューが効率化

reg-viz.github.io

User Interactionのテスト

  • User Interaction
    • 入力
    • クリック
    • スクロール
    • D&D
    • ....
  • 全部やるのは大変
    • 入力、クリックくらいなら簡単
      • そこだけテストしている
  • 簡単なUserInteractionテストは大変じゃない
    • 重要なフォームだけでもやっておくといい

まとめ

  • VisualTestは最高
    • 簡単に作れる
    • レビュー負荷も下がる

「React会 #1」に参加してきました

  • React会 #1に参加してきました。

react-kai.connpass.com

  • React Hooksで盛り上がってる中でのReactのイベントということで、最新情報をキャッチアップできる勉強会でした。
  • React会は今後React meetupと合流するということで、Reactコミュニティの盛り上がりにも期待してます。
タイトル 登壇者
typescript-fsaに頼らないReact/Redux camcam_lemonさん
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 大岡由佳@oukayukaさん
ReactNative(Expo) + Firebaseを使って爆速でアプリを作る はがさん
React Hooksで遊ぼう yamatatsuさん
Context APIを使ったライブラリを作った dai_shiさん

typescript-fsaに頼らないReact/Redux

  • camcam_lemonさん

Component

Stateful Component

  • interfaceかtypeでprops/stateを宣言

Stateless Functional Component

  • React.SFC<P>で型付ける

Container

  • maoStateToProps
  • mapDispatchToProps
    • reduxのDispatchで型つける

Action

  • actionのtypeプロパティにas typeof xxx
  • typeをただの文字列じゃなくて型として扱える

Reducer

  • Conditional typeのReturnTypeを使ってActionを型定義
  • switch文で該当するものがなければdefaultでnever型で拾う
    • 受け取るActionが一つの時はnever使えない
    • if使う

まとめ

  • tsの機能だけでいい感じに型をつけることができる
  • ActiontReducerのテンプレを崩さずに書けるのがいい

Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察

  • 大岡由佳@oukayukaさん

技術書店で本出した

  • Reactの本
  • RecomposeとHOCの話も書いてた
  • その数日後ReactConfでReact Hooks発表
  • Recoposeは開発終了今後はReact Hooksでとのアナウンス
  • 嘆いてたらDan先生からDMが来た

Recomposeとは

  • 関数コンポーネントやHOCのためのReactユーティリティ
  • 関数コンポーネントにローカルステートやライフサイクルメソッドが追加される
  • Reduxのconnectなんかがそれ

なぜRecomposeは開発をとめるのか

  • Recomposeの作者がfacebookにジョインしてHooksを作った
    • withStateとuseStateがそっくり

これからどうなるか

  • ReactHooks反響大きすぎて後戻りすることはない
  • HOC, Render Propsもフェードアウトしていくのではないか
  • classコンポーネントもそのうち非推奨になりそう
  • Reduxがなくなることはないのでは
    • connectがuseReduxのようなインターフェースになるのでは

github.com

ReactNative(Expo) + Firebaseを使って爆速でアプリを作る

  • はがさん(FACTBASE)

docs.google.com

サンプルアプリ

Expo

  • ReactNative開発をWeb開発に近づけるプラットフォーム兼ライブラリ
  • アプリのビルドをせずとも実機で動作確認できる

ReactNativeのライブラリ

  • ReactNavigation
    • ナビゲーションライブラリ
  • NativeBase
    • UIライブラリ
  • react-native-swiper
    • 画像のスワイプ簡単に作れる
  • react-native-gifted-chat
    • チャット風UIを簡単に作れる

まとめ

  • OSSを活用すると爆速で作れる
  • Expo使うことでビルドで実機とPCを繋がなくてよかった

React Hooksで遊ぼう

  • yamatatsuさん

React Hooks

  • 三行で言うと
    • Functional Componentで状態を持てる
    • Functional Componentでupdate系のイベントを扱える
    • Consumer無しでContextを使える とかとか

useState

  • Functional Componentでstate持てる

useReducer

  • reducerっぽく使えるuseState

useCallback

  • memoKeyが変わらない限り一回しか実行されない
  • 一回だけ走って欲しいやつに使う

useMemo

  • useCallbackに似てる
  • 関数の戻り値をくれる

uesRef

  • createRef的な

DidMount

  • Dan先生曰くSuspenceを待たれよとのこと

Context APIを使ったライブラリを作った

  • dai_shiさん

ContextAPI

  • React16.3ではいった
  • Reduxの代替になるのではと噂に
  • コンポーネントツリーの階層をジャンプして値を渡すことができる
  • Providerで値を渡してConsumerで値を受け取る
  • State管理できるわけではない
  • npm化した

github.com

React Hooks

  • React Hooksで世界が変わる
  • classでしかできなかったことがなくなる
  • hooks版も作った

github.com

itnext.io

「Spring Fest 2018」に参加してきました

  • Spring Fest 2018に参加してきました。

springfest2018.springframework.jp

KFCHall KFCHall Annex KFCHall 2nd Room111
KEYNOTE
SébastienDeleuze(Pivotal)
- - -
決済システムの内製化への旅 ‒ SpringとPCFで作るクラウドネイティブなシステム開発
槙 俊明(Pivotal)
鈴⽊ 順也(ソフトバンク・ペイメント・サービス株式会社)
エンタープライズ・マイクロサービスの格⾔
⻑⾕川 裕⼀(Starlight&Storm/⽇本Springユーザ会)
Spring Data for Apache GeodeでRDBいらずのアプリ開発をしよう!
⼭河 征紀(ウルシステムズ株式会社)
これからSpringを使う開発者が知っておくべきこと
⼟岐 孝平(⽇本Springユーザ会スタッフ)
Rakuten Travel and Spring
Kalburgi Gajraj(楽天株式会社)
Spring ♥ GCP ー SpringとGCPの素敵な関係
福⽥ 潔(Google)
実際のプロジェクトでSpringアプリをKotlinで開発して得た気づき集
⻑澤 太郎(Ubie株式会社)
Thymeleafさいしょの⼀歩
伊賀 敏樹
Knative:Serving your Serverless Java Serviceon Kubernetes the 12-Factor way
Kamesh Sampath(Redhat)
Observability with Spring-Based Distributed Systems
Thomas Ludwig(楽天株式会社)
AmazonCognito使って認証したい?それならSpring Security使いましょう!
内⽴ 良介(コイニー株式会社 ⽇本Javaユーザーグループ)
SpringBootで作るRESTful Web Service
⼤野 渉(Starlight & Storm/JSUGスタッフ)
Pivotal認定講師が解説!基礎からのOAuth2.0とSpring Security5.1による実装
多⽥ 真敏(株式会社カサレアル)
500+のサーバーで動くLINE Ads PlatformをささえるSpring
渡邉 直樹(LINE株式会社)
SpringTools4の機能とその実装
岩塚 卓弥/堅⽥ 淳也(NTTソフトウェアイノベーションセンタ)
Spring5でSpring Testのここが変わる
平栗 勇⼈(株式会社NTTデータ)
Spring Boot with Kotlin, functional configuration and GraalVM
SébastienDeleuze(Pivotal)
⼤規模⾦融系SaaSを⽀えるSpring〜活⽤の変遷と新時代のアーキテクチャ
⽝塚 裕介(株式会社野村総合研究所)
Spring Data RESTとSpring Cloud Contract
⼩川 岳史/⼭﨑 ⼤(株式会社タグバンガーズ)
Spring BootでHello Worldのその先へ〜ウェブDBプレスのSpring Boot特集で伝えたかったこと&伝えきれなかったこと~
藤野 真聡(ソニーネットワークコミュニケーションズ株式会社)
業務で使いたいWebFluxによるReactiveプログラミング
⾕本 ⼼(Acroquest Technology株式会社)
- Micrometer/Prometheusによる⼤規模システムモニタリング〜ヤフーインターネット広告システムでの導入事例〜
池⽥ 誠(ヤフー株式会社)
Angularを⽤いたデザインスプリント開発と設計⼿法
佐川 夫美雄(アシラス株式会社)

KEYNOTE - The State of Spring, Java and Kotlin

  • SébastienDeleuze(Pivotal)

Javaの現状

  • Java8が広く使われるようになってきた
    • 2017/10で75%くらい使われてる
    • 残りはほとんど7
    • 9はLTSじゃないから少ない
  • JavaSE Lifecycle
    • LTSは3年ごと
      • 次は11その次は17
    • 6ヶ月ごとにリリース

Java LTS Version

  • Java8
    • Java8がベースになっていく
    • 2023+までサポート
  • Java11
    • 2023+までサポート
  • Java17
    • 2021リリース予定

SpringとJava

  • v4.3はJava8まで
    • EOLは2020/6
  • v5.0はJava10まで
    • EOLは2019/3
  • v5.1はJava11まで
    • EOLは2019/12
  • v5.2はJava12までサポート

New VM

  • GraalVM
    • High performance polyglot VM

Kotlinの現状

  • 今一番伸びている言語
    • stack overflowやgithubのデータより
  • 1.3がつい最近リリース
    • コルーチンが目玉
    • Kotlin/Nativeがbetaに

Springの現状

SpringFramework5.1

  • v5.1でJava8と11をサポート
  • non-LTSはベストエフォート

SpringBoot2.1

  • v2.1が昨日でた
  • Java11サポート
  • 3rdパーティライブラリアップグレード
  • Spring Data JDBC Starter
  • 起動時のパフォーマンス改善

Roadmap

  • SpringFrameworkのv5.2でKotlinのv1.3をベースにする
    • コルーチンもサポート
  • 公式ドキュメントにKotlinのサンプルコードも含めるようにする

R2DBC

  • Reactive SQL SPI
  • Reactive Streamベース
  • PostgreSQL driver more to come

Spring Data R2DBC

  • Spring Data JDBCに似てるけどこっちはReactive
  • DatabaseClient functional API

GraalVM

  • SpringBootが一瞬で起動するデモ
    • 0.006s?

RSocket

  • ネットワークをReactiveにする
  • facebookを中心に4社で作ってる
  • モデル
    • request response
    • fire and forget
    • request - stream
    • channel
  • クライアント
    • JavaでもJSでもKotlinでもC++でも
  • SpringFramework v5.2から

Spring Fu

  • SpringをFunctionalに書く
  • Faster and Lighter
  • Kofu
    • KotlinによるSpring Fuのconfiguration
    • Kotlin DSL
  • Jafu
    • JavaによるSpring Fuのconfiguration

まとめ

  • パフォーマンスを上げることとReactiveに力を入れてる

決済システムの内製化への旅 ‒ SpringとPCFで作るクラウドネイティブなシステム開発

  • 槙 俊明(Pivotal)
  • 鈴⽊ 順也(ソフトバンク・ペイメント・サービス株式会社)

内製化に至る過程

2016

  • 課題
    • 開発は全てベンダ任せ
    • 開発環境も整ってない
    • 手作業によるミスが起きる
  • 解決策
    • 改善プロジェクト
    • SpringBoot, Selenium
    • github入れたり
    • エンジニアが3人入社

2017

  • 課題
  • 解決策
    • 監視ツール導入
    • FWはSpringで統一
    • jenkins, nexus, sonar

2018

  • 決済システムの内製スタート
    • オンライン決済サービス
    • 加盟店にAPIを公開
    • 複数の決済手段で決済
    • 加盟店(8000件) -> 決済システム -> 決済機関(40件)
  • 求められてたこと
    • スピード感
    • 継続的な改善
    • 監視が容易で障害に強い
    • -> ベンダーに頼ると実現できないので内製で
  • PCF上に構築することに
    • 槙さんがサポート

なぜPCF

  • PCF
    • Pivotal Container Service
    • Pivotal Application Service
      • Cloud Foundry
    • Pivotal Function Service
      • Knative, riffがベース
  • この事例ではPvotal Application Serviceを採用
    • 3つのうちどれが良いかはチーム構成ややりたいことによる
  • チーム体制
    • ops2名 - PCFの面倒見る
    • dev3名 - アプリ作る
  • 12factorに従って作ればPCFを意識しなくてもPCFで動く
  • PaaS vs Kube
    • 開発者視点で
      • いろんなことをやりたくなかった

技術の話

全体アーキテクチャ

  • CI周り
  • PAS
  • RabbitMQ
  • 監視周り
    • Prometheus
    • Grafana
  • ログ周り
    • Logstash
    • Elasticserch
    • Kibana
  • Dev環境とProd環境を用意

アプリのアーキテクチャ

  • マイクロサービスで作ってる
    • API Gateway
      • Spring Cloud Gayteway
    • ServiceA, B, C
      • 決済機関単位で?作成
    • Hystrix入れてサーキットブレーカも
      • 障害があった時に関係ない決済機関も使えなくなる訳にはいかない
    • 決済機関から加盟店への通知はRabbitMQで非同期に連携
      • Spring Cloud Stream
      • Notification Gateway
      • 通知失敗したらDeadLetterQueとして返ってくるので再送する
  • PCFによるAutoscaler
    • 急な負荷に対応する
    • スケールに関してアプリ側が何か意識する必要はない
  • 12factor
    • 環境に依存する設定項目は環境変数
    • ログはファイルではなく標準出力に
      • 絶対にロストしてはいけないデータはDBへ

CI/CD

  • Concouseで動かす
    • slackに通知
    • github enterpriseと連携
    • pushする -> JUnit実行 -> Sonarに結果送る -> nexusへ配置 -> 開発環境へリリース
      • 本番では自動でバージョンのインクリメントとかも
      • 槙さん謹製の構成(どこかで見たことあるような構成)
  • 負荷テスト、E2Eテストも自動で
    • JMeterで負荷テスト
      • 開発環境で毎日
    • E2Eテスト
  • Javaの複数バージョン対応
    • 複数のバージョンでのテストをConcourseで同時に実行
    • docker使ってるので複数バージョン並列実行を簡単にできる

Observability

  • Observability
    • Tracing
    • Metrics
    • Logging
  • Zipkin使ってる
  • Grafanaダッシュボードでメトリクス監視
    • BOSHで入れるとダッシュボードやアラートがデフォルトで入ってる
    • micrometerの依存追加するだけで使える
  • Kibanaでログを見てる

実際のプロジェクトでSpringアプリをKotlinで開発して得た気づき集

  • ⻑澤 太郎(Ubie株式会社)
  • jkug代表

KotlinでSpringを始める

  • Spring InitializrでKotlinを選べるようになってる

クラスにつけるアノテーション

  • Kotlinのクラスはデフォルトfinal
    • 継承したいならopenってつける必要がある
    • @Serviceするならopenしないといけない
    • Kotlin公式のallopenプラグイン
    • Kotlin公式のkotlin-springプラグイン
      • @Service等々は自動でopenしてくれる
      • SpringInitializrで作れば入ってる
  • アノテーションの解析ないから速い

バリデーション

  • これだとダメ
class Xxx (
  @NotNull val age: Int,
  @NotBlank val name: String
)
  • Javaを意識してこう書かないといけない
class Xxx (
  @field:@NotNull val age: Int,
  @field:@NotBlank val name: String
)
  • デフォルトではもともとnull許容しないので注意
    • ?つけるとnull許容型
class Xxx (
  @field:@NotNull val age: Int?,
  @field:@NotBlank val name: String
)

WebFluxとコルーチン

  • ReactorはAPIとか覚えることたくさん
  • Reactorとコルーチンを組み合わせると書きやすい
  • Reactorの世界とKotlinの世界を処理の途中でいったりきたりできる
    • async/awaitとか使って書く

アノテーションをやめる

テスト

  • Spring Test - WebTestClient
  • AssertJ
  • MockK
  • DbSetup-kotlin

JUnit5

  • @Nestedでグルーピングしやすくなった
  • assertThrows<MyException>って感じで型引数渡せる

AssertJ

  • .isNotNullした後でもnullableな値だと?つけないといけない
assertThat(got).isNotNull
assertThat(got?.name).isEqualTo('test')
  • そもそもデータクラスで比較したほうがエラーのときの情報量が豊富でみやすい

MockK

  • コルーチンは通常特定の場合じゃないと呼び出せない
    • けど、呼び出せるような仕組みがある
  • mock生成は重いから繰り返さないように注意
    • 各テストの前にclearMokcksすればいい

周辺ツール

コーディングガイドライン

  • ktlint
  • シンプルさを保つ
    • Kotlinの思想として簡潔さではなく読みやすさ重視

まとめ

  • Kotlinでも普通にSpringアプリ作れる
  • Javaとの違い意識しないと行けない部分はまだある
  • Reactorとコルーチン相性良し
  • アノテーションやめてKotlin DSL
  • データクラスでテスト結果読みやすく
  • モックはmockKがよい

Observability with Spring-Based Distributed Systems

  • Thomas Ludwig(楽天株式会社)

Observability概要

Observabilityとは

  • ツールと手段を組み合わせてデータとコンテキストから気づきを得る
  • 単純なモニタリングだけでなくもっと深いところまで
    • システムが大きくなると必ずどこかで障害が起きる
  • 最近Observability流行ってるらしい

なぜObservability

  • UXを改善するため
  • 本番に似せた環境があっても全てが同じではない
    • ユーザも違う
  • 自身をもって運用するならサービスの状態を把握しないといけない
  • MTTR(mean time to recovery)が重要
    • 障害が起きた時にどれだけ速く検知して直せるか

分散システム

  • 別のプロセスで並行して処理
  • 複数のプロセスを跨るので難易度が高い
    • 全てのプロセスの情報を見ないといけない
  • スケーリングでそのインスタンスにしかない情報が消えるかも

Observabilityの3要素

  • 3要素かぶってる領域もあれば特化した領域もある
  • どれか一つだけで全部できるというものではない
    • 使い分けるのがベスト

Logging - Events

  • メッセージを残して後でそれを見つけられるようにする
  • 分散システムだと各サービスがログをはくからどこを見ればいいか複雑
    • ログを一箇所に収集して見られるようにしたい
  • Spring Cloud Sleuth
    • ログにIDを振ってくれるのでサービスをまたがってもリクエストの流れを特定することができる
  • 楽天トラベルでは
    • Spring Cloud Config
    • Travel Auto-configuration
      • 独自ライブラリ
      • セッションIDみたいなものを振って同じユーザが何度もアクセスした時に紐付ける
    • ELK
      • Elasticsearch
      • Logstash
      • Kibana

Metrics - Aggregatable

  • 時系列のデータを集計した値
  • 集計した値なのでリクエストが多くてもサイズは変わらない
  • 可視化したい時やトレンドを分析したい時に使う
  • インスタンスが多いとスケールしない
  • Micrometer
    • SpringBoot2から入ってる
    • SLAがあればその値をセットしてアラート上がるようにとかできる
  • 楽天トラベルでは
    • Micrometer
    • Prometeus
    • Grafana
  • Alert
    • あらゆるサービスにアラート入れると多重アラートが発生してしまう
    • ユーザのリクエストを受けるところだけ設定しておくとよい

Tracing - Request scoped

  • パフォーマンス遅延の原因を調査するために使う
  • リクエストの流れがどうなっているか見るために使う
  • Spring Boot Actuator
    • トレーシングの情報がとれるエンドポイントを自動で作ってくれる
Destributed Tracing
  • インスタンスを跨いだトレーシングをしないといけない
  • 一つのリクエストでどのサービスにどれくらい時間がかかったか把握できる必要がある
  • Zipkin
  • Soring Cloud Sleuth: spring-cloud-starter-zipkin
  • 楽天トラベルでは
    • 全てのデータをzipkinに送ると負荷があるのでサンプリングしてる

Putting It All Together

  • 3要素はそれぞれ連携してる
  • 検知 -> 調査 -> 復旧 のサイクルが回せるようになる

500+のサーバーで動くLINE Ads PlatformをささえるSpring

  • 渡邉 直樹(LINE株式会社)

LINEのAds Platform

  • LINEの中に出てる広告
    • LINE NEWSとかLINE Blogとか
  • LINEに広告配信できる唯一のPlatform
  • MAU7800万人
  • 運用型広告
    • リアルタイムに予算やターゲットを変更できる
    • 何を表示するかリアルタイムにオークションにかけて選んでる
      • 全て50ms以内にやらないといけない
  • Real Time Bidding
  • 関係者のニーズを満たす必要がある
    • Advertiser
      • ROI
    • Media
      • 利益
    • Audience
      • UX
  • 指標
    • CTR(Click Through Rate)
      • 簡単な数式
    • CTRを機械学習で事前に予測する

Spring in LINE Ads Platform

SSP(Supply Side Platform)

  • メディア側の情報を管理するプラットフォーム
    • Real Time Bidding
      • リアルタイムにオークションする
  • Spring Boot2
  • CMS側はサーバがKotlinクライアントがNuxt

DSP(Demand Side Platform)

  • ROIが最大化する広告を選ぶ役割
  • 50ms以内に返さないと広告が表示されない
  • Goで作ってる
    • 50ms満たすため
  • G1GCでも数十msかかることある
  • CMS側はサーバがSpringBootクライアントがReact

データの持ち方

  • 広告情報をMySQLに入れてる
    • 毎回取りに行くと50msこえちゃう
    • 基本はメモリに乗せておく
      • 乗らないようなものはRedis

DMP(Data Management Platform)

  • 広告配信する対象を管理する
  • 広告を出す相手の情報があるとより効果的な広告を選べる
  • Look-a-like
    • 似ているユーザの行動をもとに広告を出す
  • 技術
    • SpringBoot
    • Kafka
    • HBase
    • Redis
  • ユーザの操作の度にイベントを飛ばしてそれを受けたらKafkaに書き込む

Data Pipeline/Analytics Cluster

  • 広告配信に関わるデータを収集し格納するプラットフォーム
  • hadoopクラスタ
  • Erasticsearch, kibana

LINEの技術トレンド

Kafka

  • 高速で安定したStreaming Platform
  • queueやjob schedulerとしても利用
  • 各サービスはKafkaに書き込むまでが責務
  • 一度書き込んでおけば誰でも取れる
  • spring-kafkaあるけど公式のkafka_clientおすすめ
    • springの方は自由にバージョン変えられない

SpringBoot2

  • Reactor
    • Reactive Streams
    • Non-blocking
    • back pressure
      • Kafka使ってるからあんまり使ってない
    • Lettuce5
  • kafka
  • actuator + micrometer
    • 使いやすい
    • それまではprometeusにデータ入れてGrafanaで見てた

LINEの開発体制

  • データ
    • 2 Country
      • 日本と韓国
    • 60 Developer
    • 100 Co-worker
  • コミュニケーション
    • 通訳挟んでTV会議
    • 翻訳bot入れてLINEで
    • 気軽に出張も

今後

Spring BootでHello Worldのその先へ〜ウェブDBプレスのSpring Boot特集で伝えたかったこと&伝えきれなかったこと~

  • 藤野 真聡(ソニーネットワークコミュニケーションズ株式会社)

Web+DB Pressに寄稿した

  • 2018/8号
  • 内容
    • SpringBootの概要
    • HelloWorldの一歩先
  • 伝えきれなかったこと
    • 変化に強いWebアプリの作り方
    • 寄稿したのはプロトタイプレベルだった
  • 今回のない湯

バージョン番号の表示

  • qiitaのAPIを叩くアプリ
  • qiitaのAPIのバージョンを返すエンドポイントを作る?
  • pom.xmlに定義しているバージョン情報に紐づくようapplication.propertiesに定義しておく
  • それをJavaから呼ぶ

モジュール分割

  • プロジェクトフォルダ内に子プロジェクトのフォルダを作る
    • 親プロジェクトも各子プロジェクトもpom.xmlを持つ

ActiveMQ

  • JMS(Java Messaging Service)を実装したメッセージングミドルウェア
  • メッセージをqueueで非同期に処理する

MongoDB

  • ドキュメント指向のDB

Angularを⽤いたデザインスプリント開発と設計⼿法

  • 佐川 夫美雄(アシラス株式会社)

Web Application Design

WebアプリとWebサイト

  • Webサイト
    • 一方向
  • Webアプリ
    • 双方向
  • デザイナーはWebサイト的なものを作る傾向?

Webアプリ

  • html/css/js
  • htmlとCSSはスコープがグローバル
    • モジュール分割もできない

よいプログラム

コンポーネント

  • よいプログラムにするにはコンポーネントを作って組み合わせるとよい
  • Atmic Design
  • 大きなものを作ってそこからパーツを抽出しそれらを組み合わせてページをつくる

Design Sprint

  • デザインカンプ(画面設計書)を作るのが目標
  • WebのUIは細かいとこまで柔軟に作れてしまう
  • イラレで書いたのをXDに貼り付けたレベルでユーザに評価してもらう
    • これをスプリントで回す

Web Application Implementation

WebComponents

  • Custom Elements
    • 自分でHTMLのタグを作れる
  • Shadow DOM
    • CSSにスコープを作れる
  • HTML Template
    • 独立したHTMLかたまりを定義できる
  • (HTML Import) -> 仕様廃止ES Modulesへ
    • テンプレート化されたHTMLをimportできる

JS Frameworkの比較

  • ScopedなCSSを作れるFWを使うべき
  • 3大SPAFW
    • Angular
      • 標準機能でShadowDOM使える
      • まあ全部込みがAngularの特徴だし・・
    • Vue
      • scopedなCSSは標準でできる
    • React
      • 標準機能ではscopedなCSSは使えない???
      • styled-components使えばできる
      • 本体を薄くする戦略だし・・・
  • Web標準のShadowDOMにこだわっているのか?
  • だとしても現状polyfill必須だしな

DevOps for Frontend

  • デザインしたものをすぐに確認してフィードバックできるサイクル
  • Github Enterpriseでプロジェクト管理リソース管理
  • クラウドでさくっと環境作ってそこにあげる
    • デモはすぐ見れる
  • Swagger使うとAngularの通信周り自分で書かなくていい
    • Swagger Codegenで生成できる

まとめ