masashi

はじめにフロントエンド開発の世界は、React、Vue、Angularなどのフレームワークの台頭によって大きく変貌を遂げました。これらのフレームワークが登場してから数年が経ち、開発手法は成熟しています。これらモダンなフレームワークに共通する最も重要な概念は「コンポーネント」であったと思います。現在のフロントエンド開発はコンポーネントが中心であるといっても過言ではないように感じます。当記事は、コンポーネント指向という言葉を用いてフロントエンド開発を取り巻く技術の整理を試みます。 コンポーネント指向とは何かコンポーネント指向は、フロントエンド開発においてコンポーネントを中...

コンポーネント指向を支える技術

はじめに自動テストが叫ばれて10数年以上の時を経ていますが、今なお開発者の興味を惹くトピックの1つであります。実際、Developers Summit 2023ではテストを主題とした講演が多く、また人気も博したと耳にします。さて自動テストと共に話題になるトピックの1つと言えばテスト駆動開発でしょう。ただテスト駆動開発は、設計・開発手法のため自動テストとは厳密にはジャンル違いであり、誤解を受けがちなトピックでもあります。またテスト駆動開発を解説する書籍の多くが、Java等のオブジェクト指向言語のスタイルで書かれているためフロントエンドエンジニアのコードスタイルとは若干差異があ...

フロントエンドにおけるテスト駆動開発の実践と概説

毎月のVS Codeアップデートを勝手に祝う頑張らないがモットーのひとくちニュースです!

月刊ひとくちVSCodeニュース

TL; DR以下を推奨Storybookのためにディレクトリ構造を作らないことStorybookは99%自動生成させることStorybookからスナップショットを自動生成させること!Storybookがバージョン7がリリースされたため、加筆、修正しております。またコードジェネレーターとしてhygenを推奨していましたが、追記当時2023/05時点ではPlopを推奨します。理由は、PlopはESM対応が自然とできるからです。 はじめにフロントエンドエンジニアとして活動するとおそらく耳にするであろうStorybook。その有用性が語られることもあれば、時に悪...

Storybookを導入する際にやるべきこと3選

!2023/05の時点ではコードジェネレーターライブラリとしてPlopを推奨します。理由は、hygenがESM対応が難しい一方で、PlopはESM対応が自然にできるからです。特にViteの利用時には、ESM対応に迫られるためPlopを利用する利点が大いにあります。私は業務でよくReactを書いているのですが、コンポーネントのファイル追加作業が多く大変苦痛でした例えばButtonコンポーネントを一個作るのに、Buttonディレクトリ、index.ts、Button.tsx、Button.spec.tsx、Button.stories.tsx...と多くのファイルを作る必要があ...

面倒なお決まりファイルの追加作業をhygenでさよならしよう

LocalStorageを型安全にモックする自身の備忘録ですので結果のみ残します！WindowLocalStorage型や、jest.spyOnの型情報をテキストエディターで追うと詳細が分かります__mocks__/localStorage.tsconst mockLocalStorage = jest.spyOn<WindowLocalStorage, "localStorage">(  window,  "localStorage",  "get");let mockStorage: Record<string, string>;c...

[Jest]LocalStorageを型安全にモックする[TypeScript]

GitHub CLIとは何かGitHub公式が提供する最高にイカしたツールTake GitHub to the command lineGitHub CLI brings GitHub to your terminal.公式の表題通りGitHubを俺たちのターミナルに持ってくるすごいやつhttps://cli.github.com/ 幸せになった例俺の開発ライフが幸せになった例を紹介する その１「開きたいレポジトリはどこだよ」GitHub上でしかできない操作というのは往々にしてあるしかしブラウザでポチポチと開きたいレポジトリを検索するのは面倒だそれに複数...

GitHubを利用する全人類を幸せにするGitHub CLIがすごい！

はじめにaxiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。https://twitter.com/renoa_ts/status/1501542216162242563?s=20&t=ECJWXFDFB8yF1zpzofWRMw私もaxiosの型付けに悩まされた一人です。最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。前提として、openapiファイルが用意されていることとします。コード例は下記レポジトリに...