はてなブックマーク

なぜスライド作りに時間がかかるのか スライド作りというものは時間がかかるものだというのが世間一般の共通認識のようです。何度か登壇を繰り返すうちに、スライド作りの手間を大幅に省けるアイデアが閃きました。この方法は誰でもすぐに真似できるため、この記事を最後まで読んでくださったら、その日からシステマティックにスライド作りができると思います。 まずは、なぜスライド作りに時間がかかるのか、スライド作りのペイン（辛さ）の原因を列挙してみました。「さあスライドを作ろう」とGoogle Slidesやパワーポイントを開いた時を思い出しながら読んでみてください。 直にスライドを作るときの Pain 1. 見た目の調整に時間がかかる まずは「見た目の調整に時間がかかる」ことです。これは一枚でもスライドを書いた人なら良くわかると思います。 見た目が整っていなければ内容はきちんと伝わりません。内容がどれほど良かっ

Value Object（値オブジェクト）は3種類あった Value Object（値オブジェクト） の意義と使い所がわからなかった。そこで調べてみたらなんと3種類あった。面白かったのでその調査過程を紹介する。 なお、現在では DDD の意味での Value Object がメインであること、またこれは自転車置き場の議論であり、DDD Quickly の Value Object の章を読む方が有意義であることを先に記しておく。 1. Data Transfer Object 1つ目は、Data Transfer Object（DTO）の意味だ。これは PoEAA に少しだけだけ出てくる。かつてのJava界隈の一部では（？）DTOのことを Value Object と呼んでいた。だが、現代では Value Object と DTO は別物として定着している。PoEAA は2000年代前半に

エンジニアとして今の自分を形成した本5冊 エンジニアとして働くにあたって自分が大きく影響を受けた本を考えてみた。もちろん他にもあるが、今回は以下の5冊に絞って紹介する。 Clean Coder（クリーンコーダー） Team Geek Clean Architecture（クリーンアーキテクチャ） テスト駆動開発 LeanとDevOpsの科学 この記事の対象者としては、独学でプログラムを書き始めた人やエンジニアスクールを卒業したばかりの方というよりは、実務経験を1~3年くらい積んでいるけど次に何を学べば良いかわからず、自分でイマイチ伸び悩んでいると感じている人を主に想定している（かつての自分がそうだった）。 特にチーム開発、オブジェクト指向言語でのコーディング、テストコードを書いた経験がある人が読んで、本に書いてあることを実践すると自分の成長を実感するだろう。 「Clean Coder」、「

書籍の読み方には2種類ある 書籍の読み方には大別して2通りある。最初から最後まで読む通読と、必要な箇所をピックアップして読む参照だ。 通読は小説を、参照は辞書を想像してもらうと良い。 技術書は実用書であり、後者の参照に向いている。 パターンのカタログのような書籍は特にそうだ。PoEAA 、GoFのデザインパターンはもちろん、リファクタリング、レガシーコード改善ガイドなどは、通読するより必要に応じて参照する方が良い。著者もそのことを知っていて、実は序文や第1章に通読より参照してほしいと書かれているケースがある。 参照方法は簡単だ。まず解決したい疑問を頭に浮かべて目次、もしくは巻末の索引からキーワード探す。自分の疑問に答えてくれそうな箇所があればそのページに飛んで読む。 その中で知らない単語があったり、参考文献が紹介されていればそれを辿って読む。知らない単語がある場合、大抵同じ書籍内の別の箇所

PoEAA から始めるパターン集 2年ほど積読していた PoEAA を手に取ってみると、これが意外と面白い。PoEAA は20年ほど前の書籍であるものの現代でも通用するところがある。というより、PoEAA は当時の実装パターン集であるため、現代でも活かせることがあるのは当然とも言える。 それは、パターンが現場で直面する課題に対して、繰り返し活用できる解決方法だからだ。 ソフトウェアがデータベースにアクセスしたり、オブジェクトのコレクションを扱ったり、同じインターフェースを備えた複数のオブジェクトを差し替えて動き方を変えることは20年以上前から今に至るまで変わらない。これからも同じことを相変わらず行うだろう。 ただ、厄介なことに PoEAA の実装コードは古くなっている。 本書の序文によると、著者であるマーティン・ファウラーが書籍内のパターンに出会ったのは80年代後半から90年代初頭であり、

