20210417のReactに関する記事は9件です。

Reactでメール送信機能を実装する

はじめに Reactで、サーバレスでメール送信機能を追加する方法を紹介します。 環境/前提 上記ライブラリがインストールされていること。 手順 今回は「EmailJS」というサービスを使って実装していきます。 EmailJSにサービス登録 アカウントを作成すると↓みたいなダッシュボードが確認できます。 「Add New Service」からサービスを作成できます。 作成した「Service ID」を使って、ReactからEmailJSのサービスを利用できます。 EmailJSにテンプレート登録 次にメールの雛形になるテンプレートを作成します。 「Create New Template」からサービスを作成できます。 ここで中括弧で宣言してある部分に、Reactからのパラメータを埋め込むことができます。 作成した「Template ID」を使って、ReactからEmailJSのサービスを利用できます。 ここまででEmailJS側の設定は完了です。 ライブラリインストール EmailJS用のnpmパッケージをインストールします。 npm i emailjs-com ReactからEmailJSを呼び出し index.ts import { init,emailjs } from 'emailjs-com'; function onclickSendMail(){ // emailjsのUser_IDを使って初期化 init(process.env.GATSBY_USER_ID); // 環境変数からService_IDとTemplate_IDを取得する。 const emailjsServiceId = process.env.GATSBY_EMAILJS_SERVICE_ID; const emailjsTemplateId = process.env.GATSBY_EMAILJS_TEMPLATE_ID; // emailjsのテンプレートに渡すパラメータを宣言 const templateParams = { from_name: emailName, message: emailText }; // ServiceId,Template_ID,テンプレートに渡すパラメータを引数にemailjsを呼び出し emailjs.send(emailjsServiceId,emailjsTemplateId, templateParams). then(()=>{ // do something }); } 以上の手順でReactからサーバレスでメール送信をすることができます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【ブログ作りたい方必見】Reactでmdファイルを使わずに、Qiitaと同じようにMarkdownで記事を書く方法

皆さんこんにちは! つい1ヶ月ほど前ぐらいからReactの勉強をし始め、今ではReactのフレームワークGatsby.jsで遊んでいます。 そんなReactで面白いパッケージを発見したのでご紹介したいと思います。 その名は、、、 react-markdownです! これはQiitaと同じようにMarkdownで記事を書くことが可能です! 世の中便利になりましたね。 実装も全く難しくありません。 パッケージのインストール時間を合わせても10分いかないくらいで実装できます。 説明はこの辺にして早速始めていきましょう! はじめに QiitaのMarkdownすべてが実装できるわけではありません。 console.log('markdown') 例えば、このようなコードを記載するMarkdownは使えません。 もしかしたら実装できるかもしれないのですが、調べた限り方法は見つかりませんでした。 知っている方がいたらぜひコメント欄に教えて下さると助かります。 必要パッケージのインストール まずは必要なパッケージをインストールします。 npm install react-markdown remark-gfm github-markdown-css react-markdownの設定 import 'github-markdown-css/github-markdown.css'; import React from 'react'; import ReactMarkdown from 'react-markdown'; import gfm from 'remark-gfm'; const Markdown = () => { const markdown = ` **aiueo** # aiueo ` return( <React.Fragment> <ReactMarkdown className="markdown-body p-3" remarkPlugins={[gfm]} children={markdown} /> </React.Fragment> ) } export default Markdown まず初めに気を付けることはmarkdownの記述を""(ダブルクォーテーション)ではなく、``(バッククォーテーション)で行っているということです。 ダブルクォーテーションだと正しくmarkdownが読み込まれないので気を付けください。 remarkPluginsはよくわかんないっす(笑)。 一応公式ドキュメントを載せておきます。 react-markdown - npm children にはMarkdownで記述したものを指定します。 最後にimport 'github-markdown-css/github-markdown.css'でCSSをインポートしてください。 これでMarkdownでブログを書くことが可能です。 実際に書くとこんな感じです。 意外と簡単に実装できました。 ただ、import 'github-markdown-css/github-markdown.css'これがないとQiitaのようなMarkdownを記述できないところで少し躓きました。 皆さんはコピペで十分です! 以上、「【ブログ作りたい方必見】Reactでmdファイルを使わずに、Qiitaと同じようにMarkdownで記事を書く方法」でした! Thank you for reading
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

勤怠管理SPAサイトをリリースしてみた【個人開発】

サービスについて https://kintai-kantan.com?params=introduction が紹介ページとなります。 まだ、試作段階で、何かと不具合があるかと思いますが、使っていただければ幸いです。 作ろうと思ったきっかけ 業務で React と Ruby on Railsを扱うことになりました。 しかし、これらに知見がないので、勉強がてら、なにかのサービスを作成し、リリースしてみようと思い、行動にいたりました。 そして、まず思いついたのが勤怠入力サービスでした。 なぜなら、普段使っているものが、遅いし、入力する項目が多くて使い辛いし、なんとかならないものかと不満が溜まっていたから。 サービスの思想 スマホアプリライクに とにかく、処理をシンプルにする! はやい!! 使用技術 ざっくりとになりますが、 バックエンド Ruby on Rails graphql-ruby device データベース PostgreSQL フロントエンド React TypeScript Apollo Client サーバーサイド さくらVPS docker-compose nginx https-portal 感想 はじめて、Qiitaに投稿してみました。 また、投稿したいと思います。 みていただき、ありがとうございます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

お天気アプリ作ってみました(React, TypeScript,Redux toolkit)

React, TypeScript,Redux toolkit,外部APIに慣れる一環でお天気アプリを作ってみました。 項番 ページ内リンク 1 機能説明 2 制作の意図/要件 3 制作過程 4 制作を通して まずはUIをお見せします! (URLを貼りたかったのですがAPIの回数制限などの諸問題があり断念しました) 機能説明 現在地取得 検索した地名をマップに写す 現在地もしくは検索した地域の天気情報を表示 チャートで湿度と気温を表示 作成の意図 React, TypeScript,Redux toolkit,外部APIに慣れるためにお天気アプリを制作してみました。 ◎React/TypeScript フロント部分実装のために使用 ◎Redux toolkit 現在地情報、入力したエリアの情報、天気情報をpropsで受け渡しするのではなく、グローバルに管理したいと考えてRedux toolkitを導入することにしました。 ◎外部API 今までガッツリと外部APIを叩いたことがなかったので叩くことで慣れることを目標にしました。 使用したAPIは以下になります。 GoogleMap Api (Geolocation API,Maps JavaScript API,Geocoding API) OpenWeather API 制作過程 ①外部APIに慣れる まずそれぞれの外部APIがどのような挙動をするか知らないと構築出来ないと判断して、各々のAPIを使って簡単なアプリを作成しました。 OpenWeatherが一時間あたりに利用できる回数が決まっていたので、その回数に達成しないように気をつけて実装するのが中々骨が折れました。 ②UIの構築 UIは模写しました。 https://openweathermap.org/ ③機能実装 経度・緯度情報で天気情報を取得しています。なので、現在地もしくは検索した地域の経度・緯度をGeolocation APIとGeocoding APIで取得。その経度と緯度をグローバルに管理するためにReduxtoolkitに渡すよう処理を実装。 ↓ 経度・緯度を元にOpenWeather APIを叩き天気情報取得。グローバルに管理するためにReduxtoolkitに渡すように処理を実装。 ↓ 取得した天気情報を各コンポーネントに渡して表示させるように実装。 (ちなみに極力コンポーネント分割するために5分割しました) ④Amplifyでデプロイ 制作を通して 苦労した点 Googleアカウントのセキュリティーの強化・請求アラートの設定 クラウド破産が本当に怖かったのでとても神経質になり、かなり調べて設定したので苦労しました。 Typescriptの型定義 至るところで予期しないエラーが発生しました。その都度何が原因か調べて型定義をしていきました。  しかしどうしても解決出来ない箇所はany型に頼ってしまったので、もっと勉強してリファクタリングしたいと思います。 Redux toolkitの非同期処理 実装していく中で想定した挙動と異なることは多々ありました。 その中で一番解消に時間がかかってしまったのがRedux toolkitの非同期処理でした。少し強引に実装してしまったので、もっと勉強をしてより良い実装できるようにしたいです。 感想 外部APIを叩く、レスポンスをもとに別のAPIを叩くという一連の流れを実装することで、APIについての理解がとても深まりました。 APIのドキュメントを読むことにも慣れることが出来たので、他のAPIや言語を学習する際には抵抗なく読めるようになるかなと思います。 また、このアプリ制作を通じてtypescriptとReduxの理解不足だと、ものすごく痛感したので勉強を引き続きしていきたいと思います。 このアプリ制作をしてさらにプログラミングの楽しさを知ることが出来ました!もっとたくさんアプリを作っていきたいです!! 関連記事 https://qiita.com/takeiin/items/cca6d001fb36bf2e2e52 https://qiita.com/takeiin/items/24b59653813528e4e082 参考サイト https://zenn.dev/tiwu_dev/articles/2df43542918961 https://qiita.com/shinshin86/items/63142a4d4b498d562fba https://qiita.com/Sotq_17/items/7acdb68620c73302945a https://qiita.com/someone7140/items/5489c306606f5b705f75 https://qiita.com/kiritan/items/1a141eb9482c146897f7 https://qiita.com/nownabe/items/aeac1ce0977be963a740
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React/TypeScript/chart.jsのメモ

Reactプロジェクトの作成 $ npx create-react-app sample --template typescript axiosとchart.jsのインストール $ cd sample $ npm install axios $ npm install --save react-chartjs-2 chart.js ローカルサーバの起動 $ npm start 実装 sample/src/components/GetCovid19.tsx import React, {useState, useEffect} from 'react' import axios from 'axios' import datajson from './data.json' import { Line } from 'react-chartjs-2' type DATATYPE = typeof datajson const GetCovid19 = () => { const [covid19s, setCovid19s] = useState<DATATYPE>([]) useEffect(() => { axios.get<DATATYPE>('https://api.covid19api.com/dayone/country/japan').then(res => { setCovid19s(res.data) }) }, []) const data = { labels: covid19s.map(covid19 => new Date(covid19.Date).toDateString()), datasets: [ { label: 'Confirmed', data: covid19s.map(covid19 => covid19.Confirmed), borderColor: 'blue' }, { label: 'Recovered', data: covid19s.map(covid19 => covid19.Recovered), borderColor: 'green' }, { label: 'Deaths', data: covid19s.map(covid19 => covid19.Deaths), borderColor: 'red' }, ] } return ( <div> <Line data={data}/> </div> ) } export default GetCovid19 sample/src/App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import GetCovid19 from './components/GetCovid19'; function App() { return ( <div className="App"> <GetCovid19 /> </div> ); } export default App;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React+TypeScriptのメモ

TypeScriptテンプレートのReactプロジェクトの作成 $ npx create-react-app sample --template typescript axiosのインストール $ cd sample $ npm install axios ローカルサーバの起動 $ npm start とりあえずHello World sample/src/App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> Hello World </div> ); } export default App; axiosでAPI/GET sample/src/components/data.json [ { "ID": "eed7e489-b62b-464a-a7cb-18d68b59d2a8", "Country": "Japan", "CountryCode": "JP", "Province": "", "City": "", "CityCode": "", "Lat": "36.2", "Lon": "138.25", "Confirmed": 2, "Deaths": 0, "Recovered": 0, "Active": 2, "Date": "2020-01-22T00:00:00Z" } ] sample/src/components/GetCovid19.tsx import React, {useState, useEffect} from 'react' import axios from 'axios' import datajson from './data.json' type DATATYPE = typeof datajson const GetCovid19 = () => { const [covid19s, setCovid19s] = useState<DATATYPE>([]) useEffect(() => { axios.get<DATATYPE>('https://api.covid19api.com/dayone/country/japan').then(res => { setCovid19s(res.data) }) }, []) return ( <div> {covid19s.map(covid19 => <h4>{covid19.Date}/{covid19.Confirmed}/{covid19.Recovered}/{covid19.Deaths}</h4>)} </div> ) } export default GetCovid19 sample/src/App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import GetCovid19 from './components/GetCovid19'; function App() { return ( <div className="App"> <GetCovid19 /> </div> ); } export default App;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JSX.IntrinsicElements["input"]をstyled-componentsにスプレッド構文で展開したときのエラー

