Blog
技術調査や素振り、競馬や一口馬主、ほかに旅行やゲームの話など。
AtCoderに登録して、AtCoder Beginners Selection やってみた
2021/02/06
タイトルの通りで、昨日 AtCoder に登録して、AtCoder Beginners Selection やってみた。久々にコンピュータサイエンスやれた気がして楽しかった。 結果 スコア 無事に全問正解できた。すべて TypeScript で解答。ちなみに言語選択としては競プロには全然向いてない。プログラム起動するだけで 50ms くらいかかってるので。わたし一応 C++ も書ける人なので、あとで C++ で書き直してみようと思う。 おもしろかった A 問題
プレイしたボードゲーム一覧
2021/01/23
友人とゲーム合宿などを行った際のお品書きをまとめたものです。そのうちデータベース化したい。 太字 : 好きなゲーム ★ : そのとき特に面白かったゲーム ゲーム合宿 202001 白雪姫のアップルーレット HEX ROLLER コードネーム はぁって言うゲーム ゲシェンク ペアーズ（スポーツ） NOX 4 人の容疑者〜湯けむりに消えた謎 目撃者たちの夜 トランスアメリカ＆ジャパン DEATH NOTE 人狼
StorybookをNext.js + Chakra UIのサイトに導入
2021/01/19
タイトルの通りです。ポイントは下記のとおりでした； preview.tsx で ChakraProvider を呼んでおく main.ts で emotion へエイリアスをしておく 画像を読む際は declare module '\*.png' しておく CSS Modules を併用する場合は @storybook/preset-scss を使う next/image をモックする \-s static-dir オプションを指定して、assets のパスを
C++ を Windows + WSL2 + VSCode でコンパイル
2021/01/14
Windows10 + WSL2 + VSCode の環境で C++ ファイルをコンパイルするための環境構築についてまとめました。以下の手順で進めていきます； WSL2 環境のセットアップ Visual Studio Code のインストールと設定 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/ Start Deploying
Jest の test.each で Parameterized test を実行する
2020/10/27
Jest で関数の引数を複数パターンチェックしたい場合、ベタに書く方法のほかに、test.each でテーブルとして記述する方法があります。テストの視認性が良くなるため、オススメの記法です。今回はこちらをご紹介するとともに、いくつかの実践問題も提示します。 Jest の test.each とは https://jestjs.io/docs/ja/api#testeachtablename-fn-timeout
\*\*Jest で Parameterized test を行うこと
apollo-server-testing と SQLite で統合テストを実装してみよう
2020/10/21
apollo-server で GraphQL バックエンド開発をしている際の、統合テスト（Integration Testing）を行うための手法として、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 セットアップ 下記の環境で実践しました； Node v10 Apollo-Server v2.9 Sequelize v5 SQLite v3 パッケージのインスト
Apollo-Serverにおける認証と認可 (Authentication/Authorization)
2019/12/14
Apollo-Server を使った GraphQL サーバのハンズオン実装シリーズ。今回は\*\*認証と認可（Authentication/Authorization）\*\*を扱います。 前半は、メールアドレス・パスワードによる認証と、サインアップ処理を追加する手順です。JWT(jsonwebtoken)、bcrypt による暗号化、beforeCreate などの Sequelize Hooks などを使用しています。 後半は、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-based Access Control (RBAC) は、ユーザと権限とを直接紐付けるのではなく、間にロールを挟みこむことで権限管理をシンプルにする手法です。これを React ベースのアプリに組み込むための、簡単な実装例を作成しました。 実装したリポジトリはこちらです；
https://github.com/suzukalight/study-rbac-client Role-based Access Control 通常、ユーザに認可
大分＋阿蘇旅行記（2019/11/16～4泊）
2019/11/16
目的 1 日目（2019/11/16)：鶴見岳・由布院 行程： 自宅 → 羽田空港 → 大分空港 → 別府ロープウェイ → 由布院金鱗湖 → 別府亀の井ホテル 食事： とり天定食（な々瀬）、寿司（水天） \<TwitterEmbed tweetId="119555494508
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
【一口馬主】キャロットクラブ新規入会・攻略成功のすべて
2019/09/06
ねんがんのサラブレッドをてにいれたぞ！ 競馬ファンなら一度は憧れる夢・馬主になる。今年はこれを達成するために、キャロットクラブで一口馬主に入会してみます。新規入会者の壁が非常に高いと評判ではありますが、果たして結果はいかに？ はじめに キャロットクラブとは https://carrotclub.net/ サートゥルナーリア、リスグラシュー、レイデオロなど、有名馬が多数在籍する、言わずとしれた一口馬主クラブ。私もいつかは馬主になりたいという夢を持っていましたが、今年ついに
monorepo環境にJestとStoryshotsのレグレッションテスト環境を構築
2019/09/03
monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Jest のテストと、Storyshots による Storybook ベースのスナップショットテスティングを導入する例です。 まえがき 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/2 ht
Storybookでコンポーネントの型情報を表示する
2019/08/31
monorepo 環境で、create-react-app w/ TypeScript したパッケージのコンポーネントカタログを Storybook で表示し、さらにその型情報も表示させる設定例です。 前提条件 完成品 実装内容をプルリクエストにしたものを、GitHub 上に公開していますので、併せてご参照ください。 https://github.com/suzukalight/monorepo-react-prisma2/pull/1 動作環境 Mac Node.js
Monorepo+TypeScript+React+Storybook環境をつくる
2019/08/24
Monorepo 環境で、create-react-app w/ TypeScript したパッケージに対して、Storybook を導入する手順です。CLI を使わずに手動で設定していますが、簡単にセットアップは完了できました。 セットアップ Storybook w/React, Addons(viewport, actions, storyshots) をインストール 型情報もインストール yarn workspaceでMonorepo+TypeScript環境をつくる
2019/08/18
Monorepo 環境で、yarn workspace を使って、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
Prisma2 Prisma2: https://github.com/prisma/prisma2 （※上記リポジトリより引用） prisma2 ecosystem には、下記の 3 つが含まれています； PhotonJS: ORM。自作のサーバに import して利用するライブラリ Lift: データモデリングとマイグレーションを行う、CLI ツール Studio: データ管理画面を提供する、GUI ツール v1
CircleCI で Contentful の更新をデプロイ
2019/07/14
GitHub に CircleCI を設置しておき、Contentful の webhook 機能から記事の更新をトリガして、CI による GitHub Pages への自動デプロイができるようにする方法を紹介します。 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
シェアボタン設置 Add social share buttons to use react-share https://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/2 gatsby-image gatsby-image は、Gatsby における画像表示全
Gatsby のファイル構成
2019/07/01
基本的な内容は、こちらで解説されていますので、あわせて参照ください。
https://www.gatsbyjs.org/docs/gatsby-project-structure/ ディレクトリ構成 大まかなディレクトリ構成は以下のようになっています。
（templates を移動するなど、一部変更を加えています） Gatsby のサイトカスタマイズ
2019/06/30
Gatsby のプラグインを利用することで、ブログに必要な数々の設定を簡単におこなうことができた。 PWA 対応 Add manifest and favicon gatsby-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 株式会社のような\*\*ベンチャー企業に属するエンジニアとしては、事業の仮説検証をいかに素早く回転させられるかが大事だと考えています。