2020年のふりかえりと2021年に向けて

自宅で元旦を迎えました。年末年始に帰省しなかったのは久しぶりかもしれない。2020年はリモートワークがメインになったりいろいろと変化がある年だったような気がする。

2019年のふりかえりと2020年に向けて - kntmr-blog

  • GraphQL
  • Vue.js + TypeScript
  • OCJP Gold SE 11
  • AWS 認定資格
  • 英語/TOEIC

2020年半ば頃から AWS SAA の勉強を始めました。オンラインハンズオンをやったり問題集を解いてみたり。ただ、試験を受けてみようと思いつつ、なかなか踏ん切りがつかない今日この頃...。とはいえ、そこそこ AWS の知識は身に付いたと思われます。今年はどっかのタイミングで受けてみよう。

あと、現在は EKS 環境が身近にあるので、この機会に Kubernetes の勉強を始めました。『イラストでわかる Docker と Kubernetes』とか『Kubernetes 完全ガイド 第2版』あたりを読みつつ、ローカルで Minikube を触ってる感じです。せっかくだから SRE 本 とかも読んでみようかな。

それに対して、最近はフロントエンド関連が少し遠のいてしまっている気がする。できる限りキャッチアップしておきたい。特に React や Vue あたり。

そして、3月頃からリモートワークがメインになりましたが、これまで電車通勤の時間を利用してコツコツ進めていたスタディサプリ ENGLISH の進捗がなくなりました...。1日15〜30分とか時間を作ってやるようにしたい。(課金してるのにもったいない)

で、最近、しばしば思うんだけど、『速読』を身に付けたい。やっぱり速く本を読めるのに越したことはないのかなって。技術書なんかは1回読んで終わりではなく必要に応じて何回か読むだろうし。あと、体の衰えが著しいので運動しないと...。リングフィット買おうかな。

仕事に関しては、たぶんこれまでとは違った価値観を身に付ける必要がある気がする。とはいえ、すぐに身に付くようなものではないと思うので、小さなことからコツコツと。その中で自分ができること/やれることをしっかりやって自分の価値を出していければいいかなって。

Homebrew Bundle & Google Drive File Stream

Mac で移行しやすい環境を構築する。突然、PC が故障して他の PC に移行することになるかもしれないし。ちなみに、過去に Windows を使ってたときも Google Drive File Stream を使ってたっけ。

Homebrew Bundle

パッケージ管理は Homebrew Bundle でバックアップする。

github.com

$ brew bundle dump

既存の Brewfile を上書きする場合は -f, --force を指定する。

$ brew bundle dump -f

Brewfile は GitHub の dotfiles リポジトリで管理する。PC を移行する際は dotfiles リポジトリを clone して Brewfile からインストールする。

$ brew bundle

Google Drive File Stream

基本的にローカルのファイルは Google Drive File Stream 管理下のフォルダに置く。ユーザーフォルダの Documents 下にシンボリックリンクを張ると、Google Drive File Stream を意識せずに使えるかも。

$ ln -s /Volumes/GoogleDrive/マイドライブ/Private /Users/{username}/Documents/Private
/Users/{username}
  ├── Applications
  ├── Desktop
  ├── Documents
  │     ├── Private -> /Volumes/GoogleDrive/マイドライブ/Private
  ├── Downloads
  ├── Google Drive File Stream -> /Volumes/GoogleDrive
  ├── Library
  ├── Movies
  ├── Music
  ├── Pictures
  ├── Public
  ├── sandbox
  └── workspace

PC を移行する際は Google Drive File Stream をインストールして自分のアカウントでログインするだけでファイルが同期されて元の環境を復元できる。

ただし、Google Drive File Stream はたまに不安定になるときがあるので要注意。ファイル同期のタイミングで他の操作をすると不安定になる気がする。(このあたりは Google Drive File Stream の扱いに慣れてくると安定して使えるようになる)

子供とネットを考える Advent Calendar 2020

子供とネットを考える Advent Calendar 2020 の24日目の記事です。枠が空いてたので書きます!とは言ってもこの記事の内容自体は今年の夏に書いたものです🙇