inputのpropsを整理していたらエラーが出たので、その解決方法を残しておきます。 前提 inputのprops typeをJSX.IntrinsicElements["input"]をベースに定義 styled-componentsを使用 import React from "react"; import styled from "styled-components"; type InputProps = JSX.IntrinsicElements["input"]; type Props = InputProps & { labelName: string; }; export const AddInput: React.VFC<Props> = ({ labelName, ...inputProps }) => { return ( <label> <span>{labelName}</span> <SInput {...inputProps} /> </label> ); }; const SInput = styled.input` border: 1px solid #ccc; background-color: #fff; padding: 5px; `; 問題点 styled-components(input)にスプレッド構文でpropsを展開したときにエラー styled-componentsではなく、ただのinputタグならエラー出ない Types of property 'ref' are incompatible. Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'. TS2769 解決方法 エラーにrefがincompatibleとあったので、typeからrefを除外したところエラーが消えました。めでたし。 type InputProps = JSX.IntrinsicElements["input"]; //↓これでいけた type InputProps = Omit<JSX.IntrinsicElements["input"], "ref">; 参考記事
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Reactのメモ

Node.jsのインストール Reactプロジェクトの作成 $ create-react-app sample axiosのインストール $ cd sample $ npm install axios Reactアプリの起動 $ npm start Hello World sample/src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> Hello World! </div> ); } export default App; axiosでAPI/GET js import React, {useState, useEffect} from 'react' import axios from 'axios' const GetCovid19 = () => { const [covid19s, setCovid19s] = useState([]) useEffect(() => { axios.get('https://api.covid19api.com/dayone/country/japan') .then(r => {setCovid19s(r.data)}) .catch(e => console.log(e)) }, []) return ( <div> {covid19s.map(covid19 => <h4>{covid19.Date}/{covid19.Confirmed}/{covid19.Deaths}/{covid19.Recovered}</h4>)} </div> ) } export default GetCovid19 src/App.js import logo from './logo.svg'; import './App.css'; import GetCovid19 from './components/GetCovid19'; function App() { return ( <div className="App"> <GetCovid19 /> </div> ); } export default App;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[React Native] stateの更新と再描画のタイミング

