Next.js 13 より、App Router が使われるようになりました。基礎的な使い方をまとめます。 対象環境 Next.js 13 App Router の基礎ページ URL: https://example.com/about 123app └ about └ page.tsx ページは URL に表示したい名前でディレクトリを作成して、その中にpage.tsxという名前でファイルを作れば OK です。 ローディング1234app └ about ├ page.tsx └ loading.tsx loading.tsxをpage.tsxと同一階層に置いておくと、読み込み中だけloading.tsxの内容を表示してくれます。 Not Found12app └ not-found.tsx 存在しない URL にアクセスすると、not-found.tsxの内容が表示されます。 まとめApp Router はローディングや Not Found ページを簡単に表示できるので使っていきたいと思います。

この本は、2021 年 2 月から 2022 年 2 月にかけてみずほ銀行で連続して発生したシステム障害の検証報告書となっています。みずほ銀行では、この間合計 11 回の障害が発生しました。 これらの障害の原因は DB 障害や HDD 故障など様々ですが、その「真因」は企業風土にあるのではないかと金融庁に指摘されたそうです。具体的には「システムに係るリスクと専門性の軽視」や「言うべきことを言わない、言われたことだけしかしない姿勢」があると書かれています。実際、開発から運用フェーズに移ってから人員削減をしたり、障害が発生しても部門間の連携が取れていなかったりしたとのことです。 感想みずほ銀行の障害はニュースでもよく取り上げられていたため、原因が気になっていました。さすがに銀行の勘定系のような大きなシステムでは、いろいろ考慮しないといけないんだなと思いました。ただ、原因を探っていくと大元は企業風土にあるということで少し意外でした。自分の日々の業務では、チームワークなどに関係するのかと思います。 書籍 ポストモーテム みずほ銀行システム障害 事後検証報告 出版社のページ Amazon

文章力を鍛えようと思い、「デキる大人の文章力教室」（小林洋介著）を読んだので感想を書きます。 概要この本は、単語 ⇒ 文 ⇒ 構成 ⇒ 実践の順に章立てして説明されており、知識が浅い人でも理解できるようになっています。見開き 2 ページで 1 つのテーマが説明されていて、読みやすかったです。 単語第 1 章の「単語」では、「○○ みたい」や「ら抜き言葉」は使わないといった基本的なことから説明していて丁寧でした。 「文中で同じ漢字を 2 回以上使うのは危険」では、「漢字の重複」は「意味の重複」なので気をつけるように書かれていました。例えば以下では、「自分」と「自負」が重複しています。 私は自分がポジティブ思考だと自負している。 あまり気にしていなかったので、気をつけようと思います。 構成「『しかし』（逆説）のあとに主張したいことを書く」では、逆説のあとの内容が強調されるので、主張したいことは逆説のあとに置くとよいと説明されていました。 A くんはかっこいい。しかし、性格がわるい。そういう理由で、私は A くんと交際しようと思う。 上の例だと、「しかし」のあとにある悪い面が強調され ...

WordPress の開発環境を作るために、MySQL + phpMyAdmin 環境を作る必要があったのでメモしておきます。簡単に作りたかったので、WSL2(Windows)上の Docker で動かしました。 動作環境 WSL2(Windows 10 Pro) Docker Dockerdocker-compose.ymldocker-compose.ymlは次のように書きました。MySQL のデータはdocker-compose.ymlと同一階層のmysqlフォルダに保存するようにして、永続化させます。 123456789101112131415161718192021222324252627version: "3"services: db: image: mysql:5.7 volumes: - ./mysql:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: somewordpress MYSQL_DATABASE: w ...

2021/10/23（土）に開催された「Social Hack Day Online #32」に初めて参加しました。 Social Hack Day とはCode for Japan が開催してる 1 日限りのハッカソンです。ただ、ふつうのとは違って、実社会での改善を目指して継続的に活動されているそうです。最近は毎月開催されているようで、今回も以前からの継続プロジェクトが多かったです。 参加するにはPeatix の Code for Japan のイベント一覧に次回分のイベントが表示されるので、そこから申し込めます。基本的に無料です。 当日は、Gatherという、昔のドット絵 RPG みたいなコミュニケーションツールでアクセスします。（ブラウザのみで、インストール不要。今回初めて使われたようです）初回は参加者向けの説明があるので、開催 15 分くらい前に入りましょう。開始後、全員の自己紹介があるので、スプレッドシートに入力しておくとよいです。（その場で書いてる人がほとんどでしたが）ひとり 15 秒くらいだったので、準備しなくても書いてあることを読めば OK でした。 実際に参加してみて ...

