自動化無しに生活無し

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

Posts

  • 【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 ...

  • position:relativeとabsoluteとtransform:translateを使ったセンタリング【どんな画面幅でも中央に配置する】
    例えば、サイトのタイトルなど、どんな状況でも必ず中央に配置したい場合があるだろう。 そういう時は、positionとtransform:translateを使用することで解決できる。 ソースコード まずは下記のソースコードを動かしてもらいたい。 `<!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> body{ /* ブラウザのデフォルトでmarginが付いているので消しておく。*/ margin:0; } .content_area { position:relative; /* content_areaの高さをブラウザの縦幅全開ま ...
    続きを読む

  • 【所要時間3分未満】dockerでWordpressの環境を構築する【docker-compose.ymlを書いて実行するだけ】
    以前、UbuntuにWordpressをインストールする手順を解説した。 UbuntuにWordpressをインストールする【MariaDB+Apache】 しかし、このやり方はもう古いというか遅すぎるらしい。 なぜなら今はdockerが開発の主流だから。 わざわざMariaDBをインストールして、Apacheをインストールして..とやっているようでは環境構築だけで1日が終わる。 dockerであれば3分以 ...
    続きを読む

  • 【Docker】公式チュートリアルを起動して使い方を学ぶ【docker run --name tutorial -d -p 80:80 docker/getting-started】
    dockerをインストールしたものの、使う機会に恵まれない、そもそも運用難易度高すぎで未だにVirtualBoxを使っている。 そういう状況なので、docker公式のチュートリアルを動かすことにした。 公式のチュートリアルを起動する 以下コマンドでOK docker run --name tutorial -d -p 80:80 docker/getting-started コマンドの意味は以下の通り docker [作成+実行] [コンテナ名はtutorialとする] [バックエンドで起動] [ポートは80番(PC側で80番へア ...
    続きを読む

  • 【Selenium】webdriver-managerを使ってPythonコードからChromeドライバーをインストールする
    前もってwebdriver-managerをインストールしておく。 pip install webdriver-manager 下記コードでChromeドライバーが簡単にインストールできる。 from selenium import webdriver from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager driver = webdriver.Chrome(service=Service(ChromeDriverManager().install())) driver.get("https://www.google.com/") どうやらvirtualenvではなくOSに直インストールされるようだ。 ...

  • 【ReactNative + Expo】スマホアプリでHelloWorldをやってみる【iOS、Android両対応】
    ReactNativeを使うことで、スマホアプリが簡単に作れる。 今回はExpoというReactNativeの開発をサポートするフレームワークを使う。 これにより、iOSとAndroid両方に対応したスマホアプリを更に簡単に作ることができる。 流れ Expoをインストールする Expoを使ってプロジェクトを作る スマホにExpo Goをインストールする(デバッグ用) ビルドサーバーを立ち上げ、Expoアプリから読 ...
    続きを読む