ReactとLeafletで地図の操作

 Reactとleafletを使って地図の操作をしたかったので、なんとなくメモ。

 Reactでleafletを使うときには、react-leafletを使うと便利。

 [ドキュメント]

(Leaflet) 本家 直接操作するに仕様確認する
https://leafletjs.com/

(React Leaflet)
https://react-leaflet.js.org/

(React-leafletの使い方メモ) React Leafletのサンプルを解説してくれている感じ。
https://qiita.com/studio_haneya/items/fbb52fa03ab4f212ced0

[インストール]

(React本体、React-dom、Leaflet本体)
npm install react react-dom leaflet

(React-Leaflet)
 npm install react-leaflet

(React-Leaflet Google Layer) GoogleMapを表示するなら
 npm install --save react-leaflet-google-layer

[使い方]

1. とにもかくにもインポート
   (主なコンポーネント)
       import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
   (GoogleMapを表示するなら追加）
       import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
   (Leaflet本体の機能を使うなら)
       import L from 'leaflet'
   
   
2. OpenStreetMapを表示する
   return (
   　　<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
   　　　　<TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
   　</MapContainer>
   );
   
   
3. Google Mapを表示する
   return (
       <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
           <ReactLeafletGoogleLayer apiKey='AIzaSyBF904Y-d2_yF4tXwHuji18VHSUDTwGUFI' type={'hybrid'}  />
       </MapContainer>
   );
   
4. マーカーを表示する
   MapContainerの子要素としてMaker要素を記載すると、地図表示時にマーカーを表示してくれる。Makerの子要素として、Popup要素を記載すると、地図上のマーカーをクリックした際に、表示するポップアップを設定できる。
   
   <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
       <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
           <Marker position={[51.505, -0.09]}>
               <Popup>ポップアップメッセージ </Popup>
           </Marker>
       </MapContainer>
   );
   
   
5. leaflet本体を直接操作する
   初期表示だけであれば、react-leafletのコンポーネントを駆使していろいろとカスタマイズできるが、外部コンポーネントからのアクションで、地図内の要素を制御するのは出来なさそう。
   leaflet本体にアクセスして、本体のメソッドなどを使うしかない。
   
   MapContainerのwhenCreated属性に本体を取り出すための関数を設定することで、leaflet本体を取得できる。
   
   以下の例では、状態管理要素を取得するuseStateを利用して、leaflet本体入手している。
   地図とは違うボタン要素のクリックで実行する関数内で、leaflet本体を操作している。
   
   (サンプル)
   function Sample() {
       //leaflet本体を格納するだけなら何でもよいが、状態管理のフック(useState)を使っている。
       let [map,setMap]=useState(null);
       //センター位置を変更するための処理
       let setCenter=()=>{
         map.setView([51.505, -0.09],map.getZoom());
       };
       //マーカーを地図に追加する
       let addPoi=()=>{
         L.marker([53.505, -0.09]).addTo(map);
       }
6.     //レンダー要素
       return (
       <>
       <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
           <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       </MapContainer>
       <button onClick={()=>addPoi()}>マーカー追加</button>
       <button onClick={()=>setCenter()}>センターを表示</button>
       </>
   )
   }
   
   

 

Reactでレンダー後に処理を実行するフック(useEffect)

 クラスコンポーネントの場合、componentDidMount(),componentDidUpdate(),componentWillUnmount()などのライフサイクルに関する関数を書くことで、マウント時やレンダー時などに処理をはさむことができる。
けど、関数コンポーネントの場合は、これらの関数は使えないので代わりに、useEffect()を使う。

[ドキュメント]
https://ja.reactjs.org/docs/hooks-effect.html

[インストール]

Reactに含まれるので、特にインストール不要

[使い方]

1. とにもかくにもインポート
   import react ,{useEffect} from 'react'
   
   
