作ったもの APIキーの取得 APIキーを登録 フォーム作成 動画取得 動画を表示する おわりに 作ったもの フォームに入力したキーワードに一致するYoutube動画を表示します。 APIキーの取得 Google Cloud PlatformからYoutube Data API v3 のキーを取得します。…
はじめに 実装 static-auth と safe-compare をインストールする server.js を作成 vercel.json を作成 デプロイ エラー はじめに Vercelにホスティングしているサイト(create-react-app)にBasic認証をつける時に、 調べた事をメモしていきます。 下記サイト…
作ったもの 主に使用した技術 やったこと オウム返しbotを作成 yelpに登録 テイクアウトbot作成 axiosをインストール 「位置情報を送信してね！」と返す 緯度・経度を取得 店舗情報を取得 店舗情報をカルーセル表示する デプロイ まとめ 作ったもの 位置情報…
はじめに Next.jsでブログサイトを作成 TypeScript化 Tailwind CSSに置き換える つまづいた点 編集・追加 おわりに はじめに タイトルにもある通り、Next.js + TypeScript + Tailwind CSS を用いてブログサイトを作成した時のメモ的な感じでここに記させてい…
はじめに 前回の記事で紹介させていただいたサイトのアクセシビリティをチェックしたら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を使ってみました。 本記事は実際に手を動かしてみた感想ですので…
イテレータ 反復可能なオブジェクト (iterable object) 反復子オブジェクト(iterator object) 配列についてみていく イテレータのプロトコル ジェネレータ return yield式と双方向コミュニケーション 参考資料 ES2015から新たに導入された、イテレータ(itera…
正規表現は下記のようにスラッシュで囲まれたパターンからなる let pattern = /正規表現/; match() search() 正規表現パターン 単純な文字列にマッチするか /ABC/ どれか1文字マッチするか [ABC] 指定文字以外のどれか1文字にマッチするか [^ABC] 選択範囲の…
最近，webpackをさわっていてソースマップが便利だと思い，紹介させていただきます． webpack ソースマップ 環境 やってみる ファイル構成 任意のフォルダを作成 package.jsonを作成 webpackをインストール package.jsonを修正 app.js message.js webpack.co…
はじめに Firebase Authentication 環境 準備 Firebaseプロジェクトの作成 ログイン方法を指定する 実装 create-react-app ファイル構成 Firebase SDK snippet取得する App.js Signin.jsx 実行結果 おわりに はじめに FirebaseとReactでの開発で、 今回はGoo…
はじめに 作ったもの 使ったもの SPA PWA 環境構築 実装 PWA化 アイコンを設定する ルーティング 画像の表示 現在地からのルートのリンクを作る 参考記事 はじめに あけましておめでとうございます 昨年末熊本で忘年会の幹事をやったのですが、県外から来る…
はじめに GatsbyJS やってみる ホスティング 完成 おわりに はじめに 自分のホームページや、就職活動などでポートフォリオサイト作りたいなと思った事ありませんか？ この記事では、React製の静的サイトジェネレータであるGatsbyJSを紹介させていただき、実…
Babelとは なぜ必要なのか JavaScript Engine ECMAScript Babelの機能 Babelを実行するために必要なもの @babel/cli @babel/core Babel Plugins Babel Presets Babelの変換には3つの段階 Parsing Transformation Code Generat プラグイン arrow-functions bl…
宮崎大学アドベントカレンダー2019 6日目の記事です。 qiita.com はじめに 使用技術 作ったもの 機能 環境構築 実装 ページを作っていく コンポーネントを作っていく レイアウト用のコンポーネント Firebaseにデータを追加・取得・削除するコンポーネント Ne…
宮崎大学アドベントカレンダー2019 5日目の記事です qiita.com はじめに Adobe XD Cocoda! ノンデザイナーズ・デザインブック Themes - iOS - Human Interface Guidelines - Apple Developer ColorDrop おわりに はじめに 様々なWebサイトやアプリのUIを見て…
はじめに 解決策 参考資料 はじめに Opencvのtraincascadeでカスケード分類器を作ろうとやってみた時に、以下のようなエラーがでてきたのでその対応をメモします。 PARAMETERS: cascadeDirName: ./cascade/bunrui/ vecFileName: ./vec/t_RGB.vec bgFileName:…
はじめに テストって何？ Jest Enzyme 環境構築 実際にテストしてみる Jestによるテストの書き方メモ テスト実行のながれ 子コンポーネントの存在を確認 setStateで値が更新されているか確認 子コンポーネントで受け取ったpropsがレンダリングされているか確…
はじめに 2019年テーマ 登壇資料 学び TypeScriptがデファクトスタンダードであると肌で感じることができた フロントエンドの歴史を知ることで今の技術の嬉しみがわかった テストの必要性や書き方・考え方を得ることができた フロントエンドでのセキュリティ…
はじめに Dockerのインストール docker-composeのインストール Visual Studio Codeの拡張機能をインストール LaTeX Workshop Remote - Containers おわりに はじめに 企業から読書レポートの課題が出たのをきっかけに、 Cloud LaTeXは卒論時期にとても動作が…
はじめに 対応 おわりに はじめに Next.js, Reactで開発しているプロジェクトをビルドした時に下記のようなエラーが出たのでその対応をメモします。 > Build error occurred Error:Module did not self-register. at Object.Module._extensions..node (inter…
はじめに 使ったもの Firebaseプロジェクトを作成 データベースを構築する データを取得して表示する データを追加する データを削除する はじめに 今回は、FirebaseのデータをReactで取得し表示する方法を書きます また、選択したIDのデータを表示、データ…
Next.js サーバサイドレンダリング クライアントサイドレンダリング プロジェクト作成 コンポーネントを利用する Next.js Next.jsはReactをサーバサイドでレンダリングし表示する。 また、これを使うことでReactで作ったSPAを複数ページのWebサイトとして 作…
はじめに Redux Persist インストール Redux Persistを実装する index.js 使用オブジェクトのインポート Redux Persistの設定 persistReducerの作成 store, persistorの作成 PersistGate App.js Message.js Button.js はじめに React Reduxを使ってみる - BL…
はじめに 前回の記事(React Reduxを使ってみる - 坂本研のゼミ室)で create-react-appコマンドで環境構築を行いましたが、 今回はこういった環境構築を行わず開発できるCodeSandboxを紹介します。 CodeSandboxとは オープンソースのオンラインエディタです。…
Reduxとは 特徴 インストール Reduxのインストール React Reduxのインストール Reduxで用意するもの Store Provider Reducer 実際に使っていく create-react-appコマンドで雛形を作る サーバーを起動する ディレクトリ構造 index.js Store.js stateの用意 Re…
LogRocket 使い方 最後に LogRocket JavaScriptコードでユーザの行動分析を動画で確認できるサービス logrocket.com 使い方 公式サイトにアクセスしてトップページからユーザ登録する プロジェクト名を入力する タグが表示されるのでコピーする Webサイト(今…
正規表現とは preg_match() 車のナンバー「35-10」が含まれているか調べる 任意の１文字を含むパターン 任意の１文字が指定範囲のある場合 文字クラス定義の中で使うメタ文字 定義済みの文字クラス 先頭一致と終端一致 選択肢 繰り返し サブパターンで電話番…
MAMPとは MAMPのダウンロード MAMPのインストール MAMPを開く php.initの設定(タイムゾーンの変更) MAMPのPHPにパスを通す php.init (設定ファイル) PHPのバージョン確認 MySQLの操作 MySQLにパスを通す PHPを実行してみる MAMPとは MAMPとは、「Macintosh+A…
min.t min.t（ミント）は、拡散しないツイートまとめサイト Togetterをよりプライベートに使いたい人向けのシンプルなサービス min.togetter.com 実際に使ってみた キーワード(URLも対応)を入れてツイートを検索 まとめたいツイートをドラッグして移動 タイ…