小学生の娘が日頃から iPad でインターネットを使うようになりました。主に YouTube などの動画コンテンツを鑑賞することが多いですが、分からない言葉などをスマートスピーカースマートディスプレイに尋ねて自分で意味を調べることも増えました。あと、ピアノの動画を観ながら自分でピアノの練習をしています。いわゆる目コピや耳コピです。最近は、Nintendo Switch の『あつまれ どうぶつの森』で遊んでいますが、ここでもインターネット経由で友人とやり取りしているようです。

コロナ渦で休校になったり学童の利用がなくなりました。自宅で過ごす時間が増え、iPad やゲーム機を通してインターネットに接する機会も増えました。親としてインターネットの使い方やインターネットの情報とどう向き合うのか、子供たちにどう伝えるかを考える必要があると考えています。

そして、その内容をまとめたものが今年の夏に書いた記事になります。

kntmr.hatenablog.com

さらに子供たちが読みやすいようにスライドにしてみました。

kntmr.github.io

一応、子供に読んでもらいましたが、反応はイマイチでした...。ちょっと内容が難しかったんだろうか。まぁ、これをきっかけに話し合う機会ができたらいいのかなと思っています。

まとめ

インターネットの使い方やインターネットの情報とどう向き合うのか、子供たちにどう伝えたらいいのか、このような悩みを持っている方の参考になれば幸いです。また、もっとこうした方がいいなどあれば、ぜひコメントいただければと思います!

Vue.js v-tokyo オンライン Meetup #12 に行ってきた #v_tokyo12

Vue.js v-tokyo オンライン Meetup #12 に参加しました。オンライン開催。簡単に所感をまとめます。

vuejs-meetup.connpass.com

所感

ESLint をマイグレーションの補助として使うのはなるほどという感じ。(本編でも言ってたけどマイグレーションツールではないので注意)

Web アクセシビリティの話は興味深かったです。大事なことだけどあまり意識してなかったかも...。Fragments なんかは div で囲わなくていいからちょっとシンプルになるくらいにしか思ってなかったけど、a11y の観点があったとは...。

最近、Vue から少し離れてしまってるけど、個人的にキャッチアップしていきたい。

以下、メモから抜粋。

Vue3 における eslint-plugin-vue

docs.google.com

  • eslint-plugin-vue
  • Vue スタイルガイドに従うところから始める
  • Vue 3 マイグレーションの補助として使う
  • deprecated/非推奨機能を利用していないか
  • クイックフィックス
  • Composition API サポート
  • script タグの setup はたぶん正式になる?

Nuxt v3に備えて準備してStorybookで躓いた話

kzhrk.github.io

  • Nuxt Vue 3 Support
  • Composition API 対応
  • Atomic Design + Storybook
  • atoms > organisms の順で Composition API 対応
  • .storybook/preview.js に Composition API 追加
  • organisms で Storybook がエラー
    • root.$store 参照不可
  • getCurrentInstance
    • Vue のコンテキストが取得できる
  • Nuxt に Composition API を入れるのはわりと簡単

Vue3 からはじめる Web アクセシビリティ

docs.google.com

  • Vue のドキュメントにアクセシビリティページ追加
  • Vue 3 Fragments
    • template 直下に複数のルートノードが書ける
      • div で囲んだりする必要なし
    • マークアップ観点でよい
    • マシンリーダブル
  • vue-axe
    • a11y チェック
  • a11y の ESLint プラグイン
  • Vue A11y
  • Web アクセシビリティ > いかに情報にアクセスできるか
  • まずはスクリーンリーダーを試してみたり

Vue3で使いやすくなったTypeScript

slides.com

  • VSCode + Vetur
  • template 内の型
  • props の型
    • computed の戻り値の型は注釈が必要
  • import した Vue ファイルの型
  • tsx ファイル内の Vue Component の型
  • tsx ファイルで import した Vue ファイルの型
    • VSCode 上では型情報が落ちる
    • ビルドエラーにはなる
  • emit の型
    • emit する側は型安全, される側は未対応
    • Template Literal Types (TS4.1) で対応されるかも?

TypeScript Compiler APIを利用してVueの型チェックで遊んでいる話

  • Vetur 0.19.0
    • テンプレートの型チェックができるように (props/emit)
  • vue-type-audit
    • CLI による型解析

Mac で REALFORCE R2 (JIS/Win) を使いたい

前回の続き。今回は Karabiner-Elements を試す。備忘録。

Windows to Mac - kntmr-blog

  • macOS Mojave 10.14.5
  • Karabiner-Elements-12.10.0
  • REALFORCE R2 (JIS/Win)

