作ったもの APIキーの取得 APIキーを登録 フォーム作成 動画取得 動画を表示する おわりに 作ったもの フォームに入力したキーワードに一致するYoutube動画を表示します。 APIキーの取得 Google Cloud PlatformからYoutube Data API v3 のキーを取得します。…

はじめに 前回の記事で紹介させていただいたサイトのアクセシビリティをチェックしたら71点でした。 本記事では、下記の記事を参考にさせていただき、react-axeを用いてアクセシビリティの向上を目指します。 tech.mercari.com 本記事で記述しているのはこの…

はじめに STAY HOME週間 で家にいる事が多くなり、初めてまともな自炊を始めました。 そこで、自分が作った料理のレシピを投稿するサイトを作りました。 はじめに 作った物 環境 React Firebase Cloud Storage Cloud Firestore Firebase Hosting Material-UI…

はじめに 以前にcreate-react-appで作成したReactアプリをテストしてみるというJestとEnzymeを使ってテストを行う記事を書きましたが、 今回は、以下の記事を参考にしてReact Testing Libraryを使ってみました。 本記事は実際に手を動かしてみた感想ですので…

はじめに 作ったもの 使ったもの SPA PWA 環境構築 実装 PWA化 アイコンを設定する ルーティング 画像の表示 現在地からのルートのリンクを作る 参考記事 はじめに あけましておめでとうございます 昨年末熊本で忘年会の幹事をやったのですが、県外から来る…

宮崎大学アドベントカレンダー2019 6日目の記事です。 qiita.com はじめに 使用技術 作ったもの 機能 環境構築 実装 ページを作っていく コンポーネントを作っていく レイアウト用のコンポーネント Firebaseにデータを追加・取得・削除するコンポーネント Ne…

はじめに テストって何？ Jest Enzyme 環境構築 実際にテストしてみる Jestによるテストの書き方メモ テスト実行のながれ 子コンポーネントの存在を確認 setStateで値が更新されているか確認 子コンポーネントで受け取ったpropsがレンダリングされているか確…

はじめに 対応 おわりに はじめに Next.js, Reactで開発しているプロジェクトをビルドした時に下記のようなエラーが出たのでその対応をメモします。 > Build error occurred Error:Module did not self-register. at Object.Module._extensions..node (inter…

はじめに 使ったもの Firebaseプロジェクトを作成 データベースを構築する データを取得して表示する データを追加する データを削除する はじめに 今回は、FirebaseのデータをReactで取得し表示する方法を書きます また、選択したIDのデータを表示、データ…

はじめに Redux Persist インストール Redux Persistを実装する index.js 使用オブジェクトのインポート Redux Persistの設定 persistReducerの作成 store, persistorの作成 PersistGate App.js Message.js Button.js はじめに React Reduxを使ってみる - BL…

Reduxとは 特徴 インストール Reduxのインストール React Reduxのインストール Reduxで用意するもの Store Provider Reducer 実際に使っていく create-react-appコマンドで雛形を作る サーバーを起動する ディレクトリ構造 index.js Store.js stateの用意 Re…