kanuazutのblog

よわいエンジニアの備忘です

受験記:AWS Data Engineer Associate

認定試験を受験したので体験記をまとめておきます。

試験概要

基本情報

AWS Certified: Data Engineer Associate試験です。

項目 内容
受験料 20000円+税
試験時間 130分
出題形式 選択式
合格点 各720点以上
受験目的

昨年度AWS12冠でしたが、新規にAWSDEAが出来たので全冠に戻すべく受験しました。

受験結果
項目 内容
受験日時 2024/8/17
結果 合格
点数 755

勉強に関して

事前知識

勉強開始前の知識レベルは以下の通りです。

  • AWSのアーキ設計歴5年程度
  • AWS資格12冠
勉強方法

勉強には以下のコンテンツを利用しました。

総学習時間: 3h45m

Udemy 問題集

以下のUdemyの問題集を利用して勉強しました。これを一通り解ければ合格は可能だと思います。
解答解説がきちんとつくられていて、勉強になりました。英語なので翻訳機使いながらの利用です。
Practice Exams | AWS Certified Data Engineer Associate[2024] | Udemy

参考書籍

資格の学習用に読んだ訳ではなかったですが、ここ数か月で読んだ参考になった書籍も記載しておきます。

AWSではじめるデータレイク

AWS DEAの出題範囲にほぼ適合している書籍です。
S3, Athena, Glue, Redshiftなどデータエンジニアリング周辺のAWSサービス群について丁寧に説明されています。AWS DEAの為の教科書としては一番役立つと思います。
サービスの仕様だけでなく、基本的な概念も説明されており読みやすいです。資格試験を抜きにしても参考になる内容なのでおすすめです。

クラウドデータレイク

AWSに関する書籍ではないですが、データレイクに関する基本事項を学べます。
クラウドデータレイクの思想やベースとなる技術背景について学べ、AWSのWell-Architected5つ柱にも通ずるメンタルモデルを知れると思います。
Parquetなどの列指向フォーマットやデータ分析に効果的なテーブルの論理構造など試験の中でも必要な知識も獲得できます。
AWSのデータ分析サービスの土台となる基礎技術を知ることが出来ると思います。


所感

試験に関して

難易度:★★★☆☆

Associateレベルの試験のため、Professionalレベルに比べると比較的易しくはありますが、Associateの中では一番難しく感じました。
データエンジニアリング周りのサービスが出題の中心であり、業務で触れていない人も多いと思うので事前の学習はしておいた方が良いと思います。

2024年5月読書感想文

5月に読んだ本の読書感想文です。

スタッフエンジニア マネジメントを超えるリーダーシップ

満足度:★★★★★

エンジニアの端くれでありながら、スタッフエンジニアという言葉に馴染みが無かったので読んだ。結論としては今の自分に必要な本だった。必要なタイミングで読むことが出来たので非常に満足。

本書では、スタッフエンジニアの役割や立ち位置の概要を説明したのち、一線級の企業でスタッフエンジニアの役割を全うする人の働き方をインタビュー形式で紹介している。後半のインタビューがメインの内容といっても過言ではないと思う。インタビューの中には示唆に富む言葉も多い。納得する言葉もあれば、首を傾げる言葉もあるが、総じて為になる内容だった。様々なパターンのスタッフエンジニアが登場するため、自身の環境や志向に合うスタッフエンジニア像が一つは見つかると思う。

普段の仕事の中ではチーム内での役割や担当内での有識者としての位置取りなどを意識することが多いが、スタッフエンジニアのような上級エンジニアになるにつれて、組織全体の中でのポジショニングを意識することが重要であることを再認識した。また、単にキャリアを進めるにしたがって視座を高めればよいという話でなく、目指すポジションが右腕なのかテックリードなのかによって注視すべき対象はチームメンバにも企業進路にもボスにもなるし、動き方は個々の環境で変化することもイメージできた。

