React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
FirebaseとReact+TypeScriptの連携 - Qiita
※同じ記事をこちらにも書いています 今回は以下の機能を利用します Firebase hosting 静的コンテンツの設置とfunctionsへのプロキシ functions databaseへの入出力 database データ保存 Webからのアクセスはfunctionsも含め、必ずhostingを介するようにします。これで静的コンテンツとデータアクセス用の窓口のドメインが同一になるので、CORS対策で余計な処理を付け加える必要がなくなります。 Reactに関してはトランスコンパイル後のファイルを静的コンテンツとしてhostingに配置します。フロントエンドからFirebaseのdatabaseへのアクセスはfunctions経由となるので、フロントエンド側にAPIキーの設定をする必要はありません。今回はキーを一切使わないコードとなっています。 １．基本設定 1.1 Firebaseツー
Next.jsとFirebaseで更新の手間がかからないポートフォリオサイトを作ってみた
はじめに ソフトウェアエンジニアとして就職して、2年半ほど経ちました。開発業務で得た知見を生かして、プライベートで簡単なツール開発、勉強会でのLT、Qiitaやブログへの記事執筆など様々な取り組みを行ってきたのですが、成果物が複数に分散する問題を抱えていました。 成果物を1箇所に集約することができれば、自分の得意なことや興味のあることが可視化できると考え、今回ポートフォリオサイトを作成したので、技術的な話をまとめたいと思います。 制作物 ポートフォリオサイトURL Kentaro Matsushita - @kentaro-m リポジトリ kentaro-m/portfolio: A my portfolio site that fetch data and display from various services such as GitHub, Qiita, SpeakerDeck.
React+MobX+Firebase-Authenticationでログイン/ログアウト機能を実装する - Qiita
はじめに 以前似たようなことをReact+Reduxでやってみています。 React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (1) React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (2) 最近、趣味の小規模プロジェクトだとReduxめんどくさいな、、と思い始めました。そこで、シンプルでいいよと聞くMobXを試してみることに。 まず手始めに、Reduxをつかってやってみたのと同じことをやってみようと思い、Firebase-Authenticationを使ったログイン/ログアウト機能をもつアプリケーションを作ってみました。 作成したものはk5trismegistus/react-mobx-firebase-loginにあります。 MobXとは MobXとは、Simple, sc
ReactNative で Firebase を利用して push notification を配信する - Qiita
ReactNative で Firebase を利用し push notification を送る方法について紹介します。 構成 環境 Android 7.1.1 iOS 10.3.1 Android Studio 2.3.2 XCode 8.3.3 利用サービス Firebase 利用ライブラリ react-native-fcm 実装 Firebase の登録 以下のマニュアルにそって登録します。 Android用とiOS用をともに作成してください。 「Android パッケージ名」と「iOS バンドル ID」に入る「com.example.app」の部分は自分自身が作成しているアプリのものと同じものにしてください。 設定ファイルがそれぞれ作成されるのでダウンロードしておきます。 証明書の準備 Android とくにありません。 iOS 以下のマニュアルにそって準備します。 exampl
React+Redux+Firebase Authenticationでログイン/ログアウト機能を実装する (1) - Qiita
はじめに 表題の通り、React+Reduxで作っているアプリにFirebase Authenticationによるユーザー認証システムをのっけてみようというものです。ログインにはGoogleアカウントを使用することにします。 アプリといってもあくまでログイン機能のサンプルなので ログインしていない場合はログインボタンが表示されており、そのボタンをおすとポップアップでGoogleアカウントログイン ログインしている場合は画面にユーザー情報を表示する だけのものです。 サンプルアプリのリポジトリは↓にあります。 https://github.com/k5trismegistus/react-redux-firebase-login リポジトリをみてもらえばわかりますが、ディレクトリ構造は次のようになっています。フロントエンドは家でちょろちょろいじる程度なのでよくわかってないです><。普通こう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