karabiner-elements - Homebrew Formulae でインストールする。

$ brew install --cask karabiner-elements
Updating Homebrew...
==> Downloading https://github.com/pqrs-org/Karabiner-Elements/releases/download/v12.10.0/Karabiner-Elements-12.10.0.dmg
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/63037806/1b43e780-b89e-11ea-9177-4fa939f9
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'karabiner-elements'.
==> Installing Cask karabiner-elements
==> Running installer for karabiner-elements; your password may be necessary.
==> Package installers may write to any location; options such as --appdir are ignored.
Password:
installer: Package name is Karabiner-Elements 12.10.0
installer: Installing at base path /
installer: The install was successful.
🍺  karabiner-elements was successfully installed!

設定内容はこんな感じ。Win 向けのキーボードでは Fn が OS 側で認識しないようなので、右の Ctrl を Fn に割り当てる。

f:id:knt_mr:20201129154346p:plain

Windows to Mac

長らく Windows を使ってましたが、メイン PC が MacBook Pro (13-inch, 2018) になりました。これからちゃんと使うために使いやすいように各種設定。備忘録。

Mac is not a PC.

システム環境設定

キーボード

  • Touch Bar に表示する項目: F1, F2 などのキー
  • Fn キーを押して: Control Strip を表示
  • 外部キーボードの F1, F2 などのキーを... チェック

Finder

環境設定 > 一般

  • 新規 Finder ウィンドウで次を表示: <HOME>

環境設定 > サイドバー

  • ※いい感じに

環境設定 > 詳細

  • すべてのファイル名拡張子を表示: チェック
  • フォルダを常に先頭に表示する場所: 名前順で表示しているウィンドウ
  • 検索実行時: 現在のフォルダ内を検索

表示

  • パスバー, ステータスバー 表示 (他はデフォルトのまま)

隠しファイルは cmd + shift + . で切り替える。

ターミナル

環境設定 > 一般

  • 起動時に開く: プロファイル > Pro

環境設定 > プロファイル

  • テキスト > フォント ※いい感じに
  • ウィンドウ > ウィンドウサイズ ※いい感じに
# ~/.bash_profile
export CLICOLOR=1
export LSCOLORS=dxgxcxdxcxegedabagacad
export PS1='\h:\W \$ '

その他

Windows の alt + tab によるウィンドウ切り替え。あまり余計なアプリとかプラグインは入れたくない派で、とりあえず Ctrl + Up と Ctrl + Down で様子を見てたけど、HyperSwitch を試したら意外とよかった。ただ、これずっと Beta 版なんだろうか...。

WiFi が頻繁に切れる。(未解決)

gori.me

(2020/11/26 追記)

JJUG CCC 2020 Fall に行ってきた #jjug

JJUG CCC 2020 Fall に参加しました。オンライン開催。簡単に所感をまとめます。

ccc2020fall.java-users.jp

所感

ArchUnit は去年の JJUG でもセッションがあったけど、今回は ArchUnit の柔軟さを生かした応用事例が紹介されていました。いろいろな依存解析が自動化されて可視化されるのはとてもいいけど、あまりやり過ぎるとメンテが大変になりそう。

パフォーマンスチューニングの話はとても参考になりました。「根拠のある改善を行う」というのが刺さる。

Selenide はすごい久しぶりに名前を聞いた気がする。わりと書きやすかった記憶があるので機会があればまた使ってみたいなー。一方で Cucumber はどうなんだろうか。依存するファイルが増えるわりにそれを超えるメリットが今のところ見つけられないんだけど、少し調べてみようかな。

Picocli は去年の JJUG でセッションがあったけど参加できなかったので、今回は話が聴けてよかった。去年くらいに Picocli と Micronaut を試したときのメモ。

Micronaut で CLI アプリケーション + Picocli - kntmr-blog

あと、なんか前も同じことを思った気がするけど、アンカンファレンスが面白そうだったから聴きに行けばよかった...。

現時点では YouTube の動画は非公開になっているようです。アーカイブは公開されるんだろうか。(2020/12/04 追記) セッション動画が公開されました。

www.youtube.com

以下、メモから抜粋。

痒いところに手を届かせる ArchUnit の利用法 〜アーキテクチャーテストからアプリケーション解析まで〜