本書を通して、漠然と思い浮かべていたテックリードプリンシパルエンジニアのイメージの解像度があがるとともにスタッフエンジニアというものの外殻をとらえる事ができた。月並みだが、スタッフエンジニアに唯一の正解はなく、組織ごと、個人ごとに正しいスタッフエンジニアとしての在り方があるのだと思う。

違うタイミングで読むと違う感想になると思うので、またキャリアが進んだ段階で読み返したい。

ユーザーの問題解決とプロダクトの成功を導く エンジニアのためのドキュメントライティング

満足度:★★★☆☆

ITエンジニア向けのドキュメンテーションの啓蒙書。
本書で対象としている文書は、APIリファレンスやReadMe等の公開文書。設計書等の開発ドキュメントではないため注意。
自社でプロダクトやサービスを抱える企業にとって、デベロッパ向けドキュメントの明瞭さはプロダクトの利用推進に関わってくるため死活問題であり、テーマ自体は興味深いものだった。

本書の内容を一言でいえば、ドキュメントを利用する人の目線に立ってライティングしようということ。書かれている事項は、言われてみれば当然のことばかりではあるが、まとめられていることが大切だと思う。
プロダクトをユーザに利用してもらうという目的に立ち返ればドキュメントが重要なのは自明だが、単にタスクとして執筆に取り組むと忘れがちなので、ドキュメントのセルフチェックや自戒のために本書を使うのもありかなと感じた。

実際のドキュメントライティングでは、公開されている類似プロダクトの良いドキュメントを探して参考にすれば事足りる場合もあると思うので、本書を読んだ方が良いかは好みになるかも。



クラウドデータレイク

満足度:★★★★☆

クラウドデータレイク入門
書籍のタイトルに入門という言葉はないが、オライリーの他の入門書と同レベルの内容。「データレイクとは何か」から学び始める人向けとしては、よく整理されていて良い。

内容はデータエンジニアリング系の本を読んでいれば、どこかで見聞きしたものが多い。
多くの本から少しづつとってきて集約している感じにも受け取れるので、その分野の人が読むと既知の内容が殆どだと思う。
AWS BigData AnalysisとかGCP Professional Data Engineerとか、パブクラのデータ系資格を持ってる人にとっても今更感があるかもしれないが、知識の再整理には役立つと思う。


前半はデータアーキテクチャに関する概況が説明されており、その中には知らないものもあって読むのが楽しかった。
後半は具体的な技術や運用を意識したアーキテクチャのキーポイントを説明している。
キーワードレベルで関心のあったテーマを記載しておくと以下の通り。

  • BigDataの3V⇒6V
  • 将来の変更にも耐えうるフィーチャープルーフ
  • データメッシュアーキテクチャへのカルチャーシフト
  • 生データ・クレンジングデータ・キュレーションデータなどのデータレイヤをデータゾーンと呼ぶこと
  • データオブザービリティ5本の柱
  • Parquet, DeltaLake, Icebarg, Hudiなどの仕様

特に最後の2つは興味深い内容だった。

なお、ParquetはDeltaLakeやIcebargの前提説明として登場するが、AvroやORCの説明はない。HadoopやSparkに関しても概要説明はあるが、技術的な説明はない。
基本をおさえた良い内容ではあるが、技術面での網羅性は高くないのでその点は留意。

UMLモデリング L1 第2版

満足度:★★★☆☆

UMTP認定試験の勉強用に読んだ。
出版日は古いですが、内容に問題はなく特に不満はない。
あくまで試験対策本という感じで、UML自体について学びたければもっと新しい良書があると思う。

図解 人材マネジメント入門 人事の基礎をゼロからおさえておきたい人のための「理論と実践」100のツボ

満足度:★★★☆☆

ゼロから学ぶというタイトル通り、かなり平易な内容となっている。
新卒社会人や畑違いから人事業務に就く人が、速攻で最低限の内容を押さえたい時に読むと良さそう。

