Java３０年のお話を聞いてきた

JJUGで、さくらばさんのお話聞いてきた。

内容は、Java３０年の振り返りって感じのお話。

途中メモしきれなかったので、

抜けてたり、間違っているところあるかも！

ごめんなさい。

ってわけで、シェア

---

■Java３０周年記念！Javaの３０年を振り返る

１９９５年　Java発表

１９９０年から話す

Java前史
興隆
停滞
再興

・前史
Greenプロジェクト：情報家電向けプラットフォーム
　STB（セットトップボックス）
　PDA

　ビルジョイ（BSDをまとめた人）とジェームスゴスリン
　　ビルジョイはスポンサー的：viを作った人、csh

　ジェームスゴスリン：Gosling Emacs,newsの作者

　　UNIX　：Sun　VS　HP

　GreenOS：
　　言語Oak

どこかに売り込みたかった→プロトタイプ　スターセブン(*7)コンピューターヒストリーミュージアムにある
　デモはYouTubeにある
　Duke登場（DukeはJavaより古い）：名前はなかった(通称Fang(牙))
　日本の家電メーカー（東芝）とか行脚、３DO→採択されなかった

情報家電→Web＋Applet
　１９９３　NCSA　Mosaic
　Oak商標問題→Java　１９９４
　　キムコレーゼ、(Fangから）Dukeと名前決める
　　
　Sunのスローガン：Network is the Computer ジョンゲージ

　Javaのスローガン：Write once run eveywhere
　１９９５年５月２３日　SunWorld　基調講演でJava発表
　マークアンドリューセンがゲスト：NetScapeがサポート
　JDK１．０アルファ　HotJava
　　　１．０ベータ

---

・隆盛期
　１９９６．０１　Java１．０リリース
　　パッケージ　８個、クラス図２１１
　９１　Python
　９５　Ruby
　９５　PHP
　１９９６.３　NetscapeNavigatorがスタート
　　　　　　　　LiveScriptがJavaScriptになる

　Java One 世界最大だったJavaカンファレンス
　当初：Sunマイクロシステムズ＋ZDEvent共済
　現在：Oracle単独開催
　１９９６年１回　サンフランシスコ
　日本での開催：２００１、～４回
　初代：ジョン・ケージが司会
　Effective　Java；Javaoneのセッションだった
　Tシャツを投げる
　当初はもりあがった

1997 Java1.1
　内部クラス/匿名クラス
　国際化

　　（かざまさん：現在和歌山大学、TeXの日本語化、でゅくれれの発案者）
　JIT（シマンテック）

1998 Java2
　J2SE（バージョンは１．２）
　エンタープライズ、マイクロエディションが入る
　EJB、Servlet/JSP
　CDC、CLDC　DOJA（MIDP)
　ロゴ変更：携帯で出ないから？

ビジネス用途への取り組み
　Appletによる業務システム
　ex) oracle ネットワークコンピューティング（１９９６）→失敗
　　問題：ネットワーク帯域、CGIパフォーマンス

　サーバーサイドJava
　１９９６年　JavaOne　BOFで
　jeeves
　１９９９　jakarta Tomcat
　１９９８　IBM　サンフランシスコプロジェクト
　　ビジネスロジックの部品化→失敗


・標準化
　１９９７　Microsoft提訴
　　　　　　独自拡張：delegate,ActiveX連携

　　　～２００４和解（SUNかつ）

　１９９８　Java　Commnity Process（JCP)
　ISO,ECMAおそい
　JCP：さきがけてあった
　　　少数のエキスパート

　２００４　J2SE　５．０　コードネームTiger
　　JavaOne　２００４で発表（トラの赤ちゃん）
　マーク・ラインフォールドがスペックリード
　　EOD（Ease of Developing）
　　ジェネリクス：マーチンオデスキー（すから作った人）
　　あのてーしよん：
　　タイプセーフenum
　　コンカレント
　　ユニコード：奥津さん
　　JMX

---

・急落
オープンソースの台頭２０００年代初頭～
　TomcatがサーブレットJSPの実質RI

　隆盛期のコミュニティ動向
　　1995　Javahouse ML（高木浩光）
　　1996 Javaカンファレンス（溝口先生：当時理科大）
　　1998 Javaコンソーシアム→３年後XMLコンソーシアムへ
　　2000　Ja-Jakarta Jakartaプロジェクトの翻訳
　　2003 Seasarプロジェクト
　　2006 Java-ja
　　2007 JJUG 丸レクに集まった人