github.com

  • アーキテクチャユニットテストで実装する
    • 依存関係 (パッケージ, クラス, ...)
    • 命名規約
  • アーキテクチャをテストで明文化 (ドキュメンテーション)
  • 部分適用可 (リアーキとか)
  • Core API
    • クラス, メソッド, フィールドなどの依存関係を取得するためのAPI
  • Lang API
    • 依存関係の制約を実装するためのAPI
    • カスタムルール作成可
  • Library API
    • レイヤの制約をテストするためのAPI
  • BFFはユースケースに合わせたAPI
  • バックエンドはリソース指向API
  • 別パッケージの類似ドメインクラスを import したり
    • 縦方向のレイヤは周知されている
    • 水平方向の依存関係をチェックしたい
  • 不安定なコードへの依存をテストで制限する
  • 変更の影響範囲を機械的に把握したい
    • CIで影響範囲を自動でリストアップ☆ > Core API
    • リフレクションなどの依存や設定ファイルの変更は検出不可
  • サービス間の影響調査
    • API間の依存関係をCIで自動生成☆ > Core API
  • API/DB間, Android/BFF間 > Android/DB間
    • サービス間の依存関係 > 分散トレーシングを使う
  • 画面遷移図の自動生成

パフォーマンスのトラブルシュート入門

  • 正しいパフォーマンスチューンングの流れ☆
  • アプリの下も把握する必要あり
  • アプリの事実を計測する > ログ, メトリクス
  • 計測する情報
    • 各処理 > どこの処理が遅くなっているか
    • システム全体 > なぜ遅くなっているか☆
    • 遅くなる原因を知るにはシステム全体の視点が必要
  • ファイルの読み書きには暗黙的なものもあるので注意
  • シェルで記録してバッファ溢れで消えてしまったり
  • コンテナを消す前に永続化領域に記録する
  • 計測した情報は可視化, 正常期間/異常期間を比較
  • 根拠のある改善を行う☆
  • 必要な情報を計測する機能を FW が提供しているか
  • Java 標準ツール☆
  • Unified Logging
  • MBean/JMX
  • Eclipse MicroProfile Metrics/Health
  • JDK Flight Recorder
    • 主要なメトリクスを記録
    • アプリ独自のメトリクスを作成可
  • ログは発生ベースなのでメトリクス収集には向いてない
  • 最近の主流は JFR でメトリクス収集
    • JDK Mission Control で可視化
  • ケーススタディ
  • クラウドのサーバーレス環境でJFRは使えるか?
    • OpenJDK11以降, ファイルダンプが必要
  • デフォルトのプロファイルではCPU1-2%程度のコスト増

Project Reactor でノンブロッキング、非同期処理を実装してみよう!!

github.com

  • Webフロントエンド, 外部サービス連携, マイクロサービス連携, ...
  • 同期, 非同期, ノンブロッキング
  • ブロッキング = Worker Thread のスレッドを専有する
  • ノンブロッキング = Event Pool
  • ノンブロッキングを簡単に実装する > Reactive Streams
    • Publisher
    • Subscriber
    • Subscription (バックプレッシャー)
    • Processor (Pub+Sub)
  • 非同期, ノンブロッキング
  • Pub/Subモデル
  • バックプレッシャー
  • Project Reactor
    • Mono, Flux
    • subscribe, doOnNext, doOnError, doOnComplete, ...
    • Subscriber 側が subscribe するまで何も起きない
  • Subscription#request (バックプレッシャー)
    • Subscriber 側でリクエスト量を制限する
  • map, flatMap
    • map はシーケンシャルに処理する
    • flatMap は新しい publisher (mono) を返す
  • Cold Publisher > リクエスト時点で処理開始
  • Hot Publisher > Subscribe 時点で処理開始
  • Azure SDK で非同期/ノンブロッキングを実装
    • Project Reactor を使う
  • Reactive Route (Quarkus)
  • ChangeFeedProcessor (Cosmon DB)
    • CQRS の実装で使うと便利?

Javaコードが速く実行される秘密 - JITコンパイラ入門

