フロントエンド
こんにちはhiro08です。 仕事で国際化対応することが多々あり、国際化に向けた実装について考える機会が多くあります。Webアプリケーションの国際化は、単に多言語化するだけではありません。例えば、日時や通貨のフォーマットは各国でそれぞれ違いますし、…
こんにちはhiro08です。Day.jsで本日の日付から月末までの日数を知りたい機会がありました。結論としてはDay.jsに内包されているdiffを使えば簡単に割り出すことができたのでご紹介します。 const dayjs = require("dayjs"); const today = dayjs().format("…
こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。Webサイト高速化のための 静的サイトジェネレ…
こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。
こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特…
こんにちはかみむらです。最近は、React + TypeScriptをよく書いているのですが、下記のようなエラーが発生しました。ここでやりたかったことは、Chromeでサポートされたimgのプロパティで、Loading Attributeを使って画像を遅延読み込みしようとしました。 …
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。私もJamstackアーキテク…
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。自分もstyled-componentsを利…
こんにちはかみむらです。最近はTypeScriptを採用する企業が増えてきました。TypeScriptの型システムは、サーバーサイドだけでなく、フロントエンドでも恩恵を受けることができます。そのため、各フロントエンドのフレームワークで、TypeScriptを簡単に導入…
こんにちはhiro08です。Reactアプリケーションを多言語化するときに、react-i18nextが便利です。react-i18nextは、Reactに特化したローカリゼーションフレームワークです。i18nextと一緒に使います。
こんにちはかみむらです。半実験的にフロントエンド(React)のエラートラッキングに、Bugsnagを導入してみました。そもそもなぜエラートラッキングを必要とするのでしょうか?ほとんどのアプリケーションでは、障害による機会損失を避けるため最良の設計をし…
こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コスト…
最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーション…
ReactのクライアントレンダリングでOGPに対応させるときに、react-snapが簡単に導入できて便利です。しかし、build時にPuppeteerが走るので、CircleCiでビルドするときはあらかじめ設定が必要です。 以下個人的なconfigファイルの設定。Firebaseにデプロイす…
firebaseでサービスを作るときに多くの場合twitterやgoogleなどのOAuthを使って、認証を作ると思います。その際にソーシャルの情報(例えばユーザーネームだったり説明文だったり)をそのままサービスに使いまわしたい時があります。それを実現するためにはfir…
Reactで外部サービスの連携で扱う方法をメモ書きしておきます。特にGoogle AnalyticsはWEBサービスを立ち上げる際に必須の設定となっています。しかし、ReactはSPAなので、普通の設定ではページごとのアクセスを記録することができません。その他にもでSentr…
storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。
決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。予めstripeのアカウントを作…
こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残して…
create-react-appで作ったプロジェクトにreact-router-domを入れて、シンプルなSPAを作ってNetlifyにデプロイしたところ、画面遷移はできるのですが、リロードするとPage Not Foundが出てしまうということがありました。その対処方法です。 今回の問題はcrea…
こんにちはかみむらです。Qiitaを眺めていた時にJAMstackアーキテクチャーというワードを見つけました。最近はReactやvueなどのSPAフロントエンドばかり開発していたのに、JAMStackというアーキテクチャを明確には知りませんでした。 なので今回はJAMstackが…