2. 関数コンポーネントの処理の中で記載
   
   useEffect(処理関数,オプション)
   
   処理関数：useEffectはレンダー毎に第一引数に設定される処理関数を実行する。
   
   第一引数に設定される処理関数の戻り値にコンポーネントがアンマウントする際のクリーンナップ実行時に実行される。
   たとえば、setInterval()で定期的に処理を実行した際に、コンポーネントがアンマウントされた場合に処理と中止させる場合に使う。
   
   
   オプション：設定した処理関数の実行タイミングを制御する。
       指定なし：毎回
       []    ：初めの一回のみ
       [state] ：useState()で取得した状態管理に使用している変数を指定すると、状態が変化したときに実行される。
   
   
   useEffectで設定できる関数は１つなので、使い分けたい場合は、複数記述する。
   
   

Javascript で日付操作

 Javascriptで日付操作をするときnew Date()などで面倒だったけど、momentがよさそうだったのでとりあえずメモ。

[ドキュメント]
  http://momentjs.com/
[参考]
(わくわくBank)
https://www.wakuwakubank.com/posts/606-javascript-moment/

[インストール]

    npm install moment

[使い方]

1. とにもかくにもインポート
   import moment from moment;
   
2. 処理でのコーディング
   (現在日付を取得)
   moment().format("YYYY-MM-DD HH:mm:ss")
   
   
3. こんなことも？
   (ロケール指定)
      moment.locale('ja')
   (加算:add)
      moment().add(数字,単位)
        単位: 年:'y',月:'M',週:'w',日:'d',時間:'h',分:'m',秒:'s'
   (減算:subtract)
      moment().subtract(数字,単位)
         単位は加算と同じ
   (差分:diff)
      元moment.diff(比較対象moment,単位,小数調整)
      単位は加算と同じ、デフォルトはミリ秒
   　小数調整は小数以下あり(true),なし(false)
   (はじめ:startOf と おわり:endOf）
   　moment().startOf(単位)  はじめ 
      moment().endOf(単位)　おわり
   　単位は加算と同じ
   (ほかの日時と比較:isAfter,isBefore,isSame)
      元より比較対照が後であればtrue : 元moment.isAfter(比較対象moment)
      元より比較対照が前であればtrue : 元moment.isBefore(比較対象moment)
      元と比較対照が同じであればtrue : 元moment.isSame(比較対象moment)
   (日付の生成)
     現在時刻（デフォルト) : moment()
     文字列で指定              : moment("2021-05-23")
     オブジェクトで指定     : moment({years:2021,months:5,days:23})
     Dateオブジェクト　　 : monent(new Date(2021,5,23))
   

Reactでコンポーネント間のデータ共有がしたい

 Reactは親から子コンポーネントに値を渡す場合、引数(props)として渡すことができる。ただ引数で実装する場合、親から孫や、兄弟で同じ値を参照しようとすると必要もないのに、propsに設定しまくることになるので、メンテンナンス性が良くない。

React ではContext APIを用意しているので、上記のようなケースの場合に使える。

[ドキュメント]

 　　https://ja.reactjs.org/docs/context.html

[インストール]　

　　※Reactに含まれているuseContextを使うので、Reactが入っていればよし。

[ソース例]

[context/app.js] Context用のファイル
import { createContext } from 'react';
const AppContext = createContext();
export default AppContext;

[App.js] アプリ本体
import AppContext  from './context/app';
import { useState } from 'react';

function App() {
  //authという状態とsetAuthという設定用関数を取得
  let [auth,setAuth] = useState();
  return (
    //AppContextで共有するauthとsetAuthを設定
    <AppContext.Provider value={{"auth":auth,"setAuth":setAuth}} >
    <Sample></Sample>
    </AppContext.Provider>
  );
}

[sample.js] 子コンポーネント
import React,{useContext} from 'react';
import AppContext  from './context/app';
function App(){
    //useContextでAppContextの状態を取得
    let app_context=useContext(AppContext);
    //Contextに値を設定
    app_context.setAuth({user_id:1});
　  //参照
    console.log(app_context.auth);//{user_id:1}
    
    return (
        <div></div>
    );
}
export default Sample;


[ソース内での書き方]

1.  createContextでContextを生成する。
   他のコンポーネントにimportするため、外部ファイルにしておく。
   適当に名前を付けてたContext用の変数にcreateContext()の戻り値を設定する。
     const AppContext = createContext();
   他のソースで読みこんだ時にアクセスできるように宣言をしておく
     export default AppContext;
   
   
