自動化無しに生活無し

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

JavaScript

  • 【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 %} ...
    続きを読む

  • Javascriptでクリックした時、要素内文字列をクリップボードにコピーさせる
    よく見かける、JavaScriptでクリックした時、コピーするアレを再現する。 ソースコード <!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> <style> pre { background:black; padding:0.5rem; overflow:auto; position:relative; } pre code { color:#0fc; } .copy_button{ user-select: none; display:inline-block; position:absolute; top:0; right:0; color:white; background:black; cursor:pointer; margin:0.25rem 0.75rem; padding:0.25rem 0.5rem; border:solid 0.1rem white; border-radius:0.5rem; transition:0.2s; } .copy_button:hover{ background:#0fc; color:black; } .copy_button:active{ background:black; color:white; } </style> </head> <body> <pre><code>console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");</code></pre> <script> const pre_elems = document.querySelectorAll("pre"); // コピー用のボタンを配置する。 for (let pre_elem of pre_elems ){ pre_elem.innerHTML += '<span class="copy_button">Copy</span>'; } const copy_buttons = document.querySelectorAll(".copy_button"); for (let copy_button of copy_buttons){ copy_button.addEventListener("click" , (event) => { const code = event.currentTarget.closest("pre").querySelector("code"); if (navigator.clipboard && code){ navigator.clipboard.writeText( code.textContent ); } }); } </script> </body> </html> 結論 ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい ...
    続きを読む