自動化無しに生活無し

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

  • 【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 ...
  • 【Wordpress】日本語タイトルで404になる問題はパーマリンクを修正して日本語URLをやめる

    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: Wordpress tips
    Wordpressをインストールして、日本語タイトルの記事を追加すると、このように、404 Not Foundになってしまう。 こういう時は、URLに日本語が含まれているからエラーになってしまう。パーマリンクを修正すると良いだろう。 デフォルトではカスタム構造になっているので、日本語が混ざると404になることがあるようだ。 ...
  • Ubuntu 22.04 LTS でTakaoフォントをインストールして行間を詰める。

    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: Ubuntu tips
    Ubuntu22.04にて日本語版を使用していると、これまでのUbuntuと違って、ターミナルの行間が異常に広いことがわかる。 理由はTakaoフォントがデフォルトでインストールされていないから。 ここからインストールできる。 インストールが完了すると、このように22.04でも行間を狭くできる。 Firefox にて規定に戻す ただ、これだけだと、Firefoxの行間と文字サイズが小さくなってしまうので、 Firefox のフォント指定 ...
  • 【BeautifulSoup】imgタグをスクレイピングして画像をダウンロードする

    DoS攻撃になってしまうので、ダウンロードのたびに1秒待つようにしたほうが良いだろう。 import requests,bs4,time result = requests.get("https://noauto-nolife.com/") soup = bs4.BeautifulSoup(result.content, "html.parser") elems = soup.select("img") count = 0 for elem in elems: url = elem.get("src") result = requests.get(url) #バイナリで書き込み with open(str(count)+".png", "wb") as f: f.write(result.content) count += 1 #1秒待機する(DoS攻撃になってしまうため) time.sleep(1) ...
  • 【BeautifulSoup】属性を取得する【class,src,valueなど】

    BeautifulSoupにて、属性を取得する。 import requests,bs4 result = requests.get("https://noauto-nolife.com/") soup = bs4.BeautifulSoup(result.content, "html.parser") elems = soup.select("img") for elem in elems: #src属性を取得(文字列型) print(elem.get("src")) #alt属性を取得(文字列型) print(elem.get("alt")) #属性値が複数なら、リストで取得できる print(elem.get("class")) #存在しない属性はNoneが返ってくる print(elem.get("hoge")) ...