2. 共有したい範囲のコンポーネント上位に、ContextのProviderを設置する。
   
   定義したContextにはProviderが標準で用意される。
   定義したContextに合わせてタグを作る
   <AppContext.Provider value={オブジェクト}></AppContext>
   ソース例(App.js)では、面倒なのでuseState()で管理する値と、変更用の関数を用意して、それらをContentに設定している。
   
   
3. Context.Consumer側での値の参照
   上位はPoviderで、受け取る側はCunsumerというらしい。
     関数コンポーネントの場合はuseContext()フックが使えるので、意識しなくても大丈夫。
   
   　利用する場合は、useContext(定義したContext)で利用するContextを取得する。
   　ソース例では、AppContextとしているので、useContext(AppContext)と記述することになる。
   Contextが取得できれば、あとは、共有した要素に直接以下のようにアクセスできる
       Context.共有値
   ソース例では、値保持用のauthと変更用のsetAuthという関数型の値を共有しているので、
       app_context.auth
       app_context.setAuth({user_id:2}) 
   といったようにアクセスできる。
   
   

React Routerでベースをルート以外にする方法

 React Routerは初期状態だと、"/"を起点にしてしまうので、デプロイ先が/hoge/のようになるとおかしくなる。
回避するには   

    <BrowserRouter basename="/test/">

 のように、BrowserRouterの属性でbasenameに配置場所を指定すればよい。

npm startで起動する際にも変える必要があるので、プロジェクトのpackage.jsonでhomepageを指定する必要がある。

　“homepage”:”/test/”

React Hook Formでフォーム要素の管理をしてみる

 Reactでフォーム画面を構成したいときに、標準(?)だとinput要素一つ一つにstateを管理するようなつくりで面倒くさいので、React Hook Formが使えそうだったのでなんとくメモ。

非制御コンポーネント (Uncontrolled Components) を、管理下(register)に登録することで、form要素の一括してデータを取り扱える（操作およびvalidateion)ようにしている感じ。
非制御コンポーネントな要素だけだと、Material UIやBootstrapなどでラップしている部品は使えないことになるこえど、そのあたりは考慮されている模様。
今回は、非制御コンポーネントの書き方をメモ。

useState()で状態を一つずつ管理したり、useRef()を使用して参照先を管理するよりはわかりやすいかなぁと。※中身はuseRef()使っているのかも



[ドキュメント]

 　　https://react-hook-form.com/jp/

[インストール]　

　　$npm install react-hook-form

[ソース例] ログイン画面のイメージ
import {useForm} from 'react-hook-form';
function Login(){
    const { register, handleSubmit, formState: { errors },reset } = useForm();
    //Sumit時に呼ばれる処理
    const handleLink = (form_data) => {
        console.log(form_data);
    };
    return (
        <div>
        <form onSubmit={handleSubmit(handleLink)}>
                アカウント：<input type="text" {...register("account", { required: true })} /><br/>
                パスワード:<input type="password" {...register("password", { required: true })} /><br/>
                    <button type="submit">送信</button>
                    <button onClick={()=>{reset()}}>キャンセル</button>
                    <p>{(errors.account || errors.password) && "アカウントとパスワードをどちらも入力してください。"}</p>
                </form>
        </div>
    );
}

[ソース内での書き方]

1. とにもかくにもインポート
   
   import {useForm} from 'react-hook-form';
   
   
2. 関数コンポーネント内で、useForm()を仕様
   useForm()から取得できるものはいろいろとあるけど、以下を使ってみた
   
       register    フォーム要素の関連付け（？）用の関数
       handleSubmit    Submitで呼ばれる関数
       formState:{arrors}    フォーム要素のエラーの状況
       reset  フォーム要素の要素を再設定用の関数
   
   useForm()の引数として、フォームに設定するデフォルト値なんかも設定できる
   
   