1つ1つのトピックが数ページ+図解1ページという構成になっており、隙間時間で読み進めることが出来るのはよい。珍しさ目新しさはないけど、その分爆速で読むことができる。
悪く言えば薄味の小盛りであるため、人事部で人事制度設計をやっていく人やある程度の規模の組織で管理職を担う人には物足りないと思う。

個人的には入社研修で教わった内容が多かったため少し退屈な部分もあったが、復習にはくどくない分量で、自社の人事制度の妥当性を見直すきっかけとなってよかった。
また、教育心理学本で見たことのある内発的動機付け、外発的動機付けに近い話(内的報酬、外的報酬)が登場していたことも興味深かった。





満足度の判例

満足度 基準
★★★★★ 非常に満足。繰り返し読みたい。
★★★★ 満足。興味深い内容。人にも薦めたい。
★★★ 何かしら知見や洞察、内省の機会が得られた。
★★ 今の自分に必要な本ではなかった。
自分には合わない。読む必要はなかった。

受験記:UMTP認定試験 L1

認定試験を受験したので体験記をまとめておきます。

試験概要

基本情報

通称UMTP認定、正式名称はUMLモデリング技能認定試験です。

UMTPにはL1~L4まで4つのレベルがありますが、
今回は一番下の試験「UML Modeling Certified Test Level 1」を受験しました。

項目 内容
受験料 15,000円+税
試験時間 80分
出題形式 択一選択
合格点 30問中24問以上

L1のスキルレベルの説明は以下の通りです。

簡単なUMLモデルの意味が分かる
UMLなどを使ってモデリングを行う最低限の知識を持っている

受験結果

結果は合格です。1問落としてしまいましたが、余裕をもって合格できました。

項目 内容
受験日時 2024/05/25
場所 CBT (PearsonVUE)
結果 合格
点数 96%

勉強に関して

事前知識

勉強開始前の知識レベルは以下の通りです。

  • 業務でシーケンス図やクラス図、アクティビティ図を描いたり読んだりすることが時々ある
  • モデリングの入門書を読んだことはある

勉強方法

勉強には以下のコンテンツを利用しました。

総学習時間: 8h

UMLモデリングL1

勉強時間:5h

UMTP L1のテキストです。出版が2008年と古いですが、UMTP自体がUML2.0の内容を問うものとなっているため特に問題なかったです。
解説+練習問題、巻末の総合問題という構成になっています。

練習問題はT1とT2の2つのカテゴリに分かれていますが、現行試験ではT1/T2に分かれていません。現行の内容はT2に対応するものとなっているので、基本的にはT2の問題を中心に学習するのがお勧めです。
とはいえ、知識定着の為にはT1の問題を解くのも有効だと思いますので、両方問題なく解けるようにしておくと良いと思います。

練習問題は実際の試験問題よりやや難しめに感じたので、書籍の問題が理解できていれば本試験は問題ないと思います。

UMLモデリング技能認定試験L1 問題集

勉強時間:3h

前述の書籍よりこちらのテキストの方が解説が分かりやすく感じました。内容の網羅性も高いので、基本的にはこちらの書籍をお勧めします

問題集という書名ですが、説明+練習問題という構成なので教本として利用できます。出版は古く2007年ですが、問題ありません。
こちらもT1, T2に分かれていますが、T1の内容を前提にT2のページが書かれているので事前知識なしで読む場合はT1から読むと良いと思います。

私は全部に目を通す時間がなく、練習問題だけ取り組みましたが解説もわかりやすく、こちらの書籍をメインに学習すればよかったなと思いました。

公式の試験対策セミナー動画

私は利用しなかったのですが、有用かと思うので紹介しておきます。
公式サイトから対策セミナーのYoutube動画が無料で視聴できます。
L1対策セミナーは90分の動画になっており、基本知識とサンプル問題を解説した内容です。

所感

試験に関して

難易度:★☆☆☆☆

