これが一番確かだった。 https://github.com/saltyshiomix/nextron react-draft-wysiwyg https://github.com/jpuri/react-draft-wysiwyg https://www.npmjs.com/package/react-draft-wysiwyg https://www.electronjs.org/docs/latest/tutorial/tutorial-pack…

Webpack環境下でBootstrapを使いながら、SassやJavascriptを使って簡単なフォーム作成 環境構築 npm init で初期化 →ディレクトリを作り、npm initで初期化 →package.jsonをひたすらenterでつくる 必要なnpmをインストール（今回はpug、sassを使う前提） →一…

■stateをオブジェクトとしてまとめて取り扱うプロセス import { useState } from "react"; export default function App() { const [state, setState] = useState({ pip: false, playing: true }); return ( <div className="App"> <p>あああ</p> </div> ); } このようにstateをオブジェクト形…

ディベロッパーツールの「要素」から「プロパティ」をみると、非常に興味深い状態になっていた。

npm install -g @vue/cli でグローバルにvue/cliを入れる vue create (作るプロジェクトの名前) で、vueをインストール開始。 インストール方法を聞かれるので Manually select features を選択 Check the features needed for your project では以下を選択…

インストール & 初期開発画面 npm init vue@latest # セットした内容 ✔ Project name: … vue-project ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for …

■Firebaseへデプロイ Firebaseにログインしていることを確認します。 % firebase login vueアプリケーションをビルド。 % npm run build 最後にfirabaseデプロイコマンドでデプロイしていきます。 % firebase deploy デプロイが完了したらHostingURLにアクセ…

■Bootstrap Vueのインストール 公式サイトよりコマンド入手。 npm install vue bootstrap bootstrap-vue をアプリのディレクトリで実行。 パッケージのインポート。 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' を src/router/index.js にコ…

■Vueのローカル環境構築 npm install -g vue-cl グローバルにvue-cliをインストールする。 cd で作業ディレクトリに移動 vue init webpack [プロジェクト名] でアプリケーション作成用のコマンドを実行 実行すると色々質問されるが、基本全部enterでOK。一応…

■「?」について ◇オプションパラメーター(?) ◇オプショナルチェイニング(?.) ネストされたオブジェクトのプロパティが存在するかどうかの条件分岐を簡単に記述できるOptional chaining(?)。 以下のように「?」をプロパティアクセス時に用いることでnullまた…

TypeScriptではeventにも「型」が要求される。anyでは心許ない... type Props = { onClick: (event: React.MouseEvent<HTMLInputElement>) => void onChange: (event: React.ChangeEvent<HTMLInputElement>) => void onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void onBlur: (event: React.Foc</htmlinputelement></htmlinputelement></htmlinputelement>…

コードに悩む場面の多くが、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…