hiro08gh

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

フロントエンド

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

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

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

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

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を使って画像を遅延読み込みしようとしました。 …

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を簡単に導入…

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

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

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

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

Parcelを使って数ステップでReact + TypeScriptの開発環境を構築する

こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コスト…

AWS Amplify ConsoleにReactをデプロイする

最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーション…

react-snapを走らせるためのCircleCiの設定

ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。 以下個人的なconfigファイルの設定。Firebaseにデプロイす…

React + FirebaseでTwitter認証の情報をfirestoreに保存する

firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfir…

Reactの外部サービス連携について(Google Analytics、Sentry、Hotjar)

Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。その他にもでSentr…

React + StorybookでAtomic Designするための構成

storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。

React + ExpressでStripeの決済処理を実装する

決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。予めstripeのアカウントを作…

React + TypeScriptでcanvas属性を扱う方法

こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残して…

NetlifyにデプロイしたSPAがPage Not Foundを出してしまう問題

create-react-appで作ったプロジェクトにreact-router-domを入れて、シンプルなSPAを作ってNetlifyにデプロイしたところ、画面遷移はできるのですが、リロードするとPage Not Foundが出てしまうということがありました。その対処方法です。 今回の問題はcrea…

モダンなweb開発「JAMstack」アーキテクチャについて調べてみた

こんにちはかみむらです。Qiitaを眺めていた時にJAMstackアーキテクチャーというワードを見つけました。最近はReactやvueなどのSPAフロントエンドばかり開発していたのに、JAMStackというアーキテクチャを明確には知りませんでした。 なので今回はJAMstackが…