PoEAA を通して DDD の半分を理解する マーティン・ファウラーの PoEAA を読んでから、DDD のことを考え続けている。今まで DDD の話題はあえて避けてきた。分厚く難解な書籍、増えるコード量、教祖とその信徒たち（MV）、全てをその視点から解釈しようとする試み、少しでも間違えたら求められる自己批判、無知な者に対する SNS 上のオルグ、いつまでも出てこない総括、それでも信じるものは救われる。「一匹の亡霊がIT界隈を徘徊してる。DDDという亡霊が...」 まあ早まらないでほしい。何も DDD こき下ろそうというわけではない。自分の実力不足が主な原因と思い、深入りする前から「わからないもの」と決めつけていた DDD は、PoEAA というライトに照らされてその姿を私の前に姿を表し始めた。それは亡霊ではなく、確固たる手触りのある実体（Entity）だったのである。 PoEAA は

技術エッセイです。 EoPAA の Data Transfer Object 「技術はレイヤーだ。今の技術は、過去の技術の積み重ねの上にある」という koriym さん（PHP フレームワーク BEAR.Sunday の作者で、前職の技術顧問）の言葉を今も覚えています。 この2ヶ月間、業務でサーバーサイドエンジニアとペア・モブプログラミングをしながら PHP を書いているため、ちゃんとオブジェクト指向プログラミング（OOP）と向き合おうと「エンタープライズアプリケーションアーキテクチャパターン（通称 PoEAA）」を読んでいます。 PoEAA の邦訳の出版は2005年です。記述が古くなっているところももちろんありますが、それでも今でも開発の現場で使われている OOP の語彙を理解、説明するために有用な記述もたくさんあります。 EoPAA を通して、自分が過去に目にしてもその内容を理解しきれ

「JSON色付け係」という自虐 フロントエンドエンジニアの間では、「私の仕事は JSON に色を付けることです」という有名な自虐ネタがある。 おそらく初出は以下のツイートなのだろう（*1）。ただ、出典はあまり詳しく調べていない。 初めてこの言葉を見た時、面白い言い回しだなと思った。確かにフロントエンドの仕事にそういう側面はある。 実際、コンテンツの表示がメインのページで作業すると上記のような気持ちになる。この場合、フロントでやることといえばせいぜい日付の表示形式を適切にフォーマットするくらいだ。結局バックエンドからデータが返ってこないとフロントだけでは何もできないと思うこともある。 もちろん、フロントだけで簡潔する手書き風グラフ作成ツール excalidraw のようなものは別だし、フロントで複雑な状態を扱う部分を書いたり、フォームを使ってユーザー入力を受け付け、入力値を検証するバリデーシ

スクラムマスターがいるスクラムチームで開発している この2ヶ月間、スクラムマスターがいるスクラムチームで開発しています。私のキャリア上、スクラムマスターがいるスクラムチームで開発をするのは初めてです。 アジャイル で Web アプリケーションを開発した経験は4年ほどあり、前職ではアジャイルに詳しいテックリードと同じチームで開発したり、スクラムに詳しいがスクラムマスターではない先輩エンジニアと Do Agile ではなく Be Agile な開発ができていたと思っています。 そのおかげで、アジャイル開発に対する知識や経験が溜まっていきました。それはスコープ・納期・予算・品質といった荒ぶる四天王とそのトレードオフスライダーやストーリーポイントや見積もりや、チームでの開発に対する心構えなどです。これは今でも役に立っているスキルです。 しかし、スクラムマスターのいるスクラムはやはりしっかりしている

3年前に抱いていた Rust に対するイメージ 「コンセプトから理解するRust」（Amazon）という書籍を読んで Rust に再入門してみました。 実は2019年に Rust のチュートリアルである「The Rust Programming Language」（通称 TRPL）を写経したことがあります（GitHub）。 しかし、当時の自分は PHP のバックエンドエンジニアとしての経験が2年ちょっとあるくらいで、TypeScript にもまだ入門しておらず静的型付け言語の経験はほとんどなかったように記憶しています。 当時から Rust は所有権などの概念が難解で初心者を拒むものの、 Stack Overflow のアンケートで開発者から人気な言語として高い地位を誇っているというイメージがありました。 自分自身、PHP 以外にもサーバーサイドで使える言語があるといいなという思い、Rust

現在時刻との時間差を計算する 本記事は現在時刻との時間差を計算して、「○秒前」「○日前」と相対的な日付に変換する関数の紹介です。以前 PHP で同様の関数を作成したことがありました。 参考: PHPの日付処理ライブラリCarbonで現在時刻との差(diff)を取得する 今回は、TypeScript と date-fns を用いて同様のことをします。これで日付をそのまま表示せずに済み、投稿などが新しいか時間が経っているか一目瞭然になります。 実は date-fns には formatRelative という関数があり、その結果を日本語化できます。 ただ、このままだと「1日前」と表示してほしいところで「昨日の03:00」という時刻も入った表現になって使いづらいため簡単に自作してみました。このブログの投稿一覧ページで使用しています。 テストも併せて掲載するので、仕様はテストを読んでいただくとわか

