#react タグの付いた Blog
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る
2021/04/07
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できる csstype を使って、Typography, Space, Color などの型付き props を作ることができる 基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる 何がしたかったか こういう Chakra UI みたいな書き方がした
2020年フロントエンド技術スタック
2020/12/30
suzukalight が 2020 年に使った技術スタックをまとめました。分類はこちらのサイトを基準にしています。 スケルトン生成 create-next-app を Next.js でのスケルトン生成に使用し、 create-react-app を通常の React アプリで使用しています。ブログサイトには Gatsby.js を使っていました（いまは Next.js に置
Role-Based Access Control (RBAC) を実践する
2019/11/24
アクセス制御の手法のひとつである Role-based Access Control (RBAC) は、ユーザと権限とを直接紐付けるのではなく、間にロールを挟みこむことで権限管理をシンプルにする手法です。これを React ベースのアプリに組み込むための、簡単な実装例を作成しました。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-rbac-client Role-based Access Control 通常、ユーザに認可
Storybookの最新フォーマット・Component Story Format(CSF)を試す
2019/10/14
Storybook v5.2 で新しいストーリーのフォーマット・Component Story Format(CSF)が導入され、今までの storiesOf から置き換わることが想定されています。今後に備えて簡単に素振りしつつ、その良さについて触れていきます。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-storybook-component-story-format 速攻で試す 何はなくとも、まずハンズオンしてみるの
react-i18nextで多言語対応（国際化・i18n）を素振り
2019/09/09
最近ははじめから世界で勝負しようと頑張っているアプリも増えてきています。その場合に、障壁のひとつとなるが多言語対応（国際化・i18n）の方法だと思います。今回はこの i18n について素振りしてみました。 まえがき 完成品 実装したリポジトリはこちらです； https://github.com/suzukalight/study-react-i18next 動作環境 Mac Node.js v10.16.0 / npm v6.9.0 / yarn v1.16.0 c
Gatsby + GitHub Pages でブログを構築
2019/06/29
背景 個人的な発信の場を設け、強化していきたい 業務で、月に 1,2 回ほど内容を更新するブログ的なサイトを作ることになった でも WordPress とかは（技術的興味としては）使いたくない などの理由から、WordPress 以外の技術でブログシステムを構築することにした。 私個人のスキルセットはフロントエンド（React）に寄っているので、マークアップやシステム構築は React+Sass 系で行いたい。そこで Gatsby を使ってブログシステムを構築することにしてみた。これ
RELATIONSのフロントエンド技術スタックと、大事にしている選択基準
2018/12/08
この記事では、@suzukalight が RELATIONS 株式会社で技術選定したフロントエンド技術と、それを選ぶ際に大事にしている選択基準について、紹介していきたいと思います。（※技術については、記事執筆時点で 2018 年末のものになります） 大事にしている選択基準 最も気にしている点は「作りたいものに、いかに集中できるか」です。 RELATIONS 株式会社のような\*\*ベンチャー企業に属するエンジニアとしては、事業の仮説検証をいかに素早く回転させられるかが大事だと考えています。