3. form要素のonSubmitイベントでuseForm()で取得したhandleSubmitをコール
   
   form要素で送信ボタンなどのsubmitをした際にhadleSubmitが呼ばれるようにする。
   hadleSbumitの引数として、実際に実行したい関数を設定しておく。
   指定した関数への引数として、4.で登録するinput要素のnameをキーにしたオブジェクトが設定されるので、それぞれの要素にアクセスしやすい。
   
   
4. input要素を管理下に登録
   
   useForm()で取得したregisterを使って、input要素を管理下に登録する。
   inputの属性として、registerも戻りが設定されるように記載する。
   
   <input type="text" {...register("account", { required: true,maxLength:{value:5,message:"５文字まで"} })} />
   
   regiserの引数として、第1引数にキーとなる名称、第2引数は任意で、簡易的なバリデーションの情報を設定する
   
   registerの前の...はスプレッド構文 (...) というらしく、オブジェクトや配列などを展開してくれる便利な構文だそうです。
   
   バリデーションは以下が使える。registerでの登録の際にはエラー時のメッセージも登録できる。
       required    必須
       min    最小値
       max    最大値
       minLength    最小文字数
       maxLength    最大文字数
       pattern    正規表現
       validate    オリジナルのチェック関数を設定
   
   
5. reset処理を追加（必要なら）
   resetを使うと管理要素をセットしなおしてくれる。
   引数なしだとすべて空にしてくれるが、オブジェクトでkey:valueを指定することによって
   上の例ではリセットボタンを
   ボタンのタイプをreset(<button type="reset">リセット</button>)としても空にはなる
   その際には、フックの対象にならないので、イベントが走らない。
   
   初期表示の値を入れるのであれば、以下のようにuseEffect()で実行させると入力済みにしてくれる。
   
       useEffect(()=>{
           reset({account:'start_string'})
       },[reset]);
   
   

Javascriptでサーバへアクセスするのにfetchメソッドを使ってみる。

 
以前は、 XMLHttpRequest や jQuery の ajaxメソッドを使ってサーバへのアクセスをしていたけど、今はfetchメソッドを使うとシンプルにかけそうなのでなんとくなくメモ。

前は非同期処理をする際に、コールバック関数をつなげていくような見通しがわるいコード
になってたけど、イマドキはpromiseが使えるので、見た目すっきりでいい感じ。


(参考)
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch


[基本的な使い方(promise)]

fetch(接続先文字列, { オプション })
 .then((response) => {
　 //Responseオブジェクトが引数に設定される
    //httpステータス404とかでもここまで到達するのでResponse.statusかResponse.okプロパティで正常か判定をしたほうがよい。
    if (!response.ok) {
        throw new Error();
    }
    //ResponseのBody部を戻り値にしてやるBodyに設定されているデータに応じて容易に取得するためのメソッドが用意されている
　 // バイナリ:response.blob(),JSON形式: response.json() ,Text形式: response.text() ,FomrData形式: response.formData()

    return response.json(); //bodyがJSON文字列の場合の取得例
 })
 .then((data) => {
    //前のthenのリターンが引数として設定される
    //response body部の処理を記述する想定
   
    
 })
 .catch((error) => {
    // ネットワークトラブルか、then句での例外などの処理を記述
 });


<<GETの場合>>
オプションは省略可能
fetch(接続先文字列)


<<POSTの場合>>
オプション部分で、method,cache,bodyを指定する
fetch(接続先文字列, {   
    method: 'POST',
        cache: 'no-cache',
        headers: {
              'Content-Type': 'application/json',
        },
        body: data  //送りたいデータ
 }
)

bodyに設定設定するのは、テキストかformData,バイナリと何でもよい。

[json文字列の場合]
 適当なオブジェクト(data)をJSON.stringify(data)としてJSONに変換するだけでＯＫ
   body:JSON.stringify(data)

 ※オプション部分にヘッダーとして、Content-Typeなどを設定するとよい。
  headers: {
    'Content-Type': 'application/json',
  },

[formDataの場合]
ファイルアップロードとかする場合はformDataのほうがよさげ。
const data = new FormData();
let blob = new Blob(['Sample text'], {
    type: 'text/plain'
});data.append('data1', blob, 'foo.txt');