コミットに関する意思決定を楽にするため Commitizen に従う 私はコミットメッセージを書く際、 Commitizen の prefix を使っています。 2019年に Commitizen を知るまでは、コードの変更内容から適切なメッセージを書くことに頭を悩ませていました。 コミットメッセージの作成は小さな意思決定であり、自分の頭で一から考える上に繰り返し発生するタスクです。人が一日に下せる質の良い意思決定の数には上限があり、意志力は体力と同じように自然と消費されるものです。 このため、意志力の無駄遣いを避けて質の良い意思決定をするために余力を残すのであれば、コミットのたびに繰り返し発生する「コードの変更内容を自分で分類し、コミットメッセージを考える」というタスクのコストは極力抑えたいものです。 良いコードを書きたいという思いがあるなら尚更です。コミットメッセージで意志力を消費した

Software Design 2022年3月号に寄稿した 嬉しいことに、2月18日発売の Software Design 2022年3月号に寄稿する機会を頂いた。 特集のタイトルは「自動テストとテスト駆動開発、その全体像」。自動テスト、テストファースト、テスト駆動開発（TDD）の全体像を解説する第1章を @t_wada さん（和田さん）が執筆し、自分は TDD を JavaScript で実践する第2章、第3章の執筆を担当した。 寄稿の経緯は以下の通りだ。 昨年12月に技術評論社の @akito912912 さん（以下、中田さん）から Twitter で特集の一部を執筆しないかと DM を頂いた。願ってもない機会と思い二つ返事でお受けした。以前書いた TDD の解説記事 を目にして頂いたことが声掛けのきっかけになったそうだ。 実は、中田さんから連絡を頂いたのはこれで2回目だった。 去年5

「時短の科学」という書籍には生産性に対する疑問の答えが書かれている 世間では生産性向上や DX がお題目のように唱えられている。ソフトウェアエンジニアとしての業務効率化にあたり、自分は何から始めれば良いか考えるために「時短の科学」を読んでみた。この本では接客を中心とするサービス業を題材に、生産性とは何かを定義し、それを向上させた手段とその結果どのようにビジネスがうまく回り始めたのか、様々な事例が紹介されている。 これまで製造業の分野で議論されていた生産性の向上について、製造業と違ってサービス業では銀の弾丸（魔法の杖）がないとされてきた。サービス業では顧客の要求が多様であるため、一律にこれをすれば生産性がアップするという方法が編み出されていなかったからだ。 それでも何か方法はあるのではないかとフィールドワークを経て著者が帰納的に導き出された法則が現場のエピソードともに紹介されている。 接客の

オライリーの「初めてのGraphQL」を読んだ 先日の三連休中にオライリーの初めてのGraphQLを読んだ。入門書として内容がよくまとまっている上に、翻訳がとても読みやすく理解が捗った。GraphQL は個人開発で使いたいと思って何度かトライしたが、ネット上の入門記事やチュートリアルをいくつか読んで何度試してみても、腑に落ちたという感覚がどうにも得られなかった。 しかし、この書籍を通して GraphQL のクエリの書き方、Query、Mutation の区別、Subscription の位置付けと実装方法、リゾルバの役割、認可やファイルアップロードといった実践的な機能の実装方法を理解できた。 本書のサンプルコードは JavaScript で記述されている。また、サンプルアプリは Apollo が作っているライブラリ（apollo-client、apollo-server）と React を

Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより

私が Next.js を使い始めて2年が過ぎました。**Next.js を取り巻く現在の状況は2年前と比べると激変しており、Next.js を利用している企業、ユーザーが大きく増えています。**今では さんが作成された Next.js の実践的な公式チュートリアルもあるし、有志によって翻訳されたドキュメントの日本語訳もあります（私も本当に微力ながらお手伝いしました）。 しかし、2年前の日本では Vue.js, Nuxt.js の勢いがすごく、Google 検索で「Next.js 〇〇」と入力しても結果に「もしかして: Nuxt.js 〇〇」と毎回表示されるほどでした。フロントエンドで開発するなら React ではなく Vue.js を選ぶのが良いと様々な記事で書かれていた記憶があります。 一方 React はというと、 Hooks の登場により、日本での人気を取り返し始めつつあるという環境

