フロントサイド
setStateする時、直接値を書き換えてはいけない
setStateをする時、こんな風に直接値を書き換えていないだろうか？ const handleToggle = () => { setToggle(!toggle); } state変数がプリミティブ型の場合、このsetToggleにより、再レンダリングは発生する。 しかし、オブジェクト型の場合、Stateが値の変更を検知できず、再レンダリングは発生しない。 const handleProfile = (e) => { profile[e.target.name] = e.target.value; setProfile(profile); // この方法では再レンダリングは発生しない。 } オブジェクト型の場合、このようにsetState関数内で処理をす ...npm で Bootstrap を使う
npm install bootstrap App.jsに以下を追加する。 import 'bootstrap/dist/css/bootstrap.min.css'; 後は、使いたいコンポーネントで <header className="bg-primary text-white">簡易掲示板</header> などとすれば良い。 なぜ @fortawesome/fontawesome-free 、 なぜ bootstrap ？ 先に、fontawesomeをインストールしたときは、 npm install @fortawesome/fontawesome-free とした。@がついている。 これはスコープと言い、名前の衝突を避けるためにfontawesomeの開発会社、fortawesome社がつけている。(ミススペ ...create-react-app コマンドはもう使えないので、ViteでReactプロジェクトをつくる
npm で Fontawesomeを使う
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: npm tips fontawesome
npm install --save パッケージ名 の--saveは必要か？
ReactでFullcalendar.jsを使う
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: react fullcalendar 備忘録
インストール npm install @fullcalendar/react @fullcalendar/daygrid ソースコード import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import { useState, useEffect } from 'react'; const App = () => { const [events, setEvents] = useState([]); useEffect( () => { setEvents([ { title: 'event 1', date: '2024-12-01' }, { title: 'event 2', date: '2024-12-02' } ]); }, []); // FullCalendarに events 引数を与える。Stateで管理する。 return ( <main> <div className="container"> <FullCalendar plugins={[ dayGridPlugin ]} initialView="dayGridMonth" locale="local" events={events} /> </div> </main> ) } export default App; 考察 今回は、useEffectでイベントを取得したが、実践ではfullcalendar.jsのeventSourceを使うほうが良いだろう。 なぜなら、useEffec ...Reactベースの静的サイトジェネレーターGatsbyを使う
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: 追記予定 静的サイトジェネレーター React
【JavaScript】awaitとasyncの違い【非同期処理のコールバック地獄対処】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips
【前提知識】同期処理と非同期処理とは 同期処理とは、 console.log("1"); console.log("2"); console.log("3"); このように上から順に実行される処理のことを言う。 一方で、非同期処理とは console.log("1"); setTimeout(() => { console.log("2"); }, 1000); // 1秒後に実行 console.log("3"); このように、処理の完了を待たずに後続の処理を行うことを言う。 setTimeoutの他に、fetchAPIが非同期処理に当てはまる。 fetchAPIのコールバック地獄に対処する。 例えば、fetchAPIでリクエストを書く時、 fetch(url, { method, headers, body }) .then( (res) => { if ...【JavaScript】localStorageを使ってブラウザにデータを記録する【Cookieが使えないときに】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips
サーバー側にデータを送信しない場合、セキュリティ上CookieではなくlocalStorageを使う。 ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <input id="test" type="text"> <input id="reset" type="button" value="リセット"> <script> const test = document.querySelector("#test"); const reset = document.querySelector("#reset"); // 読み込みされたとき、データがあればテキストボックスにセットする。 const data = localStorage.getItem("test"); if (data){ test.value = data; } // キー入力があるたびにローカルストレージにセットする。 test.addEventListener("change", (event) => { const value = event.currentTarget.value; localStorage.setItem("test",value); }); reset.addEventListener("click", () => { test.value = ""; ...