ken1flanのブログ

自己紹介・最近やってることなどを書くつもりです。

WEB+DB PRESS Vol.134 メモ

雑誌を積ん読にしないように、各記事にチマっとずつ何か書いて、形に残そうと思います。

対象は↓です。

gihyo.jp

特集1 仕様ファーストでいこう! 実践API設計 堅牢で,保守性に優れたWebサービスの実現

  • API 仕様ファースト…結構、補助用のツールがそろってるから、普通に便利にできそうですよね。
    • 一人じゃ表も裏も面倒見きれないのでRailsだけでやってますが、うらやましく思ってたりします…。
  • RSpecのような、テストできる仕様が書ければ…。

第1章:優れたAPI仕様とは何か よくある問題点と,記述すべき事柄……柴田 芳樹

  • 組織を跨いで開発するときには、I/F仕様はしっかりしといたほうがいいですよね、テストつきで。
    • 絶対最後にはラクになると思います。
  • 利用者の立場で…というのは思った以上に難しいのはわかります…。
    • SIerのみなさんは、上流工程でうまいことフォーマットを定義してくれていたのを思い出しました。
      • 現場も他の部署からもらった仕様書を使うので、重要だと思ってました。

第2章:gRPCにおけるAPI仕様の書き方 サービスの概要,エンドポイントの説明,エラーの説明……柴田 芳樹

  • 各言語のスタブコードにコピーされるからAPI仕様は.protoファイルに
    • よさそう。スタブコードを作ってくれるのは大変ありがたい…。
    • そうか…バックエンドをRubyで、フロントをDart…みたいなことができそう。
  • この章の指針、実際に使うときに参照したいです。
  • システムも言語を跨ぐから、コメントが一番ツブシが効きますもんね。
    • 願わくば、RSpecからコメントを自動生成して貼り付けてほしい…。

第3章:API仕様ファースト開発 仕様を先に記述し,テスト駆動で開発する……柴田 芳樹

  • フロントエンドとバックエンドときっちり分けて開発しているので、短いイテレーション開発が合いそうです。
  • テストカバレッジ…!組織を横断するなら、やっぱり大事ですよね…。テストが不十分なAPIとか泣けますもんね…。
    • 今の青い鳥よ…。
  • プルリクエストが大きくなりがち…?
    • featureブランチを使ってもいいかも…。
    • git flowかなぁ…。
  • 社内向けの開発指針的なドキュメントでした。
    • ある程度大きくなったら、こういうのを書いて公開しておいたほうが絶対いいですよね…。

第4章:E2Eテストフレームワークの構築 API仕様ファースト開発のための独自実装……柴田 芳樹

  • E2Eテストフレームワークも作ってるんですね…こりゃスゴい…。
    • うちもそういうのほしいですね…。
    • ナイトリービルドとかなら、本番データを一部マスクしたものを使って、あちこち連携しながらやってもいいかも…?
  • マイクロサービス単体でやるのはラク…かと思いましたが、フェイクの連携先マイクロサービスを準備んしないといけないから、やっぱり大変ですね。
  • フェイクマイクロサービス、というか、外部連携のフェイクをちょっと作ってみたい気持ちもあります…。
    • …でも、テスト遅くなりそう…うーむ。

第5章:API仕様の技術的負債の返済 サービスの成長を支えるための改善活動……柴田 芳樹

  • 「E2Eフレームワークが構築されていない場合が多い」…わかりみ。
    • 現職は自分が整備して、始めました。整備したらみんな書き出したので、めちゃくちゃ助かった感。
    • 「テストを書く」という時間をもらえたのも助かりました。
    • 最初の一歩が大事でした。
  • 「負債の返済を先延ばしにした」というログをちゃんと残す
    • 何もしなかったときにも、それを判断したことを残しておくのは自分も大事だと思って、やってます。

特集2 はじめての画像回帰テスト Storybook&Chromaticで品質も生産性も向上!

  • あったけど、メンテしきれなくなってて、仕切り直したい感じです…。
    • 超便利でした…。
  • SmartHRは快適さがスゴいサービスなので、それを支えるフロントエンドを支えるこういったツール群はとても大事に使っているのだと感じました。