Next.jsからSlackのチャンネルに通知を送る方法 **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 関連記事: Google Apps ScriptからSlackとLINEを連携するbotを作る手順を紹介します また、**Slackとは、主にIT企業で導入されている非同期コミュニケーションが可能なチャットツールです。**様々なツールと連携できるところに特徴があり、サーバーの監視ログやあらゆる通知をSlackのチャンネルに集約できま

TR;DR useContext は、階層の深いコンポーネントに state を渡す場面で使うと良い useReducer は、state の変更パターンが多い場面で使うと良い useContext + useReducer は、state を使うコンポーネントの階層が深い上に、前回の state を元に新しい状態を作る場面で使うと良い useContextだけを使うケース useContext は React の組み込みの Hooks の1つです。Provider でラップしたコンポーネントのツリーのどこからでも、同一の Context Object を参照できるようにする Hook です。 useContext は Context を通じて子や孫以下のコンポーネントで同一の JS オブジェクトを呼び出せる Hook です。これにより props のバケツリレー （Props Drill

Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration（以下、ISR） とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のページのみ定期的に再ビルドする機能です。 ISRでのリクエスト先は Google Apps Script（以下、GAS）にしました。GAS でスプレッドシートのデータを返却する API を作成したので、コードも併せて紹介します。 作ったものは書籍の一覧更新を自動化するもの 開発しているサービス「弁護士ドットコムライブラリー」を紹介します 私は仕事で 弁護士ドットコムライブラリーというサイトを開発しています。このサイトは弁護

弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック

Redux Toolkitとは、Reduxのエコシステムの集大成である Redux ToolkitはReduxのエコシステムから選りすぐりの技術を集大成したライブラリ。単にReduxのボイラープレートを減らすだけのライブラリではない。 以下ではRedux Toolkitの構成要素となるライブラリの基本的な使い方を確認していく。注意して頂きたいのは、以下の記述はRedux Toolkitでの書き方ではない点だ（それなら公式ドキュメントをご覧いただくのが一番である）。 複雑なものに遭遇したときは常に基本に立ち返るのが一番だ。 reselect: Storeから値を取得する処理をメモ化する reselectは関数をメモ化をする、1ファイル100行程度の薄いライブラリ。Storeから必要な値を取得するためのロジックを記述する。使い方はテストを見てもらうのが良い（memoized composite

Google Apps ScriptをTypeScriptでローカルで開発する Google Apps Script（以下、GAS）とはGoogleが開発したサーバレスな関数の実行環境です。GASはGoogleの各種サービスと連携してプログラムを実行できるため、業務やルーティンワークの自動化に最適です。 このブログでもGASを使ったハックを紹介してきました。 Google Apps ScriptからSlackとLINEを連携するbotを作る手順を紹介します Gmailの新着メールをLINEに転送する by Google Apps Script GASで議事録のテンプレ作成と周知を自動化する スプレッドシートとUMLで診断チャートを作成するGoogle Apps Scriptのコードを紹介します この記事では、claspというGoogle製のCLIツールを導入し、ローカル環境でTypeScr

Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:

**Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになってます。 私は実務でNext.jsを使っており、このフレームワークはとても便利だと思っています。私はNext.jsの大ファンなので、Reactでの開発時にNext.jsを使う現場が増えるといいなと思って記事を書いています。 関連記事: Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する **この記事では、Next.jsでReactアプリケーションを作成する時に、

Vercel製のuseSWRはReactの非同期データ取得をラクにする SWRとは、Next.jsを作成しているVercel製のライブラリです。**SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。**このライブラリはなんとGitHubスター数を10,700も獲得しています。 SWRはライブラリ名で、stale-while-revalidateというRFC 5861で策定されたキャッシュ戦略の略称です。このSWRがデータ取得の扱いをラクにしてくれて最高なのです。 React開発者が嬉しいuseSWRの書き心地 useSWRは外部APIからのデータ取得、ローディング状態、エラーが発生した時をシンプルに記述できます。これがあらゆるReact開発者にとって（というか、ReactでAPIにリクエストを頻繁に送るアプリケーション

プログラミングをするパンダのブログ兼ポートフォリオサイトです。

Next.jsにStorybookを導入してTypeScriptで書けるようにする この記事では、Next.jsにStorybookを導入してTypeScriptでReactコンポーネントを書けるようにする手順を紹介します。またその際に、私が踏み抜いたバグと解消法を全て共有します。 Next.jsとは、Vercelが作成しているReactのフレームワークです。 SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。また、面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にWebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。 Storybookとは、UIコンポーネントのカタログを作るツールです。 Storybookの実行環境はメイ