自動化無しに生活無し

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

tips

  • 【JavaScript】Enterキーが押されたときにイベントを実行する【.addEventListener('keydown')】
    Enterのキーコードは13なので、イベント引数のeからkeyCodeを取り出す。 <!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="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 ){ console.log("Enter"); } }); </script> </body> </html> 他のキーと組み合わせて発火させるには？ 例えば、ShiftキーとEnterキーの組み合わせの場合、こうなる。 <!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="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 && e.shiftKey ){ console.log("Enter"); } }); </script> </body> </html> ...

  • JavaScriptで動的に増減する要素に対してイベントを発動させる【Vanilla.js】
    動的に増減する要素に対して、以下のようなやり方ではイベントをセットすることはできない。(クリックして追加されたあと、ボタンをクリックしても追加はされない。) <!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> <button class='test'>test</button> <script> const test = document.getElementsByClassName("test")[0]; test.addEventListener("click", () => { document.body.innerHTML += "<button class='test'>test</button>"; }); </script> </body> </html> jQueryではこのようにするが <!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://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class='test'>test</button> <script> $(document).on("click", ".test", () => { $("body").append("<button class='test'>test</button>"); }); </script> </body> </html> Vanilla.jsではこのように書く <!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> <button class='test'>test</button> <script> //動的 ...
    続きを読む

  • 【Ubuntu22.04】スクリーンショットのショートカットキーを修正する
    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: ubuntu tips
    Ubuntu22.04は問題が多い。 例えば、20.04まではPrintScreenキーを押したらすぐにPCの全画面のスクリーンショットを撮影してくれたが、Screenshot Toolという機能により、すぐにスクリーンショットが撮れない。 そこで、Ubuntuの設定からキーボードのショートカットキーを修正し、この問題を解決する。 『設定』→『キーボード』→『ショートカットの表示とカスタマイズ』を選ぶ。 ス ...
    続きを読む

  • 【Ubuntu】最新版PHPがインストールできるようにリポジトリを追加する
    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: Ubuntu PHP tips
    このリポジトリを前もってインストールしておかなければ、最新(2023年1月時点)のPHP8.1がインストールできない sudo apt-add-repository ppa:ondrej/php 参照元 https://www.itzgeek.com/how-tos/linux/ubuntu-how-tos/how-to-install-php-8-0-on-ubuntu-20-04-ubuntu-18-04.html 背景 GitHubからDLしたLaravelプロジェクトを手元で動かすため、 composer update を実行したものの、以下のエラーが出た。 Loading composer repositories with package information Info from https://repo.packagist.org: #StandWithUkraine Updating dependencies Your requirements could not be resolved to an installable set of packages. Problem 1 - Root composer.json requires simplesoftwareio/simple-qrcode ^4.2 -> satisfiable by simplesoftwareio/simple-qrcode[4.2.0]. - simplesoftwareio/simple-qrcode 4.2.0 requires ext-gd * -> it is missing from your system. Install or enable PHP's gd extension. Problem 2 - laravel/cashier[v14.6.0, ..., 14.x-dev] require moneyphp/money ^4.0 -> satisfiable by moneyphp/money[v4.0.0-beta1, ..., v4.1.0]. - moneyphp/money[v4.0.0-beta1, ..., v4.1.0] require ext-bcmath * ...
    続きを読む

  • 【Laravel】GitHubからダウンロードしたプロジェクトを動作させるには？
    GitHubにプッシュされているLaravelプロジェクトをDLして動かすには別途手順を踏む必要がある。 前提 Ubuntuを使用している場合、必要なPHPパッケージが既にインストールされているかをチェックする sudo apt install -y php8.1-cli php8.1-common php8.1-mysql php8.1-zip php8.1-gd php8.1-mbstring php8.1-curl php8.1-xml php8.1-bcmath php8.1-sqlite3 もし、これでパッケージが見つからないと表示される場合は、リポジトリの追加がされていない状況である。 下記コマンドを実行して、再度↑のコマンドを実行する。 sudo apt-add-repository ppa:ondrej/php GitHu ...
    続きを読む

  • 【React】リストをレンダリングする時は、key属性を付与する【Warning: Each child in a list should have a unique 'key' prop.】
    例えば、以下のような配列があったとする。 const topics = ["aaa","bbb","ccc"]; この配列をレンダリングする時、このようにしてしまうと return ( <> { topics.map( (topic) => { return ( <div className="border">{ topic }</div> ); }) } </> ); この警告が出る。 なぜ『Warning: Each child in a list should have a unique “key” prop.』と警告が出るのか？ Reactで配列をレンダリングする際にkey属性を指定しないと、無駄なレンダリングが発生してしまい、パフォーマンスが低下するから。 例えば、key未指定で3つのデータがレンダリ ...
    続きを読む

  • 【React】警告文の『Warning: ReactDOM.render is no longer supported in React 18 』の対処法【createRootを使用する】
    【React】Helloworldの仕組みの解説にて、 import ReactDOM from "react-dom"; const App = () => { return <h1>HelloWorld</h1>; }; ReactDOM.render(<App /> , document.getElementById("root")); などと書いたが、これでは以下のような警告が出てくる。 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 『ReactDOM.render()は今後使われなくなるから、createRootを使用しましょう』という意味。 よって、以下のように書き換えると、この警告は対処できる。 import React from "react"; import ReactDOM from "react-dom/client"; const App = () => { ...
    続きを読む

  • 【React】閉じタグがないHTML要素は/(スラッシュ)をタグの末尾に書く【inputタグ、imgタグ等】
    Reactでは、閉じタグがないHTMLを書く時は、以下のようにする。 export const App = () => { return ( <> <input type="button" value="送信" /> </> ); } このように /がないと、エラーになってしまう点に注意。 export const App = () => { return ( <> <input type="button" value="送信"> </> ); } これはAppを呼び出すときも同様である。<App>としてしまうとエラーになる。 // React import ReactDOM from "react-dom"; import { App } from "./App"; ReactDOM.render(<App /> , document.getElementById("root")); 結論 閉じ ...
    続きを読む

  • 【Django】createメソッドを使用して、新規作成する【バリデーションしない点に注意】
    .create()を使うことで手軽に新規作成ができる。 Model.objects.create() 40分Djangoを元に組むとこうなる。 from django.shortcuts import render,redirect from django.views import View from .models import Topic class IndexView(View): def get(self, request, *args, **kwargs): # .create()を使うことで.save()を使わなくても新規作成ができる。返り値は新規作成したモデルオブジェクト topic = Topic.objects.create(comment="これはテストです。") print(topic) # バリデーションまではされない点に注意。 topic ...
    続きを読む

  • 【Python】def関数のアロー(->)はアノテーション
    例えば、以下の関数があったとする。 def test(name:str) -> str: return name print( test("taro") ) print( test(12) ) これは文字列を受け取って文字列を返す関数である。 ただし、上記のように文字列型ではない型を受け取っても正常に動作はする。 あくまでも注釈として利用することができる。関数の機能自体に影響はない。 参照元 https://docs.python.org/ja/3.6/library/typing.html https://magazine.techacademy.jp/magazine/46675 https://program-shoshinsya.hatenablog.com/entry/2020/09/09/230633 ...