0. 目的 stateの更新と再描画のタイミングについて調査する 1. 環境 React : 16.8.6 React Native : 0.63.4 2. ソースコード test_1 function App() { const [val_1, setVal_1] = useState('A'); const [val_2, setVal_2] = useState('A'); const [val_3, setVal_3] = useState('A'); useEffect(() => { setVal_1('B'); setVal_2('B'); setVal_3('B'); }, []); console.log('val_1 : ' + val_1); console.log('val_2 : ' + val_3); console.log('val_3 : ' + val_3); return ( <> </> ); } 実行結果_1 LOG val_1 : A LOG val_2 : A LOG val_3 : A LOG val_1 : B LOG val_2 : B LOG val_3 : B ⇒ ブロック内で複数のstateを更新した場合、最後のstateが更新されたタイミングで再描画される test_2 function App() { const [val_1, setVal_1] = useState('A'); useEffect(() => { setVal_1('B'); setVal_1('C'); setVal_1('D'); }, []); console.log('val_1 : ' + val_1); return ( <> </> ); } 実行結果_2 LOG val_1 : A LOG val_1 : D ⇒ ブロック内で同じstateを複数回setした場合、最後にsetした値で更新、再描画される(同期的) test_3 function App() { const [val_1, setVal_1] = useState('A'); const getStr = async (str) => { return str; }; useEffect(() => { async function init() { let val_1 = await getStr('B') setVal_1(val_1); setVal_1('C'); setVal_1('D'); } init(); }, []); console.log('val_1 : ' + val_1); return ( <> </> ); } 実行結果_3 LOG val_1 : A LOG val_1 : B LOG val_1 : C LOG val_1 : D ⇒ async functionを実行すると、全てのstateの更新時に再描画される
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む