難易度
問題は易しいです。問題集よりも本試験の方が易しいので、テキストの問題が解けていれば難なく合格できると思います。
問題の中にはUMLの知識がなくても常識で解けそうな問題もありました。業務でUMLを利用している人は殆ど勉強なしで合格できると思いますが、どんな問題が出るか書籍に目を通しておくと試験当日に問題を見たときに戸惑いがないと思います。

問題形式
試験は択一式です。テキストや問題集には複数選択問題が掲載されていますが、本試験では択一問題ですので間違えないようにしましょう。

また基本的なことですが「適切なものを選ぶ」「不適切なものを選ぶ」問題があるので間違えないように気を付けます。

問題集に比べて実際の試験問題は問題文が短く前提がはっきりしないものがあるので、前提の補完・推測が必要になるものがあります。暗黙の了解をうまくくみ取りましょう。

ほか

  • 試験時間80分、問題数30問なので十分な時間があります。焦らずゆっくり取り組みましょう。私の場合は30分程度でした。
  • 以前はL1⇒L2⇒L3と順番に合格していかないといけなかったのですが、いつからか前提資格は不要になったようです。L1は簡単すぎるという方はL3ないしL4からいきなり受ける事も可能なので、検討するとよいと思います。

受験記:Google Cloud Certified: Professional Cloud Network Engineer

認定試験を受験したので体験記をまとめておきます。

試験概要

基本情報

公式ページ
Professional Cloud Network Engineer 認定資格  |  Learn  |  Google Cloud

Google CloudのNetwork関連サービスの知識を問う認定資格です。 ネットワーク サービス、ハイブリッドおよびマルチクラウド接続、VPC の構成設計・実装などの知識が求められます。

項目 内容
受験料 $200
試験時間 120分
出題形式 50 ~ 60 問の多肢選択(複数選択)式

受験目的

Google Cloudを業務利用するにあたってサービス知識を身に着けておくことは有用かと思い順番にGCP資格を取得していました。Network Engineerもその一環です。
試験範囲のハイブリッド接続などは必要にならないことも多いですが、ネットワークアーキテクチャの設計や実装などはクラウドを使う上で頻出のタスクだったりするので、有用な知識も多いと思います。

受験結果

項目 内容
受験日時 2024/05/12
場所 IBT (Kryterion)
結果 合格

合格でした。点数は未公開のため分かりません。

勉強に関して

事前知識

勉強開始前の知識レベルは以下の通りです。

  • 一般的なVPC, Cloud Compute, Cloud SQLの構成を構築したことがある
  • Google Cloud Certified PCA, PCD, PDE, PCSEを取得済み

勉強方法

勉強には以下のコンテンツを利用しました。

  • Cloud Skills Boost

総学習時間: 6h
総学習費用:なし

Cloud Skills Boost

www.cloudskillsboost.google

学習時間:6h

Cloud Skills BoostでCloud Network Engineerのラーニングパスを受講しました。
私はPartners向けサイトで受講したため無料でしたが、上記リンクが有償版の同等コースにあたると思います。

Cloud Skills Boostを利用したことが無い人向けに説明すると、基本的には動画講義で学習を進め、ラボ演習と練習問題が時々挟まってくるような一連のコースになっています。動画学習に慣れている人はおすすめです。ただし英語の講義が多いため、英語の聞き取りが難しい人は自動翻訳の日本語字幕で見ることになります。
Google Cloudが出している公式のラーニングパスなだけあって、教材の質は高く、試験範囲の網羅性も高そうでした。ラボ演習もあるため座学のみの教材に比べ実務に向けたスキルも身に付きやすいでしょうし、練習問題もあるのでしっかり学習したい人には向いていると思います。
一方でとにかく試験に受かりたい人には向いておらず、すぐ認定試験に受かりたい人はもっと時間効率の高い教材を探す必要があると思います。

