コードに悩む場面の多くが、Typescriptで遭遇するエラーが理解できないときである。 明示的な型定義の本の一部だけしか理解していなかったためである。色々調べてみた。 React + TypeScript に入門したので基本をまとめてみた https://cloudpack.media/57935…

https://threejs.org/ ■開発環境 viteを利用 https://ja.vitejs.dev/ yarn create vite ■three.jsの基本コードらしい。githubから。 https://github.com/mrdoob/three.js ■基本のコード import * as THREE from "three" import { Light } from "three"; impo…

■まずはRefについて Refとは、renderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトであり、Refオブジェクトのcurrent属性を参照することでノードにアクセスできる。 Refを利用するユースケースは以下。 フォーカス、テキスト…

（参考URL） next.js + typescript で Redux Toolkit を使う最小サンプル Getting Started with Redux（公式） Redux Toolkit TypeScript Quick Start Next.js + typescript のインストール npx create-next-app . --ts reduxtoolkitとreact-reduxのインスト…

■CodeSandBox（一番便利） https://codesandbox.io/s/new ■Json Place Holder https://jsonplaceholder.typicode.com/ https://jsonplaceholder.typicode.com/users?id=1 ■Reactフック チートシート useState / useEffect / useReducer / useRef / useCallBa…

最新の Node.js がインストールされていることを確かめる Create React App のインストールガイドに従って新しいプロジェクトを作成する。 npx create-react-app my-app ※以下でも同じらしい npm init react-app プロジェクト名 そのあとでプロジェクト名に…

参考URLはこちら。 React公式はこちら。 dev/my_project/react-express 大まかに分けてやることは 全体の環境構築 backendのExpressサーバの構築 APIのエンドポイントの作成 frontendのReactの設定 React初期画面 ReactからExpressサーバへのアクセス になる…

イベントに対するデフォルトの動作をキャンセルする(preventDefault) Event オブジェクトの preventDefault メソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます…

これ、エラー？ https://www.npmjs.com/package/typed-query-selector https://github.com/g-plane/typed-query-selector 型について https://zenn.dev/sqer/articles/d9d51bbd4b410418cde3 Node.js v18.0.0 documentation https://nodejs.org/api/process.h…

■Nuxtのローカル環境構築 npm install -g vue-cl グローバルにvue-cliをインストールする。 cd で作業ディレクトリに移動 npm init nuxt-app <project-name> でインストール。 質問への回答の参照はこちら アプリケーションの作成が完了したので、 cd [アプリケーション名]</project-name>…

参考URLはこちら https://zenn.dev/donchan922/articles/b08a66cf3cbbc5 ローカルPCのNode.jsのバージョンは切り替えが大変。 それをコマンド１発で対応してくれるのが「nodenv」。 前提条件は、Homebrewがインストールされていること。 /bin/bash -c "$(cur…

インストールされているNode.jsが何かを調べる時のコマンド which node >> ~/.nvm/versions/node/v16.19.0/bin/node cloud9でnode.jsのバージョンを切り替える時 nvm install バージョンの数字 npm ci とnpm install は似ている。 違いについてはリンクで！ …

■9. ライブラリのファイルを作成 pages/にhasura-crud.tsxを作成 9-2. 必要なインポートと基本形 import { VFC, useState, FormEvent } from 'react' import { useQuery, useMutation } from '@apollo/client' import { GET_USERS, CREATE_USER, DELETE_USER…

ポイントは、サーバーサイドの処理と、フロントエンドだけの処理を、きちんと切り分けて構築すること。 公式ライブラリを多用する。 https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js ■9. ライブラリのファイルを作…

typescriptのmicrosoft公式ドキュメント https://www.typescriptlang.org/docs/handbook/2/basic-types.html 海外でのわかりやすいチートチャート https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events ■7. 基本La…

■Next.js 公式事例 https://nextjs.org/examples ■0.Hasuraで必要なgraphQLAPIの作成 https://cloud.hasura.io/ にアクセスすると、GoogleかGitHubのアカウントを聞かれる。（本プロジェクトはGithubのアカウントを使用）。 「New Project」をクリック。 「C…

ログイン firebase login ビルド npm run build デプロイ firebase deploy

■Vueのローカル環境構築 プロジェクトを新規作成。一度トップに戻って 下にスクロールし「SDKの設定と構成」でCDNを選択。 コピーしたSDKを、開発環境のpublic/index.htmlに貼り付ける。の直前 ターミナルで npm install firebase を実行。 インストールが完…

単体テストを行うテスティングライブラリ「Jest」。 ■環境構築 Next.js Testing Next.js + Jest Next.js(TypeScript)にJestを設定する方法 Next.js 12でJestの設定がかなり楽になった 公式docを参考に、必要なライブラリをインストール yarn add -D jest jes…

npm i express sudo npm install -g --force nodemon (npm install nodemon では弾かれた) nodemon app でサーバー立ち上げ https://ichi.pro/react-o-express-sa-ba-ni-setsuzokusuru-79802832048273 https://qiita.com/sho_U/items/3b01edcc49efe9713bb5 h…

■ESLintとは ESLintはJavaScriptやTypeScriptなどの静的解析ツールです。ESLintを導入することで、単純な構文エラーはもちろん、プロジェクト固有のコーディング規約（スタイルガイド）を定義することができます。複数人で開発するようなプロジェクトでも、…

debugger 文は、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、この文は効果がありません。 ＜参考URL＞ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/d…

async/await/fetchでの非同期通信を、さらに記述を短くできるライブラリ。 まずは以下でインストールできる。 https://yarnpkg.com/package/axios yarn add axios Reactのコンポーネントにインポート import axios from 'axios' Typescript用のコンポーネン…

■Array.map 参考URL：https://tcd-theme.com/2021/07/javascript-map.html パターン1：基本形 コールバック関数の引数には、値・インデックス・配列の最大3つの引数を記述することが可能。 arr.map((value, index, array) => { 実行したい処理 }); パターン2…

新しいシステム・サービスを作る時の流れ 1. インストール済みのフォルダにアクセス cd Auto-GPT 2. autogptターミナルで Python モジュールを実行 ./run.sh https://github.com/Significant-Gravitas/Auto-GPT/blob/master/docs/usage.md https://docs.kana…

1.基本編 基本の質問の法則 役割を与える プロのエンジニア、ベテランアドバイザーなど 1回のやりとりで終わらず、段階的にやりとりをした方が品質が高まる 追加質問 ステップ2で具体的なコードを3つ教えて下さい 長い回答 続きを書いてください 問い合わせ…

さくらインターネットのメールが迷惑フォルダ・スパム扱いになる件対策 https://blog.systemjp.net/entry/2018/11/14/183824 送信ドメイン認証（SPF / DKIM / DMARC）の仕組みと、なりすましメール対策への活用法を徹底解説https://ent.iij.ad.jp/articles/1…

[ ] Route::get('/niniNoRoute', [NiniNoControllerName::class, 'niniNoMethodName']); と、ファイル上部へ use App\Http\Controllers\NiniNoControllerName; を入力。 [ ] php artisan make:controller TestController [ ] app/Http/Controllers 配下 へ、…

https://pgmemo.tokyo/data/archives/1426.html php artisan storage:link これがないと、img srcがうまく動かなかった。 ストレージ配下のファイルを取得・削除 https://mutimutisan.com/use-storage

新たな環境で sudo curl -s https://laravel.build/dev_vol1 | bash エイリアスの登録。 alias sail="./vendor/bin/sail" sail up -d で確認 コンテナへの接続 sail shell コンテナリストの表示 sail ps MySQLへの接続確認 sail mysql 念の為、データベース…