hiro08gh

ソフトウェアに関すること

Intl APIを使った国際化対応について

こんにちはhiro08です。 仕事で国際化対応することが多々あり、国際化に向けた実装について考える機会が多くあります。Webアプリケーションの国際化は、単に多言語化するだけではありません。例えば、日時や通貨のフォーマットは各国でそれぞれ違いますし、…

react-hooks-use-modalをNext.jsで使う

こんにちは、hiro08です。Next.jsでreact-hooks-use-modalを使ったときのメモです。react-hooks-use-modalはmicroCMSのOrganizationで運営されています。興味がある方はご覧ください。github.com

Day.jsで月末までの日数を割り出す方法

こんにちはhiro08です。Day.jsで本日の日付から月末までの日数を知りたい機会がありました。結論としてはDay.jsに内包されているdiffを使えば簡単に割り出すことができたのでご紹介します。 const dayjs = require("dayjs"); const today = dayjs().format("…

Gatsby Cloud + AWS S3 + microCMSのビルドとデプロイ設定

この記事はJamstackその2 Advent Calendar 2020 21日目の記事です。こんにちはhiro08です。GatsbyJSのような、SSG(Static Site Generation)の機能を備えたフレームワークは、ビルドが非常に重要になってきます。そして、GatsbyJS向けにビルド周りの足回りや…

私のWrite Code Every Day戦略

こんにちはhiro08です。ソフトウェアエンジニアとして成長するためには?といった話題で頻繁に登場するのが、Write Code Every Dayでした。私はWrite Code Every Dayをそのままの直訳で、毎日コードを書こう = コードを書く習慣化しよう、といった単純な意味…

2020年私のアウトプット総括

こんにちはhiro08です。2020年もそろそろ終わりですね。去年の12月~今年の3月まで、カックさんのブログメンタリング(外部リンク)に参加した経緯もあって、アウトプットに力を入れた年でした。(まとめ記事書けなくてすみません!!)上半期は順調でしたが、下…

Storybook + Figmaで始めるデザイン駆動コンポーネント開発

こんにちはhiro08です。Storybookのアドオンを使えばFigmaのデザインデータを埋め込みすることができます。利点として、実際のFigmaで作成されたデザインデータを見ながらコンポーネントを開発することできます。個人的にDXが爆上げで、必須のアドオンになっ…

tmuxの環境構築をShell Scriptで自動化すると便利

こんにちはhiro08です。tmuxで開発していると、自分の開発体制がテンプレート化してくると思います。しかし、ターミナルを立ち上げて、1からtmuxで開発環境を構築するのは大変ですよね。そこで、Shell Scriptでtmuxの開発環境を自動化すると便利です。例えば…

GatsbyJSで「External link ~ was detected in a Link component」の解決方法

こんにちはかみむらです。GatsbyJSで開発していたところ、Developer Toolsで大量のwarningがでていることに気づきました。色々調べてみたところ、GatsbyJSのLinkの書き方に問題があったみたいなので、対処方法をメモしておきます。 解決方法 toで指定するリ…

振り返りノート(2020年4月)

こんにちはかみむらです。早いもんで4月も終わりですね。今月の振り返りをします。 書いた記事 code-log.hatenablog.comcode-log.hatenablog.com 寄稿 microcms.io ブログアクセスについて 私はtassei.meで9月までに月間アクセス10000を達成すると目標立てて…

GatsbyJSでsource mapを無効化する方法

こんにちはかみむらです。GatsbyJSではデフォルトで、source mapが有効化しています。これはステージング環境では問題ないですが、本番環境でコードが露呈してしまっているのはあまり良くありません。なので、特別な要件がない限り無効化した方がいいです。…

GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる

こんにちはhiro08です。先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。補…

振り返りノート(2020年3月)

にんにちはhiro08です。ブログメンタリングも終わり、少しほっとした気持ちが出てしまいあまりブログを更新出来ませんでした。4月からは心機一転頑張ろうと思います。 書いた記事 code-log.hatenablog.com 寄稿 https://microcms.io/blog/frontend-amplify-c…

Hasuraのエンドポイントにアクセスコントロールをつける

こんにちはかみむらです。GraphQLのAPIサーバーを作成できる「Hasura」にやっと入門しました。HasuraはGraphQLエンジンで、PostgreSQLのデータベースを使用しています。そして、そのデータに対してGraphQLのクエリが発行できます。デプロイはHerokuにできる…

振り返りノート(2020年2月)

こんにちはかみむらです。2月の振り返りをします。今月でブログメンタリングが最終月です。カックさんには感謝の気持ちと、終わってしまう寂しい気持ちでいっぱいです。ブログメンタリングついては後日まとめます。

GatsbyJSをYouTubeで学べる「The Great Gatsby Bootcamp」をやってみたら最高だった

こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。Webサイト高速化のための 静的サイトジェネレ…

Next.js(静的サイト)をFirebaseにホスティングする + ブラウザリロード時の対応

こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。

Next.jsにTailwind CSSを導入する + styled-componentsと一緒に使う

こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特…

ReactでTypeScriptの型定義を拡張する

こんにちはかみむらです。最近は、React + TypeScriptをよく書いているのですが、下記のようなエラーが発生しました。ここでやりたかったことは、Chromeでサポートされたimgのプロパティで、Loading Attributeを使って画像を遅延読み込みしようとしました。 …

GitHub Actionsでブランチ毎にワークフローを分ける

こんにちはかみむらです。前回は、GitHub ActionsでNowにデプロイする記事を書きました。code-log.hatenablog.comこの記事でも言及しましたが、NowのCLIにはpreview deploy(プレビュー用)とrelease deploy(リリース用)の2つがあります。実際にWEBサイトを運…

GitHub ActionsでNowにNext.jsをデプロイする

こんにちはかみむらです。現在Next.js + microCMSでポートフォリオを作成していて、ホスティングサービスにNowを利用しています。NowはNext.jsと同じZeit社が運営しています。特徴として、NowのCLIライブラリを使えば、Next.jsアプリケーションを1コマンドで…

振り返りノート(2020年1月)

こんにちはかみむらです。今年から振り返りノートとして、一ヶ月の振り返りをまとめてみます。最近ではブログのアウトプットも増えてきたので、自分への見つめ直しとしていい機会だと思いました。

Serverless FrameworkでAWS Lambda関数をデプロイする

AWS

こんにちはかみむらです。AWSのLambda関数をデプロイするときに、Serverless Frameworkを使ってみました。Serverless Frameworkとは、AWS Lambdaなどサーバレスなアプリケーションの運用を簡単にするフレームワークで、有名なクラウドに対応してるところが大…

GatsbyJS + GhostでJamstackなブログを作成する

こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。私もJamstackアーキテク…

Next.jsにstyled-componentsを導入する

こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。自分もstyled-componentsを利…

Next.js + TypeScriptの開発環境を整える

こんにちはかみむらです。最近はTypeScriptを採用する企業が増えてきました。TypeScriptの型システムは、サーバーサイドだけでなく、フロントエンドでも恩恵を受けることができます。そのため、各フロントエンドのフレームワークで、TypeScriptを簡単に導入…

ER図を作成できる「DrawSQL」が便利!!画像とSQLのファイル出力に対応

こんにちはかみむらです。SQLのER図を書けるツールを探していたところ、DrawSQLというサービスを見つけました。

Static Formsを使ってNext.jsにお問い合わせフォームを実装する

こんにちはかみむらです。JAMstackアーキテクチャーや、静的なウェブサイトにお問い合わせフォームを実装するときは、Static Formsで作成できます。

react-i18next + hookで多言語化する

こんにちはhiro08です。Reactアプリケーションを多言語化するときに、react-i18nextが便利です。react-i18nextは、Reactに特化したローカリゼーションフレームワークです。i18nextと一緒に使います。

ReactのエラートラッキングにBugsnagを使う

こんにちはかみむらです。半実験的にフロントエンド(React)のエラートラッキングに、Bugsnagを導入してみました。そもそもなぜエラートラッキングを必要とするのでしょうか?ほとんどのアプリケーションでは、障害による機会損失を避けるため最良の設計をし…