・停滞の要因
　　１。Sunの業績悪化
　　　.comバブルはじける→Oracle入り：
　　　　Java One 2009　ラリーエリソンが来る
　　
　　２．Javaの方向性
　　　関数/クロージャー
　　　　クロージャー２００８あきらめる
　　　　ブライアンが出てきて２００９　ラムダ
　　　パッケージ/モジュール

　２０１４年３月　Ｊａｖａ８リリース

　２００６年　ＯｐｅｎＪＤＫ
　　　Ｊａｖａ７がターゲット

---

・再興期
　Ｊａｖａ８　プロジェクトラムダ
　　プログラミングが変わる　
　Ｊａｖａ９　リリースモデル変わる
　未来的には：より宣言的

　ＪＪＵＧ　１３０００人

ユニットテストの基本を聞いてきた！（単体テストの作り方と、ミューテーションテストも追加）

今(6/7)、JJUG　CCC　に行っていて、

さっきまで「ユニットテスト基礎講座」を聞いてきたので、

その内容をメモメモ

P.S　１６：２５ごろ追加

　その後のセッション

・単体テストの始め方/作り方

・Mutation Testingのプロジェクト実践

も追加してシェア！

---

■ユニットテスト基礎講座

アーキテクトの教科書という本を書いている人
Xのアカウントから資料見れる
テスティングフレームワークに触れた人対象
考え方中心

内容
・ユニットテストの基本概念
・テスト対象
・質の良いテスト

---

●ユニットテスト、書いてますか
　８割くらい
　ユニットテストを十分にかけていますか
　ユニットテストを上手にかけていますか

　ユニットテストを書くのは当たり前
　書籍など情報源は少ない
　ベストプラクティスが浸透していない

●テストコードはAIにかかせればよくね？
　事実AIにテストコードは書かせる
　　→任せっぱなしはよくない

　理由①：AIが生成するテストは平均点（かそれに満たない）
　理由②：AIは間違える（うそもつく）
　テストコードはvibe cordingするべからず
　雰囲気でやるのはX
　AutomatedTestの知識

---

●Part1：ユニットテストの基本概念
　ユニットテストとは

　テストのピラミッド

　　E2Eテスト
　　インテグレーションテスト
　　ユニットテスト

　ユニットテストと統合テストの境界はあいまい（解釈による）
　Googleでは、共通理解促進のため、テストサイズ（S/M/L)による分類

　ユニットテスト
　単体と呼ばれる少量のコードを検証すること
　実行時間が短い
　隔離された状態で実行

　古典学派とロンドン学派異なる（テスト駆動開発の本に書いてある）
　→古典学派にのっとる
　１単位のふるまいを検証
　他のテストケースから隔離

　ユニットテストの目的
　　期待通りに正しく動作することを検証する
　　退行を防ぐ
　　テストコードという実例を通して理解しやすくする

　たんにテストを作成すれば十分ではない→テストの質
　テストコードは散らかりやすい（プロダクションコードの数倍）

　テストコードのSOS
　　構造化
　　整理
　　自己文書化
　　　→頭文字でSOS

---

●Part2　テスト対象のふるまい

・１単位のふるまいを識別する
　ユニットテストを書かせる：ちゃんと書いている。カバレッジ９７

・テストの網羅性は十分か？
　振る舞いが大きすぎる

　→トランザクションスクリプトはユニットテストに不向き
　　→分割して統治せよ
　　　小さな振る舞いに分割する

　処理フローロジックと中核ロジックに分かれる

　関心の分離
　　因子数が少なくなる
　　　因子水準
　　　　パラメータ：因子
　　　　パラメータがとる値：水準

　組み合わせテスト
　　全網羅→爆発
　　間引き方
　　　2因子網羅→直行表・ペアワイズ
　　
まとめ
　１単位のふるまいを識別
　分割して統治
　テストしやすくなる

---

●Part3　よいテストコードを書くには
　S構造化されている
　　→パッケージ構造
　　　垂直構造（業務観点）でパッケージを設計すべき
　　　Cf水平分割（技術観点）

　　テストケースの階層化
　　　内部クラスを用いてテストケースをグループ分けする
　　階層化のメリット
　　　テストランナーで視覚的に構造を俯瞰できる、ドリルダウンできる

　　O:整備されている
　　　グループ分け
　　　　正常系
　　　　準正常系
　　　　異常系
　　　テスト設計の根拠はわからない：別途のこしておく
　　　　→JavaDocコメント

　　　パラメータ化テスト
　　　　パラメータを外だし（アノテーションつける）

