React

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

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

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

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

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

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

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

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

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

この記事はJAMstack Advent Calendar 2019 21日目の記事です。JAMstackのアドベントカレンダーは7日目も参加しています。 qiita.comこんにちはかみむらです。この記事ではReactでUIを作成して、Netlify Functionsを使ってStripeの決済処理を実装していきま…

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

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

ReactでChrome Extensionを開発するために必要なwebpackのビルド設定

こんにちはhiro08です。お仕事でReact を使ってChrome Extensionを開発する機会がありました。初めはcreate-react-appをベースにしたプロジェクト構成で開発してましたが、Content ScriptsやBackground Scriptsを追加する時にwebpackのエントリーポイントを…

Cloud BuildでReactアプリをGAEにデプロイする

こんにちはかみむらです。以前AWS Amplify ConsoleにReactアプリをホスティングする記事を書きました。 code-log.hatenablog.com今回はGAE(Google App Engine)にホスティングします。GAEとはGoogleが提供するPaaSです。nodejsや、Go、Pythonなど、様々な言語…

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属性を扱うためのテンプレートを残して…

jsxにコメントを入れる方法

Reactを書いてる時にjsx内にコメントを残したいと思ったので、jsのコメントを使ったらエラーが出たのでメモ。jsxのテンプレート内でのコメントは下記のように書く。 {/* コメント */}

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

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