自動化無しに生活無し

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

JavaScript

  • Ubuntuにnode.jsを手動でインストールする【tar.xz ファイルの解凍と】
    https://nodejs.org/ja Nodeの公式サイトにアクセスする。 最新版のファイルをDLして、 https://nodejs.org/dist/v22.14.0/node-v22.14.0-linux-x64.tar.xz ファイルを解凍する。 tar -xJf node-v22.14.0-linux-x64.tar.xz オプションの x は解凍。 J は xz圧縮形式の解凍 f はファイル指定。 cd node-v22.14.0-linux-x64 回答したファイルをすべて /usr/local/ に配置する。 sudo cp -r * /usr/local/ ...

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

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

  • DjangoでWebSocketを使って、チャットサイトを作る
    django-channelsを使ってWebSocketを実現させる【チャットサイト開発に】 ここで、チャットサイトを作ったが、ページリロードで全て消えてしまう。 チャンネルレイヤーにメッセージを与えるだけでなく、DBにも記録するように仕立てた。 consumers.py import json from channels.generic.websocket import AsyncWebsocketConsumer from asgiref.sync import sync_to_async from .forms import ChatLogForm from django.utils import timezone class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name await self.channel_layer.group_add( self.room_group_name, self.channel_name ) await self.accept() async def disconnect(self, close_code): await self.channel_layer.group_discard( self.room_group_name, self.channel_name ) async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json['message'] chat_log = await self.save_chat_log(message) if chat_log == None: return False local_created_at = timezone.localtime(chat_log.created_at) created_at_str = local_ ...
    続きを読む

  • DjangoでServerSentEvents(SSE)とローカルメモリキャッシュを使い、リアルタイムでDB内の情報を表示する
    【前置き】Djangoでリアルタイム通信する場合 DjangoでDB内の情報をリアルタイムで表示させる場合、 ポーリング Server Sent Events Web Socket この3つが候補に挙がる。 ポーリングはシンプルではあるが、リクエストを送らない限り、情報は得られない。 【Django】Ajax(jQuery)でロングポーリングを実装させる【チャットサイトの開発に】 WebSocketは実装難度が高い。 【Django】channelsを使ってW ...
    続きを読む

  • 【JavaScript】awaitとasyncの違い【非同期処理のコールバック地獄対処】
    【前提知識】同期処理と非同期処理とは 同期処理とは、 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が使えないときに】
    サーバー側にデータを送信しない場合、セキュリティ上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 = ""; ...
    続きを読む

  • 【Django】任意の順番で並び替えて表示させる【Sortable.js + FetchAPI 】
    データを一覧で並べる時、並び順を任意に変更させたいときがある。 そういう時、sortable.jsを使えば良い。 JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】 しかし、並び替えた順番をDBに記録する場合は、別途対応が必要だ。 モデルに並び替えの順番を記録するフィールドを追加 並び替えた順番を送信する(FetchAPIによるリクエスト) 別途ビューを作り、並び替 ...
    続きを読む

  • 【jscolor】カラーピッカーを実装できるJavaScriptライブラリ【シンプル】
    例えば、投稿した内容に色をつけたいというとき。 通常は、type="color"のinputタグを使う。 <input type="color" name="color"> だが、これはブラウザごとに見た目が大きく異なる。しかも見た目があまりよろしくない。 そこで、以下を考慮して、JavaScriptのライブラリを選定した。 無料 フォームの見た目が良い 扱いやすい jQueryに依存していない 実装が非常にシンプルでわかりやすい コピペですぐに使えるジェ ...
    続きを読む

  • 【Django】JavaScriptのfetchAPIでリクエストを送る
    XMLHttpRequest(XHR)はAjaxの初期のAPIでコードが長くて複雑。jQuery.ajaxは昨今のjQuery離れが深刻。 では、何でリクエスト送信機能を実装すれば良いか。 FetchAPIである。 軽量で簡潔に書ける上に、CORSに対応しており、なおかつインストールは不要。 本記事では、DjangoでFetchAPIを使ってPOSTメソッドのリクエストを送信してみた。 テンプレート {% load static %} ...
    続きを読む