　　S:自己文書化されている
　　　一目見ただけで、わかる
　　　　テストの名称：テスト条件と期待する振る舞いがわかる
　　　　AAAまたはGiven-When-Then
　　　　　AAA:Arrange準備、Act実行、Assert検証にわけて記述
　　　可読性を考慮する
　　　実用的なコードだと、ArrangeとAssertは記述長くなりがち
　　　　SUT：テスト対象の構成要素
　　　　Doc：SUTがいジョンするもの
　　　　テストフィクスチャー：テスト実行に必要なものすべて

　大きな振る舞いに対するユニットテスト
　　小さく分割した振る舞いをテストした後は
　　→処理フローロジックのテストは必要か？
　　単独でテストするのではなく、集合体でテスト（コンポーネント）
　　集合体として提供する振る舞いをテストする
　　　代表パターンとエッジケースでいいときも

　テストダブルの使い方
　　テスト：ダブル実際のコンポーネントの代替
　　　スタブとモック

　間接入力
　　SUTはDoCとの相互作用により、振る舞いを実現
　　DoCが返す結果＝SUTにとっての間接入力
　　スタブを使う
　　　　制御困難
　　　　複雑なオブジェクトグラフ
　　　　通常だと発生しない例外
　　　　期待する間接入力

　　間接出力
　　　副作用として発生するもの
　　　間接出力の観測：モックを使う
　　　→つかわずにすまないか考える（副作用がなくなるように）

　テストダブルまとめ
　　使わないで済むか
　　スタブ：適切に
　　モック：つかわないですむか

　テストパターン
　　テスト特有のパターン

　小まとめ
　　SOSの整理
　　小さな振る舞いを網羅してから大きな振る舞いへ

---

●キーメッセージ
１．ユニットテストの意義
　　１単位のふるまい
　　振る舞いの識別と分割：設計と表裏一体

２．テスト容易性
　　小さく分けるテスト設計しやすい

３．テストコードを重要な資産として扱う
　　テストコードのSOS

---

●しつもん
・パッケージソフトのユニットテスト、どこから手を付けたら
　レガシーシステム全般に言える
　全部テストしたらとんでもない工数
　　重要な所
　　変更頻度が高いところ
　　　→テストコードが書けないか、
　重要なテストケース

---

■単体テストの始め方/作り方
（リスペクトです。パクリではないです）

・今回の例：予約注文処理を加えるとき
　　通常の商品は在庫確認（既存仕様）
　　予約注文の商品は在庫を確認しないで注文

・まずはテストをかこう
　パターンに沿って書く
　　テスト駆動開発
　コードを書く前に失敗する自動テストコードを必ず書く
　重複を除去する

・まずは日本語でテストケースを書いてみよう
　予約商品を注文すると予約される

　AAAパターン
　３つのプログラムに分ける
　・Arrenge（準備）：注文商品が予約商品
　　　　③ＡｃｔとＡｓｓｅｒｔを満たすように
　・Act（実行）：注文をする
　　　　①もっとも簡単なＡｃｔから書く
　・Assert（確認）：予約注文として登録されるか
　　　　②検証したいことを確認

　テストコードと日本語のコメントが１；１で対応する

・テストのふるまいは入力と出力が決める
　　入力：引数
　　　　　隠れた入力：時刻、状態、外部プロセス（ＤＢなど）
　　出力：戻り値
　　　　　隠れた出力：状態、外部プロセス

・隠れた入力と隠れた出力をテストするには
　１．公開する
　　　状態を返す
　　　戻り値として

　２．テストダブルを使う
　　　ＤＩ

・リファクタリングしてできた

・テストはＤｒｙよりＤＡＭＰ：テストはより説明的に
　Ｇｏｏｇｌｅのソフトウェアエンジニアリング

・わかりやすい検証を選ぶ

・まとめ
　まずはテストコードから
　ＡＡＡパターンを日本語で考えよう
　入力と出力・隠れた入力と隠れた出力を分けて考えよう
　わかりやすいテストコードを加工
　ＤＲＹよりＤＡＭＰ
　わかりやすい検証を選ぶ

---

■Mutation Testingのプロジェクト実践

・自己紹介

・問題意識の共有
　テストコードを書けば品質が良い？
　　すべてのふるまいを検証できている？見切れない
　カバレッジを通せば品質が良いか？
　　コードカバレッジでは測れないところ

・ＭｕｔａｔｉｏｎＴｅｓｔｉｎｇとは
　（ミューテーションテスト）