第1章:画像回帰テストとは UI表示の差分を取って不具合を検出……宮脇 駿

  • うちはシステムスペックを使っていたんですよね…。
    • ひとつの大きなファイルに全部書いちゃってたので、整合性を取るのが大変になって更新が止まってしまったというか…。
  • storybookだと、ほぼ追加の工数がないのかぁ…うらやましいです…。
  • あ…reg-suitだ…!
    • S3とか準備するのが結構ダルいのかな…。
  • Chromaticはインフラを準備しなくてよさそうなところがいいですね…。
    • 5000枚まで無料…試してみたいかも…。

第2章:StorybookとChromaticを使った画像回帰テストの導入 簡単なコンポーネントで試してみよう……宮脇 駿

  • Storybook、UIパーツカタログ的なものなんですね…。
    • …うちでは…使わなそうです…。とてもパーツライブラリを持てそうにないので…。
  • Bootstrap用のパーツカタログ、どっかに置いてないですかね…。
    • 素直に作ってもよさそうです…。
    • Bootstrapのバージョンアップ時にエイヤじゃなくなるし。
  • Storybook: Frontend workshop for UI developmentチュートリアルを一回やっておいたほうがよさそう…。
  • ビジュアル回帰テストの対象が、System specじゃなくて、UIコンポーネント群だというのは、ちょっと納得で、非常にやりやすそうです。
    • うちにどうやって入れたもんか…。
  • Chromatic、差分について受け入れるかどうか訊いてくれるの、いいですね。
  • Storyごとに差分がみれるの、いいですね…。

第3章:複雑なコンポーネントのテスト ユーザー操作,APIのモック,モバイル画面……宮脇 駿

  • Play Functionでユーザの操作をシミュレートできるのはよかったです。
    • 必ずCotainer/Presentationalパターンを実装するのは大変そうですから…。
  • APIのモックもある…!
    • APIのエラーステータスも読込中もできる…。
    • 結構いいですね。
  • Storybookにもコードカバレッジ…。なんでもありますね。

Appendix:Storybookのさらなる活用 アクセシビリティテスト,UI検証……宮脇 駿

  • アクセシビリティのテストにも使えるのはいいですね…。
  • たしかにただのUIコンポーネントのカタログだと放置されちゃいますよね…。CIに入れるなど、開発のフローに入れるのはとても重要そうです。

特集3 画像生成AIのしくみ Stable Diffusionの内部を探る

第1章:Stable Diffusionの全体像 高品質な画像生成を支える3つのモジュール……石井 雅人

  • 水先案内として、かなりわかりやすいかも。
  • こうしてみていると、既存のものを上手に組み合わせていたりもするのだなぁ…。
  • テキストから意味情報を抽出するCLIPエンコーダ
    • 「リンゴ」と「林檎」を近い値にしたり、「あめ(雨)」と「あめ(飴)」を遠い値にしたり…。
    • 一度テキストから意味を表す値にすることで、↑のような紛らわしいものを判断できるようになっているみたいです。
  • 反復的なノイズ除去による画像生成
    • 全くランダムなノイズ画像に「〜のはずなんだけど、ノイズを除去して」と頼んでいるようです…。
    • 違うノイズを与えると、出来上がりも違ってくるということを使って、多様性をもたせてもいるようです。
    • なんと悪賢いw
  • 圧縮表現から画像を生成
    • 普段見ている解像度の画像を一気に生成しようとすると遅すぎるので、圧縮表現を使っているそう。
    • なるほど…。

第2章:テキストから意味情報を抽出する 1つ目のモジュール「CLIPエンコーダ」の動作……石井 雅人

  • 日本語は単語を分割しづらいからトークン化するのは結構大変そうです…。
  • トークン化すると、近隣のトークンから誤り検出をして、解釈の間違いを正せそうに見えます。
  • しかし、トークナイザ、なんとなくですが、ダジャレに弱そう…。
  • ここは応用範囲が広そう…というか、テキストから何かをするものに対して、よく使う前処理なんですね。
  • 後段の処理が重くなりすぎるので、トークン数に制限がある…なるほど。
  • 学習時にテキスト→数値列と画像→数値列を同時に行い、両方の数値列が似るように学習させているところがミソ。なるほど…。
  • こうやって解説されてくると、ようやくAIの強い弱いの意味がわかってきました。なかなか汎用にするのはむずかしそうですね…。
  • 仕組みがわかってくると、なんとなく苦手もわかってきますね…。

