PythonでShapefileを操作する方法をまとめている方がいたので、なんとなくメモ。
感謝！！
[PythonでのShapefile（.shp）操作まとめ]
https://qiita.com/c60evaporator/items/78b4148bac6afa4844f9
reactなどの開発をしているときに、npm startで、ローカルサーバを立ち上げるけど、そのままだと、http://xxx.xxx.xxx.xxx:3000/になりHTTPでのアクセスとなる。
React-QR-Readerを使おうとしたときに、Android(iPhoneもそうらしい）の場合、httpでのアクセスではブラウザからカメラを使うことができず、httpsでのアクセスが必要となるので動かない。
立ち上げ方が以下のページにあったので、とりあずメモ。
（参考）
https://create-react-app.dev/docs/using-https-in-development/
（Wndowsコマンドプロンプトの場合）
set HTTPS=true&&npm start
（PowerShellの場合）VisualStudioCodeのコンソールはこちら
($env:HTTPS = "true") -and (npm start)
（Linux Bashの場合)
HTTPS=true npm start
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
[使い方]
クラスコンポーネントの場合、componentDidMount(),componentDidUpdate(),componentWillUnmount()などのライフサイクルに関する関数を書くことで、マウント時やレンダー時などに処理をはさむことができる。
けど、関数コンポーネントの場合は、これらの関数は使えないので代わりに、useEffect()を使う。
[ドキュメント]
https://ja.reactjs.org/docs/hooks-effect.html
[インストール]
Reactに含まれるので、特にインストール不要
[使い方]
Javascriptで日付操作をするときnew Date()などで面倒だったけど、momentがよさそうだったのでとりあえずメモ。
[ドキュメント]
http://momentjs.com/
[参考]
(わくわくBank)
https://www.wakuwakubank.com/posts/606-javascript-moment/
[インストール]
npm install moment[使い方]
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;
[ソース内での書き方]