　ソースコードに意図的なバグ（＝ミュータント）を入れる
　そのバグを検出できるか
　　　バグ検出できる（Killed(成功）

　PIT(PITest)とは
　Ｊａｖａ向けミューテーションテストツール
　　バイトコードを操作して、小さな変異（ミュータント）を自動で埋め込む
　　コードを書き換えても、テストが成功する：テストが弱い

・プロジェクト実践
　Spring Boot+MyBatisのレイヤードアーキテクチャ
　ＰＩＴが埋め込む
　　テストは@SpringBootTestで
　　PITとの併用可能→遅くなる
　　→対応：ナイトりービルド、ＰＩＴのインクリメンタルモード

　インフラ層は使えない
　ＤＢＵにｔなどほかのツール併用

　ＣＩ／ＣＤパイプラインとの統合
　GitHub ActionやJenkinsと統合可能だが、プッシュ、プルリク実行するのは非現実的
　　→スケジュール実行（ナイトビルドなど）

　生成ＡＩが作ったテストコード
　　生成されたテストコードの多くがＨａｐｐｙＰａｔｈ（正常系で記載）
　　ミュータントが残る→人間が補強、ミューテーションレポートを読みながら…
　　数日後には変わっているかも

・質問
　認証回りのテストは？
　セットアップが多いことはある→分離する
　　ログインとその先でわける

HTML,CSS,JS,AJAXのデバッグをブラウザで行う「開発者ツール」の概要（Chrome編）

年末年始のまとめ第二弾（第一弾はアマチュアオケ）

ブラウザのF12キーを押すと、「開発者ツール」というのが出てきて、

HTML,CSS,JS,AJAXのデバッグができるんだけど、

F12キーを押したあとで、どうするのかについて、

まとめてみる

今回はChromeについて、

（気が向いたら、いつかedgeについても）

書いてみたいと思います。

---

■開発者ツール（Chrome編）

　Webブラウザ上でファンクションキー（キーボード一番上の行）のF12と書かれたキーを押すと、↓のように

右側に「開発者ツール」というのが出てくる。

（別ウィンドウで出てくることがある）

赤枠のタブのところを切り替えることによって、

HTML/CSSやJSやAJAXのデバッグに切り替えることができる

---

■Elements（要素）ーHTML,CSSのデバッグ

まず、赤枠のタブで、英語表示の場合Elements、日本語表示の場合「要素」をクリックする。

すると、現在表示している画面のHTMLが、右上に表示される。

このHTMLの文中をクリックすると、そのクリックした部分に相当する画面部品が、左側に表示されていれば、そこが反転する。

そして、その個所にかかっているCSSが、右下に表示される

↓の例はタブのところのHTMLを選択した場合

逆に左側の画面部品を選択し、右側にHTML、CSSを出力したい場合は、↓の記事に書いたので、そちらを参照

今カーソルが当たっている個所のHTMLと、そこにかかっているCSSを、一撃で知る方法（ChromeとEdgeの場合） - ウィリアムのいたずらの、まちあるき、たべあるき

---

■Console（コンソール）エラーを表示する

つぎに、Consoleというタブをクリックすると、↓のようにコンソール画面になる、

右側のウィンドウにエラーメッセージなど、コンソールに出力するものがここに表示される。リンクの形になっているものは、そこをクリックすると、その個所に飛ぶので便利

---

■Source→Javascriptのデバッグ

つぎに、Sourceと書かれたタブをクリックすると、↓のように、表示している画面が読み込んだJavaScriptが表示される。そのJavascriptをクリックすると、右側に、そのJavascriptの内容が表示される。

この画面からブレークポイントをはり、デバッグすることができるが、そこまで書くと長くなるので、別の記事で取り上げることとし、今回はここまで。

---

■Network→AJAXのデバッグ

次にNetworkというタブについて説明したいんだけど、

そのままでは見れない。

タブに「＞＞」というところがある。

そこ（↓の図の赤枠）をクリックすると、見えていないタブが選べる。

今回はここからNetworkを選択する

全宅すると、右側に、Javascript内でアクセスしたAJAXの一覧が表示される

右側に現れたAJAXの１つを選択すると

↓のように選択したAJAXの呼び出しや戻り値について表示される

---

■Application→localstorage、クッキーなどの内容表示

　ほかにもいろいろあるんだけど・・・

　とくに、localstorage、クッキーなどの内容表示として、Applicationを紹介しておきます。Networkのところで示した、「＞＞」タブをクリックすると出てくる一覧から、Applicationを選択。すると、↓のように右側にツリーが出てくる

ツリーでStorageの下に、LocalStorageというのがあるから、

その▶を選択（クリック）して中を出させ（▼になり、下に展開される）、

それをクリックすると、

右側にLocalStorageの内容が展開される。

クッキーも同様（Cookieの▶を選ぶ）

---

概要はこんな感じ。

今カーソルが当たっている個所のHTMLと、そこにかかっているCSSを、一撃で知る方法（ChromeとEdgeの場合）

ブラウザで表示している画面のHTMLやJavascript,CSSを知りたい場合は、

F12キーを押して、「開発者ツール」を出すと知ることができる

（デバッグできる）けど、めんどくさい。

いま、カーソルが当たっているところ、フォーカスしているところの

HTMLや、そこにかかっているCSSを一発で見る方法を最近知ったので

（みんな知ってるかも？）メモメモ

先にChrome版を紹介して、そのあとにEdgeの場合を紹介

---

■Chromeの場合

フォーカス、カーソルが来ているところで

・マウスの右ボタンをクリック

・メニューが出たら、一番下の項目を選ぶ（英語でも日本語でも）

　　→下の図の赤枠

すると、右上（または別ウィンドウ左）HTMLがでてくる。

ハイライトされているところが、フォーカス部分のHTML

　→下の図の赤枠

右側に出る場合には右下、別ウィンドウの場合は右側に、

フォーカスされたところにかかるCSSが出ている

　→下の図の緑枠

CSS名のところをクリックすると

　→下の図の青枠

そのCSSが表示される

　→下の図の赤枠

---

■Edgeの場合

　Chromeの場合と全く同じなので、

　文字部分はコピーして同じものを書き、

　図だけEdgeのものに、差し替えておきます。

フォーカス、カーソルが来ているところで

・マウスの右ボタンをクリック

・メニューが出たら、一番下の項目を選ぶ（英語でも日本語でも）

　　→下の図の赤枠

すると、右上（または別ウィンドウ左）HTMLがでてくる。

ハイライトされているところが、フォーカス部分のHTML

　→下の図の赤枠

右側に出る場合には右下、別ウィンドウの場合は右側に、

フォーカスされたところにかかるCSSが出ている

　→下の図の緑枠

CSS名のところをクリックすると

　→下の図の青枠

そのCSSが表示される

　→下の図の赤枠

Javaのジェネリック（<T>ってやつ）について聴いてきた！

10/27、JJUG CCCに行ってきて聴いてきた話。

最後はジェネリック。

JavaでArrayList<string>なんていうときの< >の部分のお話↓。

おまけ：いままでのJJUG　CCCレポート

JAVAのWebフレームワークの現状とかMicroProfileについて聞いてきた - ウィリアムのいたずらの、まちあるき、たべあるき

JAVAのWebフレームワークの現状とかMicroProfileについて聞いてきた - ウィリアムのいたずらの、まちあるき、たべあるき

Javaのバージョンアップに伴い、変更された箇所を調べるには？ - ウィリアムのいたずらの、まちあるき、たべあるき

Javaのバージョンアップに伴い、変更された箇所を調べるには？

Javaのバージョンアップに伴い、

どのようなクラス・メソッドが追加されたか、

非推奨、削除になったかは、

リリースノート、以降ガイドなどで分かるけど、

バージョンアップによって変更された内容などは、

載っていなかったりする。

そういう

　　　Javaのバージョンアップに伴い、変更された箇所を調べるには？

ということを、10/27、JJUG CCCに行ってきて、

 「失敗しないOpenJDKの非互換調査」

で聴いてきたので、シェア

---

結論から言うと、変更箇所は

CSRドキュメント

を見ると載っている。

CSRドキュメントは、Java Bug System

https://bugs.openjdk.org/secure/Dashboard.jspa

のSearch欄に"CSR"と入力すると出てくる

では、以下↓、聴いてきた内容です。

新卒2年目だそうだけど、

わかりやすくてためになる発表でした。

おまけ：いままでのJJUG　CCCレポート

JAVAのWebフレームワークの現状とかMicroProfileについて聞いてきた - ウィリアムのいたずらの、まちあるき、たべあるき

JAVAのWebフレームワークの現状とかMicroProfileについて聞いてきた - ウィリアムのいたずらの、まちあるき、たべあるき

JAVAのWebフレームワークの現状とかMicroProfileについて聞いてきた

10/27、JJUG CCCに行ってきて、いろいろお話を聴いてきたんだけど、

多分、後ろから話したほうがわかりやすいので、まずは、

最後に聴いてきた、きしださんの

「JAVAのWebフレームワークの現状」

についてシェア↓

JavaでWebアプリを作るとすると、

・HTTP処理

・Webアプリケーション処理（共通部分）

・サーバー管理

・開発部分

の共通部分と、アプリケーション固有の部分があるんだけど、

この共通部分を提供してくれるのがフレームワーク。

このフレームワークは、以下のように発展してきた

・サーブレットコンテナ

・埋め込みサーバー

・Docker利用

・サーバーレス

この発展の流れに沿って、話を進めて言っている。

で、次の話

「サーブレットコンテナ」は、TomcatのようなWebサーバーを立ち上げて、そこに複数のWebを用いた業務アプリをサーブレットとして作成していく形。

Strutsなどはこの形。

この形は、サーバーが１つの場合はいいんだけど、マシン処理の限界などから、複数のマシンを束ねてクラウドとして実行する場合、クラウドのメリットを享受できなかった。というか、クライドには向いていない。

そこで、埋め込みサーバー型のフレームワークが出て来た。

これはサーバーも埋め込んでいるので、１つのアプリケーションとして動いて、それをクラウドで動かすという形。

で、話はさらに進む

一方、クラウドの世界では、Dockerが出て来たので、

そのDocker上にフレームワークを載せるという形になってきた。

さらに、クラウドがマイクロサービスを行うようになると、

そのマイクロサービスに対応したMicroProfileが

注目されるようになってきた

その一方で、JavaEEは、クラウドに対応し遅れたため凋落。

また、Oracleのバージョンアップも遅かったので、

それに反発した人たちがEclipseファンデーションベースに

JavaEEに相当するものを作った

（が、名前はJavaとは商標上つけられないので）

それがJakartaEE

今ではマイクロサービスがさらに進み

サーバーレスとなっている

ここに及んでJakartaEE１０では、サーブレット非依存となった。

っていうお話。

コンパクトにまとめられていて、いままでのJavaをめぐるフレームワークとかの話が分かる、いい講演でした。

ってことで、MicroProfileの話。

きしださんの前は、そのMicroProfileの最新状況（７．０）を聴いてきました！

７．０の変更はそんなになかったみたい。

この前は、ちょっとおひるお休みして、

午前中に聴いたセッションになるんだけど、

話が全然違うので、またいつか、それについては書きます。

今日はここまで

SpringBootとMicroProfileどっちがいいか、聴いてきた。

JJUG　CCCで

講師の結論は「どっちもどっち」っていうことだったんだけど、

普通に聴くとSpringBootの

話の内容は↓

<iframe id="talk_frame_1200770" class="speakerdeck-iframe" src="//speakerdeck.com/player/dc6c353638ec4dc7b37c96b596dae47a" width="710" height="399" style="aspect-ratio:710/399; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe> 

今、一番使われているJavaのLTSは

Java１７

とかいう、今Java関連で流行っているものについて

JJUG CCCで話してたのでメモメモ

講師はNew Relic株式会社の人なんだけど、

サイト↓に、このお話の内容があるみたい！

2024年 Javaエコシステムの現状レポート | New Relic

「Java First Java always」を聴いてきた

６月１６日のJJUG　CCCで、基調講演

「Java First Java always」を聴いてきた

英語なので、一部そのまま英語で書いてたり、

間違えていたらゴメン

主な話は、

前半はJavaのリリーススタイルの変化について

・安定したものが欲しいという要望と

・早く新しい機能を入れてほしい

という要望を満たすため

・半年ごとのリリース

・LTS

というリリースになったということ

後半はJavaとAIについてなど

「Spring for GraphQLの実践」を聴いてきた！

６月１６日（日）、JJUG　CCC　に行ってきて、

「Spring for GraphQLの実践」

を聴いてきたので、メモを貼っておきます

GraphQL知らないので、基本的なこと聴けるかなと思っていったのですが

甘かったでした。バリバリ実践話。自分はわかってないので、

適当に脳内補完しながら書いているので、

間違ってたらゴメン。

話しとしては、

　　リゾルバとして、どんなMappingが必要か

　　　　@QueryMapping

　　　　@MutationMapping　変更（更新）するとき

　　　　@SchemaMapping

　　　　@BatchMapping

　　　　＠EntityMappingの利用

　　ソースを自動生成・バリデーションしているところとそのツール

　　　　DGS Codegen

　　　　Apollo Codegen

　　　　graphQL-java-extended-validation

　　認可処理

　　テストについて

　　　　HttpGraphQlTester

　　　　WebSocketGraphQlTester

　　　　ExecutionGraphQlTester

　　認可のテスト　

なんていうところのように聞こえました。

勘違いしてたらゴメン

MMD（初音ミク）がサポートされたオープンソースのJavaScriptライブラリBabylon.jsのありか

↓の記事

マイクロソフト、JavaScriptライブラリ「Babylon.js 7.0」でMMD（MikuMikuDance）やApple Vision Proサポート

にある、MMDを動かしたり、その他いろいろできるオープンソースのJavascriptライブラリBabylon.jsのありかは、↓

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

https://www.babylonjs.com/

MMD用チュートリアルは↓

MMD Loader | Babylon.js Documentation (babylonjs.com)

HTMLの各要素に、どのCSSがかかっているのかがわかる、ChromeのF12キー

■ChromeのF12キーって、便利ですよね！

たとえば、↓の画面で

文字が赤くなっているけど、

「いや、CSSでは、青って書いたんだけどなあ～」

っていうとき、

ブラウザがChromeで開いているのなら、

---

■F１２キーを押してもらうと、

　↓のようにソースコードが右側に（場合によっては別ウィンドウ）ででてくる。出てこなかったら出て来た右上のウィンドウのタブをElements（赤枠）にすると見えるはず。

　ここで、…と３点リーダーになっているところ（青枠）があるから、そこをクリックしていくと、中のソースが見えてくる（ソースコードの中にまた…が見えたら、そこをクリックしていく）。

　見たい対象のソースコード（今、テキストボックス内の赤字になっているところが見たいので、そのテキストボックス）のところまで開いて、ソースコードが出てきたら、

そのソースコードの行（テキストボックスの行）をクリック

↓の図のようにその行が反転し、いろいろ表示される

---

■F12キーを押すと見えるもの

表示している画面（左側）のところ（赤枠のところ）に、

今、ソースコードの対象行にあたる要素が

　　　どういうタグのどんなIDで、どんなクラスか

　　　その大きさがどのくらいか（ピクセルで）

が出てくる（textarea＃A1.aと書いてある赤枠のところ。textareaがタグ、A１がID、aがクラス)