「1 分で話せ」（伊藤羊一著）を読んだので感想を書いておきます。 ピラミッドストラクチャー結論 → 根拠 → 実例の順で 3 段ピラミッドを作り話すことで、説得力を増す伝え方ができるということです。 スッキリ・カンタン「スッキリ」というのは文字や言葉を少なくし、ややこしくしないということです。これはスライドと話す言葉両方に当てはまるそうです。また、難しい言葉を使わず中学生にも分かる程度の言葉を使うというのが「カンタン」です。一度聞き手が言葉を理解できなくなると、話が進んでしまいそれ以降聞いてもらえなくなるためということでした。 イメージを描いてもらうロジカルな話だけでは人は動かず「頭の中に生まれたイメージ」が必要とのことです。聞き手にイメージさせるか、イメージの中に聞き手を引き込ませることが重要と書かれていました。 感想結論から話すと分かりやすいというのは知っていましたが、ピラミッドストラクチャーの話はなんとなくしか分かっていませんでした。まずは紙に書き出して考えてみようと思います。ロジックが正しいだけでは人は動かないというのは、コロナ禍で本当にその通りだよなと実感しています。 1 ...

金原ひとみさんの「アンソーシャルディスタンス」（Unsocial Distance）を読んだので感想を書いておきます。 この本は、TBS ラジオ「伊集院光とらじおと」で紹介されていたのを聞いて知りました。5 つの作品が収められた作品集となっています。 1 つ目の「ストロングゼロ」は、その名の通り高アルコール飲料に溺れていく出版社で働く女性が主人公になっています。飲食店でのお酒の提供が自粛要請されるなか、高アルコール飲料が売れているのはニュースで見聞きしていました。そういうこともあり、自分でもイメージしやすく読みやすかったです。 自分の働き方もコロナ禍で大きく変わり、悩みもあります。そういうところが似ていて、解決できていないのも同じだなと思いました。それ以外にも「なんで、読みたいと思えたんだろう」と考えてみると、「警察 24 時」に似ているなと思えてきました。自分は警察から追われたり、捕まったりしないけど、現実世界で起きているスリルを味わえて少し興奮しているようでした。 最後に、この本には大人向けの内容が書かれていますので、苦手な方はご注意ください。 金原ひとみ　アンソーシャルディスタ ...

ReactiveProperty + Prism で、V <=> VM <=> M を相互連携するアプリのサンプルコードを書いておきます。 ゴール Model で設定した値が、View のテキストボックスに表示される View のテキストボックスで入力した値が、Model に反映される Modelテキストを保持するReactivePropertySlim<string型プロパティを用意します。バリデーションはいらないのでReactivePropertyよりも動作が軽いこちらを使います。 123456789public class Model: BindableBase{ public ReactivePropertySlim<string> Text { get; set; } public Model() { Text = new ReactivePropertySlim<string>(); }} ViewModelView（画 ...

C#で Selenium を使ってブラウザを操作する上で便利なコードを書いておきます。 指定した URL を新しいタブで開く123456// 新しいタブを開いて選択する((IJavaScriptExecutor)driver).ExecuteScript("window.open();");var newTab = driver.WindowHandles.Last();driver.SwitchTo().Window(newTab);// 指定したURLに遷移するdriver.Navigate().GoToUrl("http://example.com"); タブを選択するdriver.WindowHandlesに全タブの実体が入っているので、取り出してチェックしていけば OK です。 12345678910// 開いているタブからURLが"http://example.com"のタブを選択するvar handles = driver.WindowHandles;foreach (var handle in handles ...

Selenium を使うと、ブラウザを自動で操作できます。使い方としては、① 要素を見つけて、② クリックなどの操作を行うことになります。 1. 要素を見つける要素を見つけるには、HTML の ID や Class 名、XPath を使うことができます。XPath を使うと柔軟に要素を探すことができます。 12// XPathを使う場合(Class名に"example"を含む要素)var element = driver.FindElement(By.XPath("//div[contains(@class, 'example')]")); XPath はこのページが分かりやすかったです。 クローラ作成に必須！XPATH の記法まとめ 要素が表示されるまで時間がかかる場合は、それまで待つ必要があります。 123// 要素が表示されるまで、最大5秒待つnew WebDriverWait(driver, TimeSpan.FromSeconds(5)) .Until(ExpectedConditions.ElementTo ...