Javascript プロジェクトごとにNodeのバージョンを変更する「Volta」を使う
Nodeのバージョンアップが激しすぎて１年も立つと過去のプロジェクトは最新のNodeで動作しなくなる。プロジェクトを変えるたびにNodeのバージョンを切り替えのは大変手間だが、それを自動的にやってくれるのが「VOLTA」である。
...
Javascript
Javascript Javascript create-react-app で作ったReactアプリにMapbox GL JSを使いビルドするとエラーになる
npm start
でWebPack Dev Serverで動作させているぶんには問題ないのだが、いざBuildを行いWebサーバー上でモジュールをデプロイし実行させると以下のエラー
An error occurred whi...
Javascript reactで開発したアプリをWebサーバへ載せて動作させたら「Uncaught SyntaxError: Unexpected token ‘<'」エラーが発生
数時間ハマってしまったのでメモ。
原因はscriptタグによるjsファイルが読み込まれないこと
以下を見直す
package.json
"homepage": "***"
React Routerを使っている場合...
react.js create-react-appで作成したReactアプリのbuild出力先を変更する方法
npm run eject
を実行することで隠蔽されていたWebPack関係のファイルが出現し設定を色々変更する事ができるようになる。
react.js react にて npm run build実行時に出力先のディレクトリにあるファイルが削除されないようにする
npm run build を実行すると出力先ディレクトリのファイルがすべて削除されてしまう。
サーバーサイドのスクリプトなんかを同ディレクトリへ配置しておきたい場合困る。
/scripts/build.js を変更することで元フ...
react.js ReactにてError: error:0308010C:digital envelope routines::unsupported エラーが発生
(node:43616) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --tra...
Javascript axios で postしても中身が取れない
const res = await axios
.post("/test.php", {aaa:"aaa",bbb:"bbb"})
.catch((err) => {
return err....
react.js react開発時に特定のリクエストを外部サーバへ転送する方法
create-react-app hogehoge
cd hogehoge
npm start
Webpack dev serverが起動しホットリロードで開発ができるようになる。
フロント側の開発ならこれでいいのだが、サーバーサ...
react.js MUI にてエラー「Module not found: Can’t resolve ‘@emotion/react’ in ‘***/node_modules/@mui/styine’」
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve '@emotion/react' in '***/node_modules/@mui/s...
react.js ractでcssでコンパイルエラー「Error: Can’t resolve ‘./images/***.***’ in ‘***/src’ 」
Failed to compile.
./src/***.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader...
Javascript Reactでエラー「Error: The `style` prop expects a mapping from style properties to values, not a string」
RactでJSXにStyleを記載する場合、HTML時代で書いていた以下のような書き方はNG。
<div id="hogehoge" style="width:600px;height:940px;">
実行すると以下...
Javascript MATERIAL-UIがVer5になってMUIと名称変更されている
ReactのUIライブラリであるMATERIL-UIがバージョンアップしてMUIと名称ごと変わっている。サンプルを動かしてみたがエラーが出て動作しなかった。
Ver4のURLは以下に変更となっている。
Ver4は...
FOSS4G 東京都の町丁目別 火災危険度をマッピングした
町丁目別 火災危険度マップを作った。
これは東京都消防庁が公開しているオープンデータを加工しマップアプリ化したもの。作り方をすぐ忘れるのでメモしておく。
【データソース】
・e-Statから境界データ（国勢調査 小地域）...
Javascript PHPStormでprettierを使ってコード整形をする
例：create-react-app でコードを作りコード保存時にprettierで自動整形させる。
# npx create-react.app hogehoge
# cd hogehoge
# npm install pretti...
Javascript WEB IDEのCodeSandboxを使う
Web開発において開発環境の構築は非常に面倒で新しい言語にチャレンジしようとしてもそれが足かせになる事が多い
そんなときはWEB IDEを使おう
CodeSanbBoxであればメジャーなJavaScriptの開発環境が用意さ...
Javascript Vue create で「Warning: name can no longer contain capital letter」 エラー
vue create で新規プロジェクトを作る際プロジェクト名へ大文字は入力出来ないようだ。
% vue create vuetifyTodo
Invalid project name: "vuetifyTodo"
Warni...
Javascript PHPStormでESLintのチェックを有効にする
vueで開発をしているとeslintのフォーマットチェックでビルドがエラーとなりなかなか作業が捗らない。 PHPStormでのエディターでリアルタイムでeslintのチェックが実行され警告をだしてくれるようになるので手順をメモする。...
Javascript Vue3でnpm run serve を起動してソースを変更してもコンパイルエラーとなる場合の対処法
Vue3でnpm run serveを起動しコーディングしていたらソースを変更するたびにコンパイルエラーとなり、毎回npm run serveを再起動しておりました。これは面倒なので、調べるとnodejsが古い可能性があるとのこと。...
Javascript vue で buildした時CSSやJSファイルが絶対パスでリンクされない対処
vue.js にて npm run buildすると生成されるJSやCSSは/css/xxxx.css だったり /js/xxxx.js だったりしてドメイン直下に配置する前提でビルドされる。
アプリによっては/myapp/ な...
Javascript npm install 時の –save オプションは不要
ネット上では npm install hogehoge --saveという記述を多数見かけるが、npmのver5以上は --save オプションが不要となったこれはもともと packege.json の dependencies へ...