ラーニングパスの全コースを順番に受講した場合の所定時間は約96時間とかなり長めです。実際には半分以上がラボ演習の時間なので、講義だけ視聴するならそこまでかかりません。 合格だけを考えるなら講義とミニテストだけ取り組めば十分かなと思います。

ラボ演習に取り組むとしても50時間もあれば終わるのではないかと思います。 私の場合はラボ演習はやらず、過去に他の試験で受講済みだったコース(Google Cloud Fundamentals: Core Infrastructureなど)も飛ばして1.5倍速で視聴したため、6時間で終わりました。

所感

試験に関して

難易度:★★☆☆☆

体感としては他のProfessinonalレベルの認定よりは比較的簡単な印象です。 必要な知識レベルは他のProfessionalと同等な気はしますが、

  • ネットワーク領域に閉じた内容
  • 出題される問題が、2択まで絞りやすい

という点から、個人的には他の認定よりは簡単に感じました。 逆に「VPN?BGP?何それ?」というレベルでネットワークに明るくない人は基礎知識の勉強が必要になり難しく感じるかもしれません。

問題は素直な内容が多く、文章を注意深く読み込まなければいけない問題はありませんでした。知識が身についていれば、まあこれだろうという選択肢を選べば問題ないと思います。
試験時間は2時間ですが、サクサク進めれば40分程度で終わるため見直しの時間は十分にありました。

Tips

試験ガイドにも記載がありますが、以下の内容は正確に理解しておくことをお勧めします。

  • Dedicated Interconnect と Partner Interconnectの違いと使い処
  • 共有VPC
  • HA VPN
  • Cloud Router
  • ロードバランサーの種類
  • ルーティングルールマップ
  • 限定公開Googleサービス、限定公開アクセス、限定公開コネクト
  • Cloud Armor
  • Cloud CDN
  • Cloud NAT
  • Network Intelligence Center, Cloud Monitoring, Cloud Logging, VPC Flow Log

問題によっては別の問題の問題文にヒントのある場合があるので分からない問題には「後で見直す」をつけておき、最後に見直すことをお勧めします。

2024年4月読書感想

4月に読んだ本の読書感想文です。

マルチクラウドネットワークの教科書

満足度:★★★☆☆

ハイブリッドクラウド、マルチクラウドを説明する数少ない本
AWS/Azure/Google Cloudの代表的なクラウドサービスについて、NW系サービスの設計ポイントを紹介している本です。
AWSの場合、Azureの場合、GCの場合と同じ分量でそれぞれのサービスの技術的特徴や仕様・制約が説明されており設計時の検討ポイントが理解しやすいです。
タイトルの通りですが、オンプレを含むハイブリッド構成から始まり、複数ベンダのクラウドサービスを接続する構成が説明されています。
マルチクラウドを説明する書籍自体が少ないと思うので、これからマルチクラウドの設計検討を始める人は助かると思います。

資格試験にも良いかも
また、各クラウドのネットワーク認定試験の勉強にも役立つと思いました。
特にAWS ANSやGC PCNEなどはNWに特化した書籍が少ないのもあって、サービスの基本情報確認には適しています。ただ3つのクラウドについて説明されているので勉強用途では冗長ではあります。

逆にネットワーク系の認定試験に合格している人であれば、
専用線接続とVPN接続の2つが大きな選択肢となることや管理負担を減らすためにハブスポーク型のNW構成をとることが重要なことなど、既知の内容が多いかもしれません。
私の場合は既知の内容が多かったので★3にしていますが、書籍の内容自体は良いものだと思います。



Figma for UIデザイン

満足度:★★★☆☆


始めてFigmaを使う人にも分かるように機能説明がされています。
全ての説明はカラーでスクショを交えて丁寧な説明がされているのでサクサク読み進めることが出来ました。

Figmaを適当にポチポチ触ってるだけでは知らなかった便利な機能として、制約やバリアントについて学ぶことが出来たのはよかったです。
この1冊を読めばひとまずFigmaでモックを作成するのに困ることは無いと思います。