LINE ShopチームでのSREの取り組み

  • Prometheus + Grafana
  • Armeria
  • マイクロサービス
  • 分散トレーシング > Zipkin
    • Redisクライアント側で取る?
  • Circuit Braker (Cascading Failure)
    • FailFastException を catch して fallback する
  • Graceful Degradation
    • 障害発生時、継続させたい機能は何か
    • 一部機能はレスポンスの質を低下させても継続可能か (キャッシュの古いデータを返したり)
  • Service Discovery
    • Central Dogma
    • Prometheus
  • Central Dogma
  • SLI, SLO
    • API Availability, API Latency
    • Prometheus + Grafana で可視化
  • モニタリング
    • アラートレベルで通知する Channel を分ける
    • ユーザーに直接影響がある > Error
    • サービス影響が少ない, 問題の原因になり得る > Warn
    • アプリケーション固有のメトリクス
      • バージョン (アプリ, FW, ...)
    • バッチのモニタリング
      • Prometheus は Pushgateway からメトリクスを pull する
  • インシデント対応
    • アラート対応ガイド
    • 必要に応じてレポート作成 > SRE ポストモーテム
  • ポストモーテム
  • キャパシティプランニング
    • イベントに備えてスケールアウト/スケールアップ
  • スパイクへの対処
    • Rate Limit でリクエスト量を制限する > Central Dogma の管理画面から設定
    • スケールアウト
  • k8s
    • Verda (Private Cloud) の VM/物理サーバー
    • Ansible でプロビジョニング
    • スケールアウトに時間がかかる
    • モニタリング
      • サービス全体で収集しているメトリクスは600万+
      • Pod のメトリクスはリバースプロキシアプリ経由
  • メトリクス
    • リクエスト/レスポンスサイズ (リクエストが多いので)
    • DNSの名前解決

Head toward Java 15 and Java 16

  • Incubator, Preview, Standard
  • Pattern Matching for instanceof
  • Text Block
  • Records
    • equals フィールドが同値の場合は常に true を返す
    • リフレクション不可
    • Local records
  • Sealed Classes
    • permits
    • パターンマッチ
  • Hidden Classes
  • Foreign-Memory Access API
  • UDP Socket API
  • Vector API
  • Elastic Metaspace
  • Shenandoah GC, ZGC
  • JS エンジンは GraalJS への移行を推奨

OAuth 2.0 with Spring Security

github.com

  • OAuth 2.1
  • spring-boot-starter-oauth2-client
  • RestTemplate を使うところではタイムアウトを設定すること☆
    • client#setRestOperations(restTemplate)
    • WebClient も同様
    • connection/read/write
  • 5.0 以降では WebClient への移行を推奨
    • おそらく RestTemplate がすぐに削除されることはないはず
  • spring-boot-starter-oauth2-resource-server
  • Token Introspection
    • リソースサーバーから認可サーバーにアクセストークンを送る
    • アクセストークンの検証結果を返す
  • 認証方法のカスタマイズ
    • OpaqueTokenIntrospector を実装する
  • Token Propagation
    • 自分が受け取ったアクセストークンを下流のサービスに流す
  • 認可サーバー
    • Spring Authorization Server (開発中)

Selenide Cucumber で実現する UI テスト自動化 BDD

github.com

  • Selenide
    • UIテスト自動化フレームワーク
    • WebDriver より冗長さがない
    • webdriverextensions-maven-plugin
    • Page Object パターン
  • Cucumber
    • 自然言語でテストケースを記述できる (Gherkin 記法)
    • feature ファイルにテストケースを書く
    • steps ファイルにテストを実装
    • Data Table
    • Scenario Outline
    • JUnit 5 未対応 (junit-vintage-engine)
  • Selenide + Cucumber
    • steps ファイルに Selenide のテストを実装
  • アンチパターン
  • BDD
    • 画面ありのアプリで TDD が実現できる
    • feature ファイル変更
    • 対応する steps ファイル変更
    • Page Object 変更
    • テスト失敗
    • プロダクションコード変更
  • 創発的設計
  • スクリーンショット
    • テスト失敗のみとかも可

JavaとpicocliとGraalVMでときめくCLIアプリを作ろう

  • Java で単一コマンドアプリケーションが作れる
  • JRE だけで 200 MB (重い)
    • JLink, JPackege
  • GraalVM
    • ネイティブイメージの弱点☆
  • AOT はコマンドラインアプリにピッタリ?
  • System.out, System.err, 終了コード
  • サブコマンド
  • refrect-config.json 自動生成
  • Micronaut と Quarkus には picocli が組み込まれてる

あとで読む