Blog
技術調査や素振り、競馬や一口馬主、ほかに旅行やゲームの話など。
StorybookをNext.js + Chakra UIのサイトに導入
2021/01/19
タイトルの通りです。ポイントは下記のとおりでした；preview.tsxでChakraProviderを呼んでおくmain.tsでemotionへエイリアスをしておく画像を読む際はdeclaremodule'\*.png'しておくCSSModulesを併用する場合は@storybook/preset-scssを使うセットアップインストール\[Storybook公式 C++ を Windows + WSL2 + VSCode でコンパイル
2021/01/14
Windows10+WSL2+VSCodeの環境でC++ファイルをコンパイルするための環境構築についてまとめました。以下の手順で進めていきます；WSL2環境のセットアップVisualStudioCodeのインストールと設定C++コンパイラの設定WSL2環境のセットアップLinux用サブシステムの有効化Windowsを最新バージョンに更新Windowsキーを押して、「Windowsの機能の有効化または無効化」を 2020年の振り返り
2020/12/31
2020年を振り返って。「技術」「ゲーム」「競馬」の3つと、全体的な生活を主に振り返ります。技術2020年・GitHubの芝生今年の芝生はこんな感じでした。平日は仕事のコミット、休日は個人の素振りのコミット、という感じでだいたい手を動かせていた模様。素振り成果は積極的にGitHubに公開するようにしていましたが、いま見たら\[clean-architecture-nodejs-graphql-codegen]\(https://githu 2020年フロントエンド技術スタック
2020/12/30
suzukalightが2020年に使った技術スタックをまとめました。分類はこちらのサイトを基準にしています。スケルトン生成create-next-appをNext.jsでのスケルトン生成に使用し、create-react-appを通常のReactアプリで使用しています。ブログサイトにはGatsby.jsを使っていました（いまはNext.jsに置 Next.jsで作成したサイトをVercelにデプロイ
2020/12/20
Vercelは、Next.jsの制作元であり、同時にNext.jsで作成されたサイトのホスティングサービスも展開しています。このサービス、デプロイまでが恐ろしく簡単であると聞いていましたので、気軽な気持ちで試してみました。結論から言うと、初見で5分かからずに完了しました。選択に迷う余地がなく、めちゃくちゃ体験が良いです。以下に手順を残しておきますが、たぶん記事いらないんじゃないか説があります。https://vercel.com/StartDeploying Jest の test.each で Parameterized test を実行する
2020/10/27
Jestで関数の引数を複数パターンチェックしたい場合、ベタに書く方法のほかに、test.eachでテーブルとして記述する方法があります。テストの視認性が良くなるため、オススメの記法です。今回はこちらをご紹介するとともに、いくつかの実践問題も提示します。Jestのtest.eachとはhttps://jestjs.io/docs/ja/api#testeachtablename-fn-timeout\*\*JestでParameterizedtestを行うこと apollo-server-testing と SQLite で統合テストを実装してみよう
2020/10/21
apollo-serverでGraphQLバックエンド開発をしている際の、統合テスト（IntegrationTesting）を行うための手法として、apollo-server-testingとsqliteを選択しました。その結果、高速に実行でき、かつ既存DBにも影響を及ぼさない方法を実践できましたのでご紹介します。apollo-server-testingとはhttps://www.apollographql.com/docs/apollo-server/testi Sequelize+TypeScript による Apollo-Server の実装
2019/12/27
Sequelize+TypeScriptによるApollo-Serverの実装に関するメモです。今回実装したリポジトリはこちらです；https://github.com/suzukalight/study-graphql-apollo-server/tree/master/src/12-dddセットアップ下記の環境で実践しました；Nodev10Apollo-Serverv2.9Sequelizev5SQLitev3パッケージのインスト Apollo-Serverにおける認証と認可 (Authentication/Authorization)
2019/12/14
Apollo-Serverを使ったGraphQLサーバのハンズオン実装シリーズ。今回は\*\*認証と認可（Authentication/Authorization）\*\*を扱います。前半は、メールアドレス・パスワードによる認証と、サインアップ処理を追加する手順です。JWT(jsonwebtoken)、bcryptによる暗号化、beforeCreateなどのSequelizeHooksなどを使用しています。後半は、JWT+x-tokenヘッダによるユ GraphQL Apollo-Server ハンズオン
2019/12/08
突然ですが、@suzukalightは来年からジョブチェンジして、バックエンドエンジニアとして働くことになりました！弊社の開発環境としては、Node,GraphQL,koa,apollo-server,RxJSなどを採用しているのですが、順次キャッチアップするとして、まずは基本中の基本からしっかり押さえておきたいと思い、GraphQLの素振りを始めています。Apollo-Serverを使ったGraphQLサーバ Role-Based Access Control (RBAC) を実践する
2019/11/24
アクセス制御の手法のひとつであるRole-basedAccessControl(RBAC)は、ユーザと権限とを直接紐付けるのではなく、間にロールを挟みこむことで権限管理をシンプルにする手法です。これをReactベースのアプリに組み込むための、簡単な実装例を作成しました。実装したリポジトリはこちらです；https://github.com/suzukalight/study-rbac-clientRole-basedAccessControl通常、ユーザに認可 大分＋阿蘇旅行記（2019/11/16～4泊）
2019/11/16
目的1日目（2019/11/16)：鶴見岳・由布院行程：自宅→羽田空港→大分空港→別府ロープウェイ→由布院金鱗湖→別府亀の井ホテル食事：とり天定食（な々瀬）、寿司（水天）\<TwitterEmbedtweetId="119555494508 Storybookの最新フォーマット・Component Story Format(CSF)を試す
2019/10/14
Storybookv5.2で新しいストーリーのフォーマット・ComponentStoryFormat(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動作環境MacNode.jsv10.16.0/npmv6.9.0/yarnv1.16.0c 【一口馬主】キャロットクラブ新規入会・攻略成功のすべて
2019/09/06
ねんがんのサラブレッドをてにいれたぞ！競馬ファンなら一度は憧れる夢・馬主になる。今年はこれを達成するために、キャロットクラブで一口馬主に入会してみます。新規入会者の壁が非常に高いと評判ではありますが、果たして結果はいかに？はじめにキャロットクラブとはhttps://carrotclub.net/サートゥルナーリア、リスグラシュー、レイデオロなど、有名馬が多数在籍する、言わずとしれた一口馬主クラブ。私もいつかは馬主になりたいという夢を持っていましたが、今年ついに monorepo環境にJestとStoryshotsのレグレッションテスト環境を構築
2019/09/03
monorepo環境で、create-react-appw/TypeScriptしたパッケージに対して、Jestのテストと、StoryshotsによるStorybookベースのスナップショットテスティングを導入する例です。まえがき完成品実装内容をプルリクエストにしたものを、GitHub上に公開していますので、併せてご参照ください。https://github.com/suzukalight/monorepo-react-prisma2/pull/2ht Storybookでコンポーネントの型情報を表示する
2019/08/31
monorepo環境で、create-react-appw/TypeScriptしたパッケージのコンポーネントカタログをStorybookで表示し、さらにその型情報も表示させる設定例です。前提条件完成品実装内容をプルリクエストにしたものを、GitHub上に公開していますので、併せてご参照ください。https://github.com/suzukalight/monorepo-react-prisma2/pull/1動作環境MacNode.js Monorepo+TypeScript+React+Storybook環境をつくる
2019/08/24
Monorepo環境で、create-react-appw/TypeScriptしたパッケージに対して、Storybookを導入する手順です。CLIを使わずに手動で設定していますが、簡単にセットアップは完了できました。セットアップStorybookw/React,Addons(viewport,actions,storyshots)をインストール型情報もインストール yarn workspaceでMonorepo+TypeScript環境をつくる
2019/08/18
Monorepo環境で、yarnworkspaceを使って、create-react-app--typescriptしたclientワークスペースと、prisma2で作成したserverワークスペースを共存させる手順のメモです。Lint,Prettier,Huskyの設定も行います。前提条件完成品手元で同様の手順を踏んだリポジトリを、GitHub上に公開していますので、併せてご参照ください。https://github.com/ WindowsでElectron開発環境を整える
2019/08/11
WindowsでElectron開発環境を整えたいWindowsでNodeを試す場合は、最近だとWSLでの実行例も多い気がしますが、Windows向けのElectronバイナリを生成する場合は、WSLで実行してしまうと「Unix環境向けの開発になってしまう」ので、Windowsバイナリ向けの開発環境としては適切ではないと感じました。ここでは、Windows環境（PowerShell）において、NodeとElectron環境を構築する方法について紹介します。 Prisma2 Preview を触る
2019/08/03
Prisma2Prisma2:https://github.com/prisma/prisma2（※上記リポジトリより引用）prisma2ecosystemには、下記の3つが含まれています；PhotonJS:ORM。自作のサーバにimportして利用するライブラリLift:データモデリングとマイグレーションを行う、CLIツールStudio:データ管理画面を提供する、GUIツールv1 CircleCI で Contentful の更新をデプロイ
2019/07/14
GitHubにCircleCIを設置しておき、Contentfulのwebhook機能から記事の更新をトリガして、CIによるGitHubPagesへの自動デプロイができるようにする方法を紹介します。https://suzukalight.com/2019-07-13-contentful-starter/前回、ContentfulによるGatsbyサイトのハンズオンを行いました。しかしながらこのままだとContentfulで記事を更新しても、コンテンツサーバ側は更新で Gatsby + Contentful + GitHub Pages ハンズオン
2019/07/13
ContentfulはHeadless-CMSと呼ばれる仕組みを提供しており、コンテンツの設計と配信（API）のみを受け持つようなサービスになっています。WordPressとの違いは、コンテンツ表示までは担当していないところです。Gatsbyでこれを利用することで、コンテンツはSaaS側に載せて管理しておき、WebシステムはReact系で作成する、ということができるようになります。これにより、サイト管理はGitが Gatsby でリンクを扱う／展開する
2019/07/10
シェアボタン設置Addsocialsharebuttonstousereact-sharehttps://takumon.com/2018/09/16/react-shareライブラリを使用することで、Facebo Gatsby にタグ機能を追加
2019/07/06
この記事のタイトル部分に表示されているような「タグ機能」を実装する方法について解説します。記事にタグカラムを追加タグを指定するカラムを、mdファイルの先頭に追加します。前回トップ画像情報を追加したときと同じ手法です。タグは複数つけられるため、配列で指定できるようにしています。タグの名称は予め登録しておく必要はなく、そのときに自由に記述してOKです。記事詳細 Gatsby で記事のトップ画像を設定
2019/07/02
多くのブログでは、記事の先頭にトップ画像を表示しています。ここではGatsbyでトップ画像を設定し、さらにその画像を記事一覧のサムネイルとしても表示する手法について紹介します。実装はこちら:https://github.com/suzukalight/suzukalight.github.io/pull/2gatsby-imagegatsby-imageは、Gatsbyにおける画像表示全 Gatsby のファイル構成
2019/07/01
基本的な内容は、こちらで解説されていますので、あわせて参照ください。https://www.gatsbyjs.org/docs/gatsby-project-structure/ディレクトリ構成大まかなディレクトリ構成は以下のようになっています。（templatesを移動するなど、一部変更を加えています） Gatsby のサイトカスタマイズ
2019/06/30
Gatsbyのプラグインを利用することで、ブログに必要な数々の設定を簡単におこなうことができた。PWA対応Addmanifestandfavicongatsby-plugin-manifestが利用可能。starterで自動インストール済み。マニフェストの内容 Gatsby + GitHub Pages でブログを構築
2019/06/29
背景個人的な発信の場を設け、強化していきたい業務で、月に1,2回ほど内容を更新するブログ的なサイトを作ることになったでもWordPressとかは（技術的興味としては）使いたくないなどの理由から、WordPress以外の技術でブログシステムを構築することにした。私個人のスキルセットはフロントエンド（React）に寄っているので、マークアップやシステム構築はReact+Sass系で行いたい。そこでGatsbyを使ってブログシステムを構築することにしてみた。これ Webエンジニアがスマホアプリをリリースするまでに学んだ32のコト
2019/02/05
Webエンジニアだけどスマホアプリを作ることになった件RELATIONS株式会社では「ええ会社をつくる」というミッション実現のために、様々な新規事業の仮説検証を行っています。そしてこの度、とある検証のためのスマホアプリを開発することとなり、私が開発を担当をすることになりました。私はWebのフロントエンドエンジニアではありますが、スマホアプリの開発経験はほぼゼロの人です。そこで今回は「\*\*自分のフロントエンドスキルセットを活かしつつ、最速でスマホアプリをリリースするためには、どうすればよ RELATIONSのフロントエンド技術スタックと、大事にしている選択基準
2018/12/08
この記事では、@suzukalightがRELATIONS株式会社で技術選定したフロントエンド技術と、それを選ぶ際に大事にしている選択基準について、紹介していきたいと思います。（※技術については、記事執筆時点で2018年末のものになります）大事にしている選択基準最も気にしている点は「作りたいものに、いかに集中できるか」です。RELATIONS株式会社のような\*\*ベンチャー企業に属するエンジニアとしては、事業の仮説検証をいかに素早く回転させられるかが大事だと考えています。