実務未経験文系大学生が独学で制作したReact/firebaseのWebサイト - Qiita
こんにちは。ゆうたと申します。 タイトルの通り、プログラミング初心者の私がポートフォリオ用のwebサイトを作ったので紹介させていただきます。 それにあわせて独学の苦悩なども書きたいと思います。 わたしと同じ実務未経験でプログラミングをやっている人は共感できることも多いと思います。 この記事は、 only text(React/firebaseで制作したWebサイト)の紹介 未経験でたった一人で制作することの苦悩 の構成で書いていきます。 この記事を読んでくださっている方のほとんどはわたしより経験や知識が豊富だと思うのでそういった方々のご指摘点があればコメントしてもらえるとうれしいです。 only text(React/firebaseで制作したWebサイト)の紹介 only text githubはこちらです↓ https://github.com/yuutauh/first このサイトは
How to Parse External Classes and js in react-native as a Package
Background I have built an app that parses external data from the website, and if you know about this, then you will also know that sometimes changes to parser are constant and I wanted to avoid republishing my app as it takes time for users to get the changes. So I thought about a way to deliver the update to users as fast as possible. The problem is that the parser will contain external data and
React と Firebase と Cloud Run を連携するサンプル実装 - めもめも
前提知識 React：インタラクティブな Web フロントエンド（クライアント上で稼働する Javascript）を実装するためのライブラリーで、状態変数の値の変化を自動的に画面に反映する機能があります。 Firebase：モバイルアプリのバックエンドを Google Cloud で提供するサービスで、ユーザー認証やユーザー管理などの機能を専用のライブラリで簡単に実装できます。 Cloud Run：アプリケーションのコンテナイメージを Google Cloud 上にデプロイして実行するサーバーレスタイプのサービスで、オートスケールなどの機能が簡単に利用できます。 なんの話かというと 上記の3つの技術（サービス）を組み合わせて、 エンドユーザーは、Google アカウントで Web アプリケーションにログインする Web アプリケーションから Cloud Run で稼働するバックエンド AP
BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話 - SMARTCAMP Engineer Blog
こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T
SWRで爆死を避ける。firebase Cloud FirestoreとNext.js。
はじめに 2か月前に「SWRを使おうぜという話」という記事を書きました。 Vercel謹製のSWRの便利さや導入の簡単さについて語りました。 そしてそれに感動を覚えたらとにかく使いたくなります。 だって既存のプロジェクトに導入するのも簡単だから（！） Firestore サーバーレスでのアプリケーションやデータをほとんど持たないwebサイトを作成するときは、私はfirebaseのFirestore(GCP)をよく利用します。 これもまたSWRなどと同じくとても簡単に導入できるので、各方面に推奨しております。 しかしFirestoreでの辛い点は、データの取得や更新に必要な手数の多さです。 通常の記載は下記。（※Typescriptを使用しております。） 投稿一つ型チェックするのにこのコーディング量！ type Categories = "ブログ" | "ニュース"; type Post =
Next.js: Firebase Authentication and Middleware for API Routes
Ran Ding Posted on Feb 28, 2021 • Updated on Mar 1, 2021 • Originally published at dingran.me This article was originally published on my blog. Head over there if you like this post and want to read others like it. Recently I made a small web app that requires user accounts. I learned quite a bit about setting up authentication with Firebase on the client-side and using it on the server-side to pr
esa.ioに分報っぽく投稿するアプリをReactとFirebaseで作った - yasuhisa's blog
こういう風に投稿すると(左)、esa.ioにこういう感じ(右)で投稿される分報風のアプリを自分用に年末年始に作りました。 作った動機 使った要素技術 Firebase Authentication Firebase Hosting + React Firebase Cloud Functions デプロイ自動化 所感 作った動機 きっと皆さんそうしているように、私も日々ログを残しながら作業をしている。仕事ではscrapboxを使っているが、プライベートではesa.ioを愛用している。プレビューを見つつmarkdownで書けたり、タグとカテゴリがいい感じに使えたりするところが気に入っている。あと、アイコンがかわいい。 ちゃんと作業をするときにはesa.ioにページを作るが、そうでない雑なものも記録したいときが度々ある。例えばこういうの。 今度コンビニ行ったとき、忘れずにXXXを買う 統計の本
組織でナレッジを共有できる新プロダクト「Strap」 その開発技術に「TypeScript」「Firebase」「PixiJS」「React」を選んだ理由
Goodpatch主催のイベント「のぞき見企画！ICS×Goodpatch Anywhere合同勉強会」で、Goodpatchのエンジニアマネージャーである西山氏が、自社プロダクトStrapの目指すものと開発技術について紹介しました。 Goodpatchのエンジニアマネージャー 西山雄也氏：先日Goodpatchの新しいプロダクトとしてβ版をリリースしたStrapの紹介と、あとはそれにまつわるナレッジの紹介をもう1人の黄から発表します。 僕はGoodpatchのProduct Div.という自社プロダクト開発の部署でエンジニアマネージャーをやっています。プロトタイピングツール『Prott』とクラウドワークスペースツール『Strap』の開発責任者です。フルスタックエンジニアからフロントエンドエンジニアになり、今はGoodpatchに入ってマネージャーをやっているという経歴です。 僕はいわゆる
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
⚡ Twitterの検索/リストやRSSを一括でチェック & 既読管理できるツールをFirebaseで作った - Qiita
お久しぶりです 🙌 以前 Web ページをそのまま保存するツール を作った @yarnaimo です。 みなさんは RSS などの情報収集にどのようなツールを使っていますか？ 私は今まで Google Apps Script と Fusion Tables を使って RSS を Slack に流していたのですが、Fusion Tables が 12 月に消滅してしまうということで（？）この機会に Firebase や React などを使って新しく情報収集ツールを作ってみました。 ✨ 作ったもの Sodafloat https://github.com/yarnaimo/sodafloat Sodafloat は Twitter と RSS の情報を一括でチェック & 既読管理できるツールです！ 各自で Firebase プロジェクトを作成しデプロイしていただく形になっています。 📌
[TypeScript]GitHubにGraphQLでアクセスするServerlessプログラムを作る - Qiita
[TypeScript]GitHubにGraphQLでアクセスするServerlesssプログラムを作る ※同じ記事をこちらにも書いています 動作画面・ソースコード 動作画面 https://sorakumo001.github.io/GitHub-Manager/dist/ ソース https://github.com/SoraKumo001/GitHub-Manager 構造 . ├── README.md ├── dist [出力ディレクトリ] │ ├── index.html │ └── js │ ├── bundle.js │ └── bundle.js.map ├── front │ ├── public │ │ └── index.html [トップページ定義] │ ├── src │ │ ├── App.tsx [Application初期設定] │ │ ├── GitHu
![[TypeScript]GitHubにGraphQLでアクセスするServerlessプログラムを作る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/66b5022659095e884fb262b57bacdd936a68c80d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVHlwZVNjcmlwdCU1REdpdEh1YiVFMyU4MSVBQkdyYXBoUUwlRTMlODElQTclRTMlODIlQTIlRTMlODIlQUYlRTMlODIlQkIlRTMlODIlQjklRTMlODElOTklRTMlODIlOEJTZXJ2ZXJsZXNzJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJUEwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xY2Q2MzAzOWFhMjNmOGUxZTFiMTBlYWJhZWM4OTg3Yw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTb3JhS3VtbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yjk0NjVmMTkzYTcxZDMxMTQwNDAxY2FlNTVkYTdkZmQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1839dce8f670bff2f4b641c558ae1ed5)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build a REALTIME CHAT APP in 5 MIN with React and Firebase
React + Firebase入門
React + Firebase + Stripe = Fireact, the open-source project for your next SaaS product.