　また、右下に、そのHTMLにかかっているCSSが表示されている（青枠のところ）。上から、かかっているCSS順に表示されている。

　各CSSの右側にそのソースのCSSファイル名（.css)が表示されている（黄色枠）

　一番下のCSSのところはuser agent stylesheetってあるけど、それがデフォルトでブラウザが設定するもの（＝CSSの設定がなければそれが出るはず）

　取り消し線が引かれているのは、適用されていないのを示す。

　この例だと、a.css(黄色の枠の下の方）のcolorに線が引かれている。

　この場合は、そのCSSは無効になっている。

　そして、それより上のCSSで有効になっているものがあることを示している。

---

■上の例だと、

　b.cssのcolorが線が引かれていない。なので、これが生きていることになる。

　実際、左の画面では、colorが赤＝文字が赤になっているし、

　b.cssのソースをみると

color:redになっていて、index.htmを確認すると

b.cssがa.cssより下に来ているので、これがきいていることがわかる

---

■かかっているCSSをきかせないとどうなるかも調べられる

このように、Chromeで表示した後、F12キーを押せば、

HTMLの各要素に、どのCSSがかかっているのかがわかるけど、

それだけじゃなくって、値を修正したら、どうなるかがわかる。

有効なCSSに対して、左側にマウスポインタを置くと

チェックボックスが出てくる（redのところ）

このチェックボックスのレを外すと（クリックすると）、こいつを執行しない場合、何が有効になるかがわかる

color:redに取り消し線が引かれ、color:blueが有効になり、

左側のテキストボックスの文字が青くなった。

※ちなみに、無効になっているところもチェックボックスがあって、

このチェックも外せるけど、外しても（もともと無効だから）何も起こらない。無効なCSSを、実際に有効にするには、CSSの順番を変えるか、!importantをつけることだけど、それにはソース修正が必要なので・・・下を見てくれ）

---

■ここから、CSSの値を変えることもできる。

！importantとかもつけられる。

　値のところをクリックすると、入力できるようになる

↑の例では、color:blueのblueをクリックしている

（表示はredが生きるように元に戻した）

ここに「green !important」と入力すると、

緑色にテキストボックスの文字が変わっている。

ということは、（上位にあるはずのredがきいていないので）importantも有効になっている（色だけ変えることももちろんできる。ただここでgreenと変えても、取り消し線が引かれるだけ。緑色に変えたい場合は、普通はredのところを直すべき。ここではimportantがきくよ！ということを示したかったので、blueを直した）

---

■修正は、これだけにとどまらない。CSSの行を追加することもできる。

各CSSの一番最後の行の下のほうをクリックすると、新しい行が追加される

↓の図は、color:redの下（赤枠）をクリックしたところ。クリックすると:が出て（：が出て来たところを撮っている）、１行入力できるようになる。

backgroundを設定してみた↓

---

■CSSを追加できることもできる

セレクタを変えて、CSSを追加したい場合は、

各CSSの枠の右下の端のところにマウスポインタを置く。すると

↓の図のように十字（＋）が出てくる

ここをクリックすると、CSSを書くことができる。

全体(html)の文字色を変えてみました（赤枠）

---

■カスタムプロパティでもっとすごいんだけど・・・

さらにレスポンシブWebデザインなんかするときに、カスタムプロパティを使った場合、このF12キーを使うと便利便利！なんだけど・・・

　そもそも、「カスタムプロパティって何！」から説明しないといけないですよね・・でも、そこから書いていくには、もうこの記事長くなりすぎているので、それは別の記事に書くこととし、この記事は、この辺で終わりにします。

※今回はChromeで書いたけど、Microsoftのedgeでも、f12キーを押すと似たようなことができるみたいです（Edgeのほうは、ほとんど知らない。開発ではChromeを使うので）

input searchで入力すると出てくるXの色を変えるには？

htmlのタグinputには、type ="search"というのがある↓。

このタグを使うと、入力するとき、Xが出てきて、

このXをクリックすると、入力内容がすべて消える

ここで、入力領域を、↓のCSSのようにすると

.answer {
color:white;
background:black;
}

（つまり、入力領域の文字を白、背景を黒にすると）

Xだけ、白くならない。このXの色を白くするには？というのがお題。

---

■失敗：-webkit-search-cancel-buttonでは、色は変わらない

このXは、-webkit-search-cancel-buttonで、表示したり、削除したりできる。

例えば、表示を消すには、

input[type="search"]::-webkit-search-cancel-button {
　　　-webkit-appearance: none;
}

で消える。じゃあというので、同じ理屈で、

input[type="search"]::-webkit-search-cancel-button {
　　　color:white;
}

とやっても、Xボタンは白くならない。

---

■白く変えればいい場合

で、色を変えるとき、白く変えればいいだけであれば、

「color-scheme」

color-scheme - CSS: カスケーディングスタイルシート | MDN

を使えばできる。color-schemeを

:root {
color-scheme:dark;
}

と記述すると、↓のように、周りが黒くなって、Xが白くなる。

また、フォーカスが当たった時、白くなる

周りも黒くなってしまうのは、困る。

そこで、color-schemeをroot(つまりhtml全体）にではなく、input[type="search"]に適用し、

さらに、フォーカスが当たった時、白くするのをやめさせる（outline:0）

と、思ったような感じになる。

まとめると、CSSは、こんな感じ

.answer {
color:white;
background:black;
}


input[type="search"] {
outline:0;
color-scheme:dark;
}

そうすると、こんなかんじ

---

■白以外の場合

自分の場合はこれで済んだんだけど、白以外のXにしたい場合は…

Xのアイコン画像を変えるとできるのかなあ～（やってないです）

詳しくは、↓のサイトにあるみたい

<input type="\</p">

VMWereって、買収されてたの知ってた？で、Springは今、ブロードコムが扱ってるらしい

２月２日にあった、JSUG勉強会2024その1　
Spring for GraphQL入門、そしてSpring Boot 3へのマイグレーション
の話をYouTubeLiveで聴いたんだけど

 

その話を報告していないので、メモ

---

Spring for GraphQLは、
JavaのフレームワークSpringで、
（DBに依存しないで）データ検索・更新を行うための言語GraphQL
を使うライブラリ。

今回の勉強会では、その概要と書き方（デモ）をやっていたんだけど、
デモ・書き方部分は、メモってない

それと、SpringBootの２系のサポートが終わり、３系になっているので
そのマイグレーションについて。

終わりの方の１０分間で、
以前、Springを扱っていたVM Wareをブロードコムが買収し、
その結果、今ブロードコムがSpringの有償サポートをしていて、
NECと協業していることを説明してた

---

以下、その時のメモ