【Laravel 8.x】LocalでPostgreSQL に接続
LaravelでPostgreSQLを利用してDB接続に当たってのメモを残します。
ユーザー作成
DBを作成するにあたり、ユーザーを作っていない人は作成します。
createuser -P hogesan
DB作成
Laravelでpostgresに接続するに当たり、先にデータベースを作成します。
以下はhogesanというユーザーで、DB名：todo で作成する場合のコマンドです。
createdb todo -O hogesan
上記で作成後、DBeaverなどGUIツールで接続すると分かり易いです。
Laravel側の設定
以上でPostgresSQLの使用準備が整ったので、Laravelのアプリ側で設定に入ります。
database.php
デフォルトのままでOKです
.env
少し弄ります。
DB_CONNECTION=pgsql DB_HOST=127.0.0.1 DB_PORT=5432 DB_DATABASE=todo DB_USERNAME=hogesan DB_PASSWORD=
デフォルトでDBはmysqlになっているので、使用する pgsql に変更。
DB_PORTも 5432 に変更。
DB_DATABASE こちらは先程したDBの名前(todo)に変更。
DB_USERNAME こちらも自分のusernameに変更。
DB_PASSWORD こちらはDB作成時に空でenterしていれば空欄でOKです。
完了
以上で設定が上手くいっていれば、php artisan migrateなどDB周りのコマンドも通るかと思います。 当然ですが、DBをローカルで先に作成しておかないと、↑コマンド(~migrate)が通らないので気を付ける。
【Vue3】ViteでVue3 + TypeScript + Tailwind CSS + Vue Routerの環境をサクッと作成
ビルドツールとしてVue CLIではなくViteを利用してアプリ作成する際のメモ。
VueCLIよりもViteの方がbuildやホットリローディングが早いため、積極的に個人開発で利用していくことにしました。 (後、ミーハーな自分としては新しい技術が使いたいなと...。)
ViteはVueの創作者であるEvan You氏が生み出したビルドツールです。
ViteでVue3 + TypeScriptの環境を作り、Tailwind CSSとVue Routerを導入するまでの手順をメモとして残します。 厳密に言えばViteでTailwindCSSとVueRouterを導入はしませんがご了承ください。
※各種必要なツールは既にinstall済みとして書きます。
1 ビルドコマンドを入力
npm init vite
2 プロジェクト名を入力
✔ Project name: … hoge_app
3 使用するFWを選択
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
> vue
react
preact
lit-element
svelte
4 JSかTSか選択
? Select a variant: › - Use arrow-keys. Return to submit.
vue
❯ vue-ts
5 Done!
Done. Now run: cd hoge_app npm install npm run dev
6 TailwindCSSを導入
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p Created Tailwind CSS config file: tailwind.config.js Created PostCSS config file: postcss.config.js
↑でtailwindcssで必要なtailwindcss.config.js postcss.configの2つのconfig fileが作成される。
・tailwind.cssを作成(@/src/assets/styles/tailwind.css)
// tailwind.css @tailwind base; @tailwind components; @tailwind utilities;
・main.tsでtailwindcssをimportする。
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/styles/tailwind.css";
createApp(App).mount("#app");
・tailwind.config.jsを書き換える
// tailwind.config.js module.exports = { - purge: [], + purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
7 Vue-Routerの導入
npm install vue-router@next
ここの注意点ですが、Vue3では@nextでinstallします。 npm install vue-routerですと、正常に動作しません。
package.jsonを確認
"dependencies": { "vue": "^3.2.6", "vue-router": "^4.0.11" ⇦追加されました },
次に、router/index.tsを作成します。
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/home",
name: "Home",
component: Home,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
こちらで完了です。最後にrouter確認。
App.vue
<template> <router-link to="/" class="px-2">HOME</router-link> | <router-link to="/" class="px-2">ABOUT</router-link> </template>
以上でViteでVue3 + TypeScript + Tailwind CSSの環境をサクッと作成することができました。 個人的にこの環境はVueですとモダンで好みです。
【GitHub】GitHubアカウントを２段階認証にした後、pushできなくなった際の対処
GitHubアカウントを２段階認証にした後、いつも通りgit pushすると、
$ git push remote: Invalid username or password. fatal: Authentication failed for 'https://github.com/***/***.git/'
のように、usernameかpasswordが違うと怒られるようになったのでその際の対処を備忘録として記す。
解決方法
恐らくこのエラーを調べると既に対処法が対処法がたくさん出て来ると思われるが、自分の場合は最終的に
git remote -v
でリモートレポジトリを確認する。
origin https://<username>:<githubパスワード>@github.com/***/***.git (fetch) origin https://<username>:<githubパスワード>@github.com/***/***.git (push)
username後がgithubパスワードになっており、これを２段階認証登録時のtoken(ghp_***)をに変更すると、正常にpushできるようになった。 passwordが２段階認証登録時のtokenに置き換わったと考えられる。
変更方法
git remote set-url origin https://<username>:ghp_***@github.com/***/***.git
以上でtokenがurlに入る。環境によって一概には言えないが、２段階認証後も正常にpushできるようになると思われる。
【JavaScript】switch文による条件分岐について
JSのswitch文についてのメモ。
条件分岐というと、通常if文が用いられているが、switch文を用いた方がスマートに見える場合も多い。
使用例として、今回は３色(金銀白)おみくじで使用してみる。
例１
const omikuji = "silver";
switch(omikuji) {
case "gold":
console.log("世界一周旅行券")
break;
case "silver":
console.log("世界一周旅行券")
break;
case "white":
console.log("ティッシュ")
break;
if文を使うと以下の通り
例２
if (omikuji === 'gold'){
console.log('世界一周旅行券');
}else if (omikuji === 'silver'){
console.log('世界一周旅行券');
}else{
console.log('ティッシュ');
}
比べると、条件分岐と演算子が多い場合、switchを使用した方が可読性が高くスマートに見える。
注意点
switch文で条件分岐させる場合、必ずcase句の最後にbreakを記述する。
そうしないと、switch文の最後まで実行されてしまいバグになる為、基本的にcaseとbreakはセットで使うもの覚える。
defaultについて
defaultをswitch文に組み込むことで、例１で言うと金銀白どの色にも該当しなかった場合(赤)の条件も分岐させることができる。
例３
const omikuji = "silver";
switch(omikuji) {
case "gold":
console.log("世界一周旅行券")
break;
case "silver":
console.log("世界一周旅行券")
break;
case "white":
console.log("ティッシュ")
break;
default "red":
console.log("ハズレです")
)
defaultは通常switch文の最後で書くため、breakを記述する必要がない(以下に続くコードがないため)。
【JavaScript】残余引数について Rest parameters
JSの残余引数についてのメモ。
残余引数とは
ES2015から追加された機能。使用することでより柔軟な関数を作ることができる。 通常、関数において引数は指定した数のみ渡すことができるが、 残余引数を使用すると、不定数の引数を渡すことができる。
使用方法
例１
const book = (...pages) => {
console.log(pages);
}
book(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]
通常の引数と併用できる
残余引数は通常の引数と併用可能。
例２
const book = (title, ...pages) => {
console.log(title);
console.log(pages);
}
book("ハリーポッター",1, 2, 3, 4);
上記では、titleがハリーポッター、pagesに1,2,3,4という配列が渡される。 残余という意味合いでは、単独で利用するより理解しやすい。
注意点
残余引数を利用する場合、単独であれば問題ないが、例２のように複数の引数と併用する場合は、必ず最後の引数で残余引数を指定する必要がある。
つまり、
不可の例
const book = (...pages, title) => {
console.log(title);
console.log(pages);
} // ×
というように、第一引数に残余引数を持ってくることはできない。
【React】Hooksについてカウントアプリを作成して学ぶ
ReactはHooksの扱い方が重要だと感じた。 Railsからweb開発に入っている為、状態管理についてイメージしにくいため、学んだことを記事化する。
React Hooksとは？
version 16.8から新たに追加されたAPI。 Hooksを利用することで、関数コンポーネント(functional component)においても状態管理を行うことができる。
状態管理はカウントアプリを想像すると理解しやすい。 ボタンをクリックすると、数値が1ずつ上がっていく。 Hooksの中の機能の一つである、useStateを利用することで容易に作成できる。
以下がカウントアプリのコード例(component)。
import { React, useState, Fragment } from "react";
const Caluclator = () => {
const [count, setCount] = useState(0);
const countUp = () => {
setCount(count + 1);
};
const countDown = () => {
setCount(count - 1);
};
const countReset = () => {
setCount(0);
};
return (
<Fragment>
<h1>{count}</h1>
<button onClick={countUp}> + </button>
<button onClick={countDown}> - </button>
<button onClick={countReset}> RESET </button>
</Fragment>
);
};
export default Caluclator;
FunctionalComponent, アロー関数で書いている。
const [count, setCount] = useState(0);
これにより、count, setCount共に初期値は0と明示的に宣言している。 ちなみに、count はカウント数、setCountはカウント数を更新する関数だ。
なぜ引数を2つ(count, setCount)入れているかというと、useStateにおいては、state,stateを更新する関数をペアにするからだ。 つまり、今回のアプリではstate=count, stateを更新する関数=setCountとなる。
const countUp = () => {
setCount(count + 1);
};
const countDown = () => {
setCount(count - 1);
};
const countReset = () => {
setCount(0);
};
こちらはカウントアップ(+)、カウントダウン(-)、カウントリセット(RESET)の関数。 setCountの引数にcount+1, count-1と入れることで、現在のcountの数値からそれぞれプラス、マイナスされる。 countResetではsetCount(0)とすることで、強制的に0に戻す。
return (
<Fragment>
<h1>{count}</h1>
<button onClick={countUp}> + </button>
<button onClick={countDown}> - </button>
<button onClick={countReset}> RESET </button>
</Fragment>
);
こちらのコードはreturnにより返却されるモノ。 countUp, countDown, countResetを呼び出し、ボタンを表示させる。
以上がHooksを利用したカウントアプリが完成した。
小ネタ：コード末尾のexport文を消す？
上記コード例では、末尾で
export default Caluclator
と、exportしているが、これは消すことができる。
const Caluclator = () => {
...
を、
export default function Caluclator {
...
と、予め宣言することで、末尾にexportを書く必要がなくなる。
【React】Fragmentで不要なdivタグを消す
Reactではreturnの後で必ず一つのタグでwrapsされている必要がある。
example)
import React from 'react';
export const Users = () => {
<div>
<h1>Hello, world!</h1>
</div>
}
このようにdivでラップすると、html上でもdivタグが表示され、スマートではないと思っていた。
調べたところ、「Fragment」という便利な機能がやはり備わっていた。 使用方法としては単純で、Fragmentでwrapするだけ。こうすることで、HTML上で不要なタグ(div)が表示されず、よりスマートになる。
import React from 'react';
export const Users = () => {
<Fragment>
<h1>Hello, world!</h1>
</Fragment>
}
Fragmentは短縮できる
Fragmentは更に短縮できる。と言っても
<Fragment> </Fragment>
を、
<> </>
にするだけだ。
しかし、個人的には知らない人がコードを見ると何じゃこれってなる為、