第3章:抽出した意味情報をもとに画像の圧縮表現を生成する 2つ目のモジュール「拡散モデル」の動作……石井 雅人

  • 均一になっているノイズから、少しずつ前の状態を想像して戻していく、という手法…。
  • どんな画像にもなりうるけど……たくさんの候補から選ぶのにもコツがあるようで。
    • 一回でノイズをたくさん除去しちゃうとダメっぽい。
  • なんとなく、スマホで月っぽいものを撮って、高解像度したらクレーターが現れた的なことを意図的にやっている感…。
    • あ、でも言葉でヒントは渡していますね。

第4章:生成した圧縮表現を画像に変換する 3つ目のモジュール「デコーダ」の動作……石井 雅人

  • 元の画像をエンコーダで圧縮表現に変えたものをデコーダで戻すとほぼ同じ画像になるとのこと。
  • デコーダにノイズを入れてもなんか画像が出てくるらしいです。
    • 画像生成AI2種を組み合わせて使ってる…!

第5章:テキスト以外の手段で画像生成を制御する さらにユーザーの意図に沿うために……石井 雅人

  • img2imgは4章のデコーダの片割れ、エンコーダを使って圧縮表現化、それにノイズを追加したものを…あとはテキストと同じっぽいです。
  • v2は深度も…。

一般記事

いまさら聞けないJSON Web Token JOSEと秘密鍵,暗号,署名の関係 ……牧 大輔

  • JOSE、知りませんでした。
    • JavaScript Object Signing and Encryption
    • ネットワークを介したメッセージを安全にやりとりするために、Javascriptオブジェクトに対して署名・暗号化するための規格
  • OAuth2とかでも使われてる模様…。
  • JOSEを使うことがあったら読み返します…。

連載

実践データベースリファクタリング ── アンチパターンに立ち向かう 【第1回】削除フラグに立ち向かう……曽根 壮大

  • 気になる連載…!
  • あー…みんな大好き、削除フラグ……。
  • たしかにこのやり方なら移行できそう…!
  • 移行しきれずに、ズルズル……わかる……。

基礎力アップ! Javaプログラミング 【第1回】データ指向プログラミングのススメ ……抽象データ型と代数的データ型,それを支える言語機能……きしだ なおき

  • 純粋データ型…なるほど…。
  • ActiveRecordは意図的に混ぜている気がする…。
  • 複数データ、扱いにくいです…。
  • あ!!うちもパターンマッチ使えるじゃん!!!
    • Rubyのバージョンアップがんばった自分、エライ…。
  • スーパーの割引ロジック、結構難しいですね…。最近のバーコードで読み取るレジ、どうやってるんだろう……?

乗りこなせ! モダンフロントエンド 【第1回】新機能でCSSの書き方が変わる? ……新たな擬似クラス,Cascade Layers,Container Queries……麦島 一

  • :has()、:is()、:where()…いずれも便利そう…。
  • Cascade Layers、これも超便利そう…。雑なimportant!に効きそう。
  • この連載、ありがたい…。

現場のPython ── システム開発も! 機械学習も! 【第18回】pandasを使った処理を遅くしないテクニック ……4つの視点でパフォーマンス改善……石上 晋

  • 慣れないと難しそうですね、これらのチューニング…。
    • 静的解析で拾ってほしいところですが…。
  • マルチコアは意識的に列をまとめて計算していれば、Pandasの計算エンジンが対応してくれるっぽいです。
  • 困ってからで良い…なーんだ、安心。

Ruby 3組込みライブラリ紹介 【第12回】Stringのよく使われるメソッド ……String#sub/String#gsub/String#split/String#scan ……西山 和広

  • 文字コード周りが強いのは、ホントにメリットですよね。
  • String#scrub … 不正文字を置き換えられる。これ、今放置している不具合に使えそう感…。後で見ます…。
  • String#[]= … 使ったことありませんでした。便利そう…?
  • 流石にStringはよく使うからか、だいたい知ってますが…こうしてサンプルとともにまとめてみれると、結構いいですね。

