【AWS】API GatewayでWebSocketを構築し、Reactと導通する
今回はAPI GatewayでWebSocketを構築して、簡単なLambdaとの紐付けを行います。 さらにReactアプリケーションからWebSocketへの接続を行い、導通テストをしてみたいと思います。
2022.08.31
今回はAPI GatewayでWebSocketを構築して、簡単なLambdaとの紐付けを行います。 さらにReactアプリケーションからWebSocketへの接続を行い、導通テストをしてみたいと思います。
2022.08.31
久しぶりにローカル環境でReactのプロジェクトを立ち上げようとnpx create-react-appのコマンドを叩いたら、何やら見慣れぬエラーに遭遇しました。 原因がよく分からず、少しだけハマったのでその時の対処法をまとめます。
2022.01.23
以前にreact-native-firebaseのセットアップ方法と各機能の簡単な説明についてご紹介しました。 今回はその中の機能一つであるremote-configについてインストール方法や使い方を公式ソースに従ってご紹介します。 アプリのバージョンを上げることなく内部的な設定値を更新でき、ABテストなどにも応用が効くため非常に有益な機能です。
2020.10.27
Reactを学習し始めて、基本的なことは大体身についたからいよいよ独自で考えたアプリを作ってみよう・・・ と取り掛かった際に遭遇しやすいのがこのエラーです。 今回は「Target Container is not a DOM element」エラーの対処法についてご紹介します。
2020.09.29
今回はReactで、非同期やタイマー処理を使った場合に発生するWarningの内容と対処法についてご紹介します。 後片付けの処理を忘れると起こりがちなため注意が必要です。
2020.09.17
react-nativeで画像選択をしたい場合、だいたいはImagePickerを使っているかと思います。 ただ、SNSのプロフィール画像設定UIでよくあるような「特定の形に画像を切り抜いて選択する」場合は、react-native-image-crop-pickerを使うのがおすすめです。
2020.09.15
react-native-firebaseはreact-nativeアプリにFirebaseを簡単に組み込むことができるライブラリです。 中でもよく利用するのがプッシュ通知で、基本はガイド通りに進めていけば問題なく動作しますが、Androidの特定バージョン以降ではプッシュ通知のポップアップが表示されません。 今回は上記のケースの対処法をご紹介します。
2020.09.14
Next.jsでゴリゴリにSSRなWebアプリを開発されている方には何を今更な話ですが、割と知らないとハマる内容なので紹介します。 Next.jsでメディアクエリを使いたい場合の設定についてです。
2020.09.07
以前紹介したreact-native-calendarsの日本語化対応時の記事です。 簡単に多言語対応できるため、非常に便利です。
2020.09.02
Reactを学習し始め、だんだんと知識を深めてくるにつれて自然とNext.jsを知るようになると思います。 ルーティングやらSSRやら、React単体だとどうも手間がかかる部分を吸収してくれるナイスなライブラリです。 今回はcreate-next-appで作成したプロジェクトをTypescript対応させるまでの手順を紹介します。
2020.08.26
Reactを初学者に教える機会があり、その時によくハマりがちなのが「stateに配列でデータを持たせた時に、正しく更新できていない」ケースです。 エラーで落ちるわけでなく、renderがかからない等の気づきにくい不具合なので、原因特定がしにくいですが大体はこの記事の例に収まると思います。
2020.08.18
ReactNativeで画面遷移を扱う方法はいくつかあると思いますが、オーソドックスなのがreact-navigationを用いたものだと思います。 その中でもタブナビゲータを利用しようとするとreact-navigation-tabsを使うことになりますが、タブを押下した際に画面遷移以外の処理を行いたい時があると思います。 今回はそんな場合のTipsです。
2020.08.03
今回は、Reactでアプリを作ってGitHub Pagesで公開する手順を紹介します。 何回もやる作業なのですが、そんなに頻度が高いものではないので色々と忘れがちです。 今回は、最もオーソドックスな方法を取るためgh-pages等のライブラリは使用しません。
2020.07.08
ReactNativeはReactやReduxの知識さえあればだいたいのアプリは作ることができます。 理由は、Reactで使った知識をそのまま流用できる点が多いためです。 しかし、アニメーションは少し勝手が違って、Reactで使ったアニメーションをそのまま流用することは難しいです。 今回は、ReactNativeで動きのあるアプリを実装するための方法を紹介します。 具体的には、Animatedを使って描画時にぴょんぴょん跳ねるViewを作ります。
2020.07.07
ReactもしくはReactNativeをTypescriptで書いていると、コンポーネントに渡すPropsを定義することは日常茶飯事です。 そんな時、知っているとちょっと便利なTipsをご紹介します。
2020.06.11
今回はGatsbyブログにrobots.txtとsitemap.xmlを配置する方法をご紹介します。 どちらも必須ではありませんが、SEOを行っていく上では欠かせないものです。
2020.06.09
今回は、Gatsbyで作られたブログにSNSシェアボタンを導入したいと思います。 SNS関連のライブラリはいくつかありますが、今回はreact-shareを利用します。
2020.05.31
GatsbyJSには様々なスターターが用意されており、gatsby-starter-netlify-cmsもその一つです。 このブログもgatsby-starter-netlify-cmsをカスタムして作られています。 基本的に痒いところに手が届く作りにはなっていますが、気になる箇所もいくつかあります。 今回は「gatsby-starter-netlify-cmsでブログ記事のURL」を自由に指定できるようにする方法を紹介します。
2020.05.30
以前にMacOSで「Typescript+ReactNative」の環境構築手順を紹介しましたが、今回はWindows版となります。 基本的にやることは同じなのですが、一部必要なものやコマンドが違うため注意です。
2020.05.26
ReactJSの技術を使ってスマホアプリが開発できるフレームワーク「ReactNative」 今回は、そんなReactNativeの環境構築からプロジェクト実行までを順に解説していきます。 私個人はTypescript信者なので、私が開発で実際に使用している「Typescript+ReactNative」の環境構築記事になります。
2020.05.25
Gatsby製のブログに限らず、アクセスを分析してユーザーのニーズを把握しておくことは、有益なブログを作る上で欠かせない作業です。 今回は、Gatsbyで作成したブログにGoogleAnalyticsを導入する方法を紹介します。
2020.05.25
Gatsbyでブログを作っている時に、参考にしたサイトや公式サイトへのリンクを貼る機会が多々あるかと思います。 いわゆる「外部リンク」ですが、マークダウンでリンクを書いている場合、デフォルトでは"target=`_blank`"の指定ができません。 今回は、外部リンクのみ別タブで開くようにします。
2020.05.24
GatsbyJSはブログ制作において非常に有益なライブラリなのですが、デフォルトだと備わっていない機能がいくつかあります。 シンタックスハイライトもその一つで、技術系のブログを書く場合には必須といっても過言ではない機能です。 今回は、Gatsby製ブログでシンタックスハイライトを表示させるライブラリを紹介します。
2020.05.24
今回は、このブログの基盤となっている「GatsbyJS」のセットアップ方法について紹介します。 GatsbyはReactベースの静的サイトジェネレータで、非常に高速で動作します。 このブログの画面間の遷移もサクサクと動いているので、通常のReact製アプリに比べると動作が早いことが分かると思います。
2020.05.24