Figmaについてはネット情報も多いため、自分で調べつつ使えうというスタイルが身についている人はそちらの方がいいかもしれません。
私の場合は情報収集が面倒だったのと体系的に機能の使い方を知りたかったので、この本に頼りました。

Microsoft Azureアプリ開発入門ガイド

満足度:★★★★☆

Azureでアプリ開発する手順を説明している本です。コードは.NETのコードとなっています。
本書で説明されているコードはどれも初歩的な内容ですが、各サービスの連携方法の足掛かりにするには十分だと思います。
前から順番に写経していくだけで、Azureにおけるサービス利用の理解がそれなりに進みました。

ただし、題材とするシステムアーキテクチャがあるわけではなく、個別サービスの利用方法という色が強いため、実際にアプリケーションを開発する場合はシステム全体構成を検討するスキルが別に必要になってくるとは思います。

また認定試験AZ-204の理解にもある程度役立つと思いますが、試験にでるようなサービスプラン仕様のような細かい部分は記載されていないです。
AZ-204のMS Learnの内容をより実践形式にしたものという感じがしたので相補的に使えると良いかもしれません。




満足度の判例

満足度 基準
★★★★★ 非常に満足。何度も読みたい。
★★★★ 満足。興味深い内容。人にも薦めたい。
★★★ 読んでよかった。何かしら新たな知見や洞察が得られた。
★★ 今の自分に必要な本ではなかった。
自分には合わない。読む必要はなかった。

受験記:Azure Developer Associate (AZ-204)

Azure Developer Associate (AZ-204)の認定試験を受験したので体験記をまとめておきます。

試験概要

基本情報

認定試験の基本情報です。

項目 内容
受験料 21102円
試験時間 100分
出題形式 択一選択、複数選択、並び替え

試験ガイダンスには以下のように記載されています。

この認定資格の受験者は、要件の収集、設計、開発、デプロイ、セキュリティ、メンテナンス、パフォーマンス チューニング、監視など、開発のすべてのフェーズに参加する責任があります。

Azure の次の項目に習熟している必要があります。

SDK データ ストレージ オプション データ接続 API アプリの認証と承認 コンピューティングとコンテナーのデプロイ デバッグ

Azureにおいて開発に必要な知識を学べる認定試験という感じで、対象サービスはやや広めですがそこまで深い知識は求められません。

詳細は公式ページをご確認ください。
なお認定名は「Microsoft Certified: Azure Developer Associate」ですが、認定を受けるために合格が必要な試験名は「Developing Solutions for Microsoft Azure」です。

受験結果

受験結果は合格でした。割とギリギリです。

項目 内容
受験日時 2024/05/05
場所 IBT (PearsonVUE)
結果 合格 752/700

勉強内容

勉強前の知識

  • AZ-104, SC-300, SC-500取得済み
  • Azureのサービス名を聞けば何のサービスかは分かる

勉強資料

MSLearn

勉強教材としては公式のMSLearnのみを利用しました。
説明文が機械翻訳なため分かりにくい部分もありますが、公式資料であるため出題範囲を満遍なく学べると思います。 現在はAZ-204試験用の書籍もないため、こちらが試験勉強の第一選択肢になりそうです。

私の場合はAZ-104に合格済みだったのでAzureの基本的な部分は把握しており、サクサク進めることができてMSLearn終了に10時間かかりませんでした。 MSLearnでは各トピック毎に小問題が出題されますが、実際の試験と比べるとかなり易しい問題だったので、その点は気を付ける必要があります。 MSLearnの学習のみで合格できましたので内容の網羅度合としてはMSLearnだけで十分なのだと思います。 ただ点数的にはややギリギリだったため、サービスのドキュメントなども含めてもう少し詳細まで勉強しても良かったかなと思います。

また、50問分の練習問題も用意されているため力試しに利用すると良いと思います。(私は時間がなくて取り組めませんでした)

所感

