坂本研のゼミ室

2020-01-01から1年間の記事一覧

react-axeでアクセシビリティの向上を目指す

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

最近作ったレシピ投稿サイトとそれに用いた技術

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

react-testing-libraryでテストをやってみて

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

イテレータとジェネレータ

イテレータ 反復可能なオブジェクト (iterable object) 反復子オブジェクト(iterator object) 配列についてみていく イテレータのプロトコル ジェネレータ return yield式と双方向コミュニケーション 参考資料 ES2015から新たに導入された、イテレータ(itera…

正規表現確認ノート (JavaScript)

正規表現は下記のようにスラッシュで囲まれたパターンからなる let pattern = /正規表現/; match() search() 正規表現パターン 単純な文字列にマッチするか /ABC/ どれか1文字マッチするか [ABC] 指定文字以外のどれか1文字にマッチするか [^ABC] 選択範囲の…

webpackの devtool ソースマップでエラーを確認する

最近,webpackをさわっていてソースマップが便利だと思い,紹介させていただきます. webpack ソースマップ 環境 やってみる ファイル構成 任意のフォルダを作成 package.jsonを作成 webpackをインストール package.jsonを修正 app.js message.js webpack.co…

React + Firebase でGoogleアカウントでのログイン機能を実装する

はじめに Firebase Authentication 環境 準備 Firebaseプロジェクトの作成 ログイン方法を指定する 実装 create-react-app ファイル構成 Firebase SDK snippet取得する App.js Signin.jsx 実行結果 おわりに はじめに FirebaseとReactでの開発で、 今回はGoo…

ReactでSPA+PWAを作ってみた

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