Posts
【Ubuntu】最新版PHPがインストールできるようにリポジトリを追加する
このリポジトリを前もってインストールしておかなければ、最新(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ビギナーが15分で掲示板アプリを作る方法
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: react スタートアップシリーズ 初心者向け
【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 ...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の高さをブラウザの縦幅全開ま ...