Perl Hackers Hub 【第78回】Perl Webアプリケーションのリプレイスで大事なこと ……Stranglerパターンで段階的に移行する……須藤 将史,監修:牧 大輔,福本 貴之,松木 雅幸,大沢 和宏

  • Perl5のコードをリライトじゃなくてリプレイスするか?というのは、開発メンバーによるのかも…。
    • Perlもなんだかんだと開発を補助するツール、結構あるし、Perl使いがいるならアリですよね。
  • …あのときのコードは……。
    • あっちもこっちもとっちらかっていたので、企画からまるごとだったので、リライトしてよかったなと思います。

PHPで複雑さに立ち向かう 【第12回】symfony/consoleによる実用的なCLIツールの作り方 ……基本的な入出力の処理,コードの部品化,高度な出力整形……五十嵐 進士

  • 確かにPHPはWebシステムの印象が強いので、CLI用の便利ライブラリがあるときいてちょっとびっくりしました。これは助かりますね。
  • パラメータの処置もしやすそうですし、テストもばっちり書けそうです。
  • ログの詳細度についてもやりやすいのか…。至れり尽くせりですね。

コラム

池澤春菜SF小説の歩き方 ──エンジニアリングの未来を描く名作たち 【第5回】現実はSFに追いつけるのか ……未来に橋を架ける……池澤 春菜

  • ガンダム
    • 44年ですか…。その頃に夢中になって見た人たちが第一線の研究者として活躍してるので、これはおもしろそう…。
  • ブレードランナー
    • 今のAIの発達とこれからの関わり方を予言しているかのような話でした。
    • 原作1968年、映画1982年…スゴいですね…。
    • チューリングテスト…1950年…マヂか…。
  • ビッグヒストリー
    • 知りませんでした。そういう研究もあるんですね。
    • めちゃくちゃ幅広い…。いろんな研究者が関係しあえるようになったからかも…?
  • AI 2041
    • めっちゃ近い未来だし、実際ありそうな話が並んでますね…。
    • うーん…高いけど、今40%ポイントがつくのか…悩ましい…。

サバンナ便り ── ソフトウェア開発の荒野を生き抜く 【第6回】自動テストのサイズダウン戦略 ……テストダブルを作る前に考えるべきこと……和田 卓人

  • 前回もサイズダウンの話だったかも。うちもテスト遅いので、気になってます…。
  • あ…ライブラリのテストダブル、切り替えてテストできるようにできたほうがよさそうな気がしてきました…。
    • バージョンアップでときどき変わりますもんね…。
  • LocalStack出てきた…!
  • あー…自分たちで作ったものを公式にまで戻せれば、それは信頼できるフェイクになりますね…。

ちょっと気になる隣の技術畑 【第11回】プラットフォームを超えるWebAssembly ……あんどうやすしさん……日高 正博

  • altjsの話
    • Dart、そうだったんですよねぇ。
  • Wasm、ストリーミングで読み込めるの…?スゴいですね…。
  • Rustかあ…。
  • Wasm、CDNで使えるんですよね…。これも何かおもしろいことができそう感あります…。

はまちちゃんわかばちゃんのREADER'S FORUM ── 読者のページ 【第85回】……はまちや2,竹原

  • お悩み相談
    • 広い視野がほしいと思ったことは…なくはなかったけど、この間までは興味の赴くままやっていた感…。
    • 今はWeb+DBとSoftware Designを眺めるようにして、視野が狭まらないようにしてます。
    • 常勤のエンジニアが自分しかいないから、ちょっとヤバいかもしれんと思ったのかも…?

その他

Web3の新時代を拓く ココネのエンジニアリング力を探る 世界に愛されるデジタルワールドでトップレベルの実績 第2回 人気の着せ替えアプリにWeb3要素を追加

  • UnityやC#…!もうちょっと自分もやりたいです…。
  • NFTとアバターってわりと相性がいいですよね。
  • お金が絡むから、不正に気を使いますよね…。同時にパフォーマンスも…って、ホント、技術が要りそうです。
  • Unityのバージョンアップも大変なんですね…。
  • テストとかどうしてるんでしょう…?

BOOK REVIEW

  • 縁の下のUIデザイン
    • Web+DBで連載してたものですね…!
    • Tips集だから、結構読みやすそう…。
    • 読んでみようかなぁ…。
  • 詳細 システム・パフォーマンス 第2版
    • 第2版?!ということは良著間違いなしでは……。
    • 読みたい…。
  • あのSFはどこまで実現できるのか
    • まさに世代じゃない…。
    • 余裕があったら読もう…。おもしろそうすぎる…。