自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

フロントサイド

  • RAG用の手動チャンクUIのたたき台をJavaScriptで作ってみた
    RAG開発時、チャンクを自動的に行っているようではセマンティックな埋め込みベクトル検索などは厳しい。 そこで、チャンクサイズを手動で設定できる余地を作る。 今回はそのたたき台となるJSとHTMLを用意した。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Chunk Editor Sample</title> <style> body{ font-family:sans-serif; margin:30px; } #editor{ border:1px solid #999; padding:15px; min-height:180px; white-space:pre-wrap; user-select:text; } </style> </head> <body> <h2>チャンクエディタ試作</h2> <div id="editor"> 今日は良い天気です。 明日は雨です。 明後日は晴れです。 </div> <br> <button id=" ...
    続きを読む

  • PySide6のQtを使ってGUIアプリを作る
    PythonでもGUIアプリは作れる。 標準モジュールのtkinterと違い、より高度なものを作れる。 【関数】クリックで1ずつ増える 基本のボタン押下で1ずつ増えるコード from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton app = QApplication([]) counter = 0 def click_counter(): global counter counter += 1 button.setText(f"{counter} 回押しました。") print(counter) window = QMainWindow() window.setWindowTitle("テストウィンドウ") button = QPushButton(f"{counter} 回押しました。") button.clicked.connect(click_counter) window.setCentralWidget(button) window.resize(300, 200) window.show() app.exec() このコードではクラスを使わ ...
    続きを読む

  • 【React】値が変わっても再レンダリングをしないuseRefとuseMemoの違い【デバウンス向けなのは？】
    入力欄に入力をするたび発火をする時、Stateに保存し続けると頻繁に再レンダリングが発動してパフォーマンスが落ちる。そこでデバウンスを採用する。 デバウンスしてキー入力の度にイベントを発火し続けないようにする【再レンダリング地獄対策】 このデバウンスをReactで実装し、setTimeoutのオブジェクトを記録するには、useRefが正解。 同じように値が変わっても再レンダリングをしないhookとしてu ...
    続きを読む

  • デバウンスしてキー入力の度にイベントを発火し続けないようにする【再レンダリング地獄対策】
    ReactはStateの変化で再レンダリングをする仕様である。 Stateの高頻度な変更は、再レンダリングを頻繁に発生させ、表示が遅くなると言った問題が起こる。 この問題を防ぐためにも、キー入力の度にStateを書き換えるのではなく、最後のキー入力が終わって1秒経ってからStateを書き換えるという仕様に仕立てる。 このしくみをデバウンスという。 このデバウンスのしくみはsetTimeoutの操作で簡単に ...
    続きを読む

  • 【React】Contextとカスタムフックでログイン・ログアウト、認証状態を扱う
    Reactで全てのコンポーネントでStateや関数を扱いたい場合がある。 propsを使う場合はバケツリレーになってしまい、見通しが悪くなる。 そこで、Contextを使い、全コンポーネントでStateや関数を使えるようにする。 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する 更に、カスタムフックを使えば呼び出しやすくなる。 src/AuthContext.jsx まずはcreateContextで、コンテキ ...
    続きを読む

  • 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プロジェクトをつくる
    npx create-react-app frontend このコマンドでreactプロジェクトを作ってきたが、もうcreate-react-app はもう使われなくなったようだ。(2023年春時点から) そこで、Viteを使ってReactプロジェクトをつくる。 Viteとは？ Viteは、JavaScriptフレームワーク用のビルドツールである。Vite(フランス語で高速の意味)の名の通り、非常に高速。 ESモジュールで必要な部分だけオンデマンドでロードでき ...
    続きを読む

  • npm で Fontawesomeを使う
    npm install @fortawesome/fontawesome-free これでfont-awesomeの最新版がインストールされる。後は、App.jsに下記を追加する。 import '@fortawesome/fontawesome-free/css/all.min.css'; importした後、JSXに、 <i className="fa-regular fa-square-check"></i> を追加する。 ちなみに、下記では旧版がインストールされてしまう。 npm install font-awesome ...

  • npm install --save パッケージ名 の--saveは必要か？
    npm install --save パッケージ名 この–saveで、package.jsonにパッケージ名を記録することができる。 ただし、–saveオプションは、npmのバージョン5からデフォルトで有効になっている。 故に、npmバージョン5で、特に設定を触っていない場合は、あえてつける必要はない。 npm install パッケージ名 でよい。 よって、タイトルのnpm install --save パッケージ名 の--saveは必要か？ はnpmバージョン5以 ...
    続きを読む