プログラミングをするパンダさんのフィード

TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方

プログラミングをするパンダ — Thu, 29 Feb 2024 17:08:30 GMT

概要本記事は、スクラムを管理するアプリケーションをクリーンアーキテクチャの考え方で実装し、WebからもCLIからも動かせるようにしたという実践を紹介するものです。学習のための個人開発で作成したサンプルアプリケーションの設計と実装を適宜紹介することで、クリーンアーキテクチャに対する理解を深めることが目的です。モチベーションなぜ現代の開発現場で定着しているクリーンアーキテクチャのアプリを手元で実装してみようと思ったかというと、私自身Webエンジニアとして働く中で、クリーンアーキテクチャの実践例は入出力をWebに限定したものばかりだったからです。しかし、「詳細に依存せず抽象に依...

サイトのOGP画像を自動生成する

プログラミングをするパンダ — Wed, 02 Feb 2022 15:09:46 GMT

最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL と...

TypeScript Compiler API で型を自動生成する仕組みを TDD で実装する

プログラミングをするパンダ — Thu, 16 Sep 2021 02:00:57 GMT

Compiler API で yaml から型を自動生成するこの記事は TypeScript Compiler API を実際に使って TypeScript の型を自動生成する方法を紹介しています。記事内では Google Analytics のイベントの型の自動生成にトライしています。題材として GA を選んだのは、以前 Next.js に Google Analytics（GA）を導入する方法を紹介した記事でGA のイベントで使う型を yaml から自動生成するのはどうかと書いていたからです。正直なところ、GA のイベントに馴染みのない方もいらっしゃると思うので、最初...

Tailwind CSS でダークモードを実装する（React での切り替えボタンの実装コード例あり）

プログラミングをするパンダ — Fri, 20 Aug 2021 14:27:46 GMT

Tailwind CSS でダークモードを実装する Tailwind CSS でダークモードを実装する方法を紹介します。Tailwind CSS は v2 からダークモード用の CSS を簡単に適用できるようになりました。この記事では、以前私が個人開発で作成した note PDFy というサイトを例に、ダークモードの作成方法と Tailwind CSS でのダークモードの実装方法を解説します。このサイトは note の URL を入力するだけで記事を PDF 化できるツールです。これを使うと note の記事をオフラインで読むことができます。なお、本記事は私の所属する BAS...

React を深く知るための入り口

プログラミングをするパンダ — Sun, 07 Mar 2021 04:09:08 GMT

Reactに対する見方をアップデートする国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。本記事...

Next.jsに「できるだけ」依存しないReactアプリケーションの構成

プログラミングをするパンダ — Sat, 16 Jan 2021 22:54:29 GMT

TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query）は Container（Pages）層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ...

Next.jsのルーティングにTypeScriptで型をつけたい

プログラミングをするパンダ — Wed, 30 Dec 2020 13:43:19 GMT

動機と目的普段、Next.jsでアプリケーションを開発しています。当初は Next.js にも TypeScript にも慣れていなかったため、ページのパスを定数で定義し、Link コンポーネントで呼び出していました。 // constants/path.ts export const TOP_PATH = '/' export const USERS_PATH = '/users' // ... ユーザー詳細へ幸い大規...

Reactコンポーネントの抽象化とインターフェースのリファクタリング

プログラミングをするパンダ — Mon, 21 Sep 2020 14:59:59 GMT

記事の概要と動機 Takepepeさんの「AtomicDesign 境界線のひき方」という記事を読んでいて、はたと気づいた。「限定的コンポーネントを横断的なものに移行する」という箇所は、SOLID原則のISPとそのリファクタリングの話だ。ISP（Interface Segregation Principle）とはインターフェース分離原則である。コンポーネントは、はじめは限定的コンテキストで実装するべきでしょう。共通利用される頃合いに、リファクタリングすれば十分です。その際に忘れてはならないことが「抽象化」です。この記事は、Takepepeさんの記事中の以下の一文に対して、イン...