Reactのプロジェクトを作る方法のメモ

Reactのプロジェクトを作るときの便利コマンドをとりあえずメモ

create react appで一式そろえることができるので、便利。

[参考：Create React App]
https://create-react-app.dev/docs/getting-started/

npmインストール済みの環境で「my-app」フォルダをプロジェクトする場合は以下のようにコマンドラインから入力する

$npx create-react-app my-app

my-appというフォルダができるので、移動する

$cd my-app

my-app以下には以下のフォルダとファイルができている。

index.jsがエントリポイントになるので、App.jsを編集していくことになる。

node_modules/    ←nodeのパッケージが配置される
package.json
public/　　　　　←公開用のコンテンツはこちらに出力される
src/　　　　　　←ソースフォルダ
    App.js        ←アプリケーション本体
    index.js 　　←エントリポイント

 

 サンプルがすでに出来上がっているので、以下のコマンドで起動できる

$npm start 

公開用のコンテンツの出力は以下で実行

$npm run build

ReactでThree.jsを使う場合のめも

 ReactでThree.jsを使う場合には、react-three/fiberなるものが便利そうなので、なんとなくメモ

 

[react-three/fiber]
https://www.npmjs.com/package/@react-three/fiber 

他にも、react-three/drei というのもあるらしい。fiberのヘルパー的立ち位置なのかな？おいおい調べる。

Blenderのモデルを取り込んだりもできる模様。

 Three.jsをいじってみたかったので、なんとなくメモ

 

[three.js超入門]
https://qiita.com/watabo_shi/items/f7c559c3cdbcdd0f2629

[Three.jsの基礎 ]
https://threejsfundamentals.org/threejs/lessons/ja/

[超楽しくてカッコいい、Reactで始めるThree.js入門]
https://qiita.com/hppRC/items/b3e292e210d02005120f

PythonでのShapefile（.shp）操作

PythonでShapefileを操作する方法をまとめている方がいたので、なんとなくメモ。

感謝！！

 [PythonでのShapefile（.shp）操作まとめ]

https://qiita.com/c60evaporator/items/78b4148bac6afa4844f9

ローカル環境でnpm start をHTTPではなくHTTPSで起動する

 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を使うときには、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で設定できる関数は１つなので、使い分けたい場合は、複数記述する。