難易度:★★★☆☆

AZ-103やSC-300よりはやや難しく感じました。
出題形式等は他のAzure認定試験と同様です。

構築の流れを問う問題、サービスプランの仕様を問う問題、要件に適するアプローチを問う問題などいつもの問題でした。 コードの記述を選択する穴埋め問題も出題されましたが、サービス間連携の流れなどが分かっていれば解ける問題が多かった印象です。

試験言語はPythonC#を選ぶことが出来ます。私は普段Pythonを使っていますが、MSLearnの説明がC#および.NETのAzure SDKを利用したものだったこともあってC#で受験しました。 コードの穴埋め問題なども出題されますが、10行程度のコードで言語仕様を理解している必要はありませんでした。Python, C#を選んだときの違いはライブラリ名やクラス名の違い位だと思います。 MSLearnで勉強した人はC#の方がオススメです。

App ServiceやBlob Storage, CosmosDB, Key Vault, Entra IDとの連携など実際の開発で多用するであろうサービスが主な出題範囲となるため、勉強内容は役立ちそうです。

memo:Reactの画面分割ライブラリ

よわよわエンジニアが知ったことのメモ日記です

ことの発端

Next.jsを使っていて、画面を右と左に2分割して使いたい。 当然ながらCSSで頑張れば実装は可能だと思うが、Reactのコンポーネントライブラリで簡単に作れるものがないか探したいというのが発端。

結構あるあるのユースケースだし幾らでも記事でてくるだろうと思っていたら、案外日本語の使ってみた系のページが少なかったので、机上調査をまとめておく。

一部動作確認した時の環境は以下の通り

+-- @types/node@20.9.4
+-- @types/react-dom@18.2.17
+-- @types/react@18.2.38
+-- next@14.0.3
+-- react-dom@18.2.0
+-- react-split-pane@2.0.3
+-- react-split@2.0.14
+-- react@18.2.0
`-- typescript@5.3.2

最終的に使うことにしたのは react-split-pane
簡単に使えそうだったので最小労力でやりたいことが出来るものとして選択した。

split

github.com

Star 5.9k。Sopnsorもついていて安定していそうな印象を受けた。 Split.jsをReact Component化したものっぽく有名どころが元となっている点も良い。

日本語の記事もあった

公式をコピペしてやってみたけど、スプリットされない。。

<Split
    sizes={[25, 75]}
    minSize={100}
    
    expandToMin={false}
    gutterSize={10}
    gutterAlign="center"
    snapOffset={30}
    dragInterval={1}
    direction="horizontal"
    cursor="col-resize"
>
    <div style={{border:1, color: 'red'}}>aaa</div>
    <div style={{border:1}}>bbb</div>
</Split>

本当は2つのdivが左右に分かれるはずなのだが、divの中身が縦に二つ並んでしまう。スプリットの境界をドラッグすることも出来ず、境界線も表示されなかった。 特にエラーも出ていなかったのだが、Reactのバージョンが問題かもしれない。

react-split-pane

github.com Star 3.1k。こちらも日本語の記事が数件存在していた。

インストールしようとしたが、エラーが出た。 どうやら最近のReactには対応していないらしい。

$ npm install react-split-pane --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: proto@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-0" from react-split-pane@0.1.92
npm ERR! node_modules/react-split-pane
npm ERR!   react-split-pane@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /root/.npm/_logs/2023-11-26T02_50_51_639Z-eresolve-report.txt

公式画面の一番下の方に書いてあった。

こっちでインストールしたら "react-split-pane": "^2.0.3" が入って一応動いた

react-split

github.com

Star 52で若干不安。中文。 ただデモページもあり、更新も一人が頑張っているっぽい。 - uiwjs.github.io

react-grid-layout

github.com

npmtrends.com

このページによるとreact-grid-layoutの方が勢いがあるらしい。 今回のケースではちょっと多機能すぎるので、採用は見送ったがこれがデファクトっぽい。