自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

フロントサイド

  • 【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 = ""; ...
    続きを読む

  • よく出るReactのエラー一覧
    textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...
    続きを読む

  • 【HTML】inputタグで画像を複数枚指定する【multiple】
    画像を複数枚指定できるようにする。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file" multiple> <input type="submit" value="送信"> </form> このフォームで指定された画像は、下記のように同じname属性の値のフォームが複数存在する状態と同じ。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <!-- 略 --> <input type="submit" value="送信"> </form> そのため、例えばDjangoでは .getlist() を使って取り出す。 request.FILES.getlist("content") ...

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

  • GitHubからクローンしたReactを動作させる方法
    Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...

  • 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> 結論 ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい ...
    続きを読む

  • 【JavaScript】うるう年も考慮した年月日のselectタグを作る【検索時に】
    前に作った、jQueryの年月日検索の作りが甘かったので、JavaScriptで作り直した。 JavaScript window.addEventListener("load" , () => { // 日付入力欄の初期化。 const now = new Date(); const range = 10; const now_year = now.getFullYear(); const now_month = now.getMonth() + 1; const now_day = now.getDate(); const years = document.querySelectorAll("[name='year']"); const months = document.querySelectorAll("[name='month']"); const days = document.querySelectorAll("[name='day']"); const ini = '<option value="">--</option>'; // スプレッド構文を使用して配列に直し、イベントをセットする。 // 年月日 全ての要素にオプションを追加している。 for ( elem of years){ elem.innerHTML = ini; for (let i=now_year-range;i<now_year+range;i++){ if (i===now_year){ elem.innerHTML += `<option value="${i}" selected>${i}年</optio ...
    続きを読む

  • テキストエリアに入力時に、Tabキーを押してタブを入力する【マークダウンやコードの入力に有効】
    直接コードを入力する場合に有効。 <!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> <textarea id="textarea"></textarea> <script> const textarea = document.querySelector('#textarea'); textarea.addEventListener('keydown', function (e) { if (e.key === 'Tab') { // デフォルトの動作（フォーカスの切り替え）を防止 e.preventDefault(); // カーソル位置の前と後を取得 const start = this.selectionStart; const end = this.selectionEnd; // カーソル位置にタブ文字を挿入 const tab = '\t'; this.value = this.value.substring(0, start) + tab + this.value.substring(end); // カーソル位置を調整(タブを入力した後にカーソルを移動) this.selectionStart = this.selectionEnd = start + 1; } }); </script> </body> </html> 動かすとこうなる 半角スペース4文字分にするには？ <!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> ...
    続きを読む

  • 【JavaScriptカレンダー】fullcalendarを使ってみる【ライブラリ】
    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> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js"></script> <script> //ページが読まれたときに下記を実行 document.addEventListener('DOMContentLoaded', function() { //カレンダーの要素を取得 const calendarEl = document.getElementById('calendar'); // オブジェクトを作成 FullCalendar.Calendar() を実行。引数として要素と表示するカレンダーの設定 const calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { title : 'イベント1', start : '2023-05-01' }, { title : 'イベント2', start : '2023-05-05', end : '2023-05-07' }, { title : 'イベント3', start : '2023-04-09T12:30:00', allDay : false // will make the time show } ] }); //カレンダー ...
    続きを読む