Laravel＋Angular連携

## 初めに
前回「[Angularの導入](https://qiita.com/HITOSUKE/items/5efd1761cb6106cd9074)」ついての投稿よりAngularの導入方法を説明しております。
今回は、Laravel＋Angular連携についてご紹介したいと思います。

### apache、PHP、MySQLのインストールは省略
firewall、SELinuxの設定も忘れずにしましょう。
ブラウザで見れない可能性があります。

# Laravel＋Angular連携

Laravelに必要なものをインストールしていきます。

### [Step1]Composerインストール
①composerダウンロード
　wgetコマンドからcomposerをダウンロードしていきます。

▽コマンド
“`
wget https://getcomposer.org/installer -O composer-installer.php
“`
▽実行結果例
“`
[root@localhost ~]# wget https://getcomposer.org/inst

新しいSNSを作りました。

新しいSNS「Avis」（エイビス）のβ版をローンチします。

新しいSNS「Avis」（エイビス）のβ版をローンチします。

https://avis.city/

AvisとはどういうSNSなのか

• 利用は無料です。
• ログインするけど書き込みは匿名で行われる「半匿名性」のSNSです。
• SNS内の独自信用通貨（AvisCoin）で“言葉の市場”を生み出します。

![phone_3.PNG

Live2D忘備録 ~素のJavaScriptでLive2D使う

バニラJavaScriptでLive2Dを扱う方法です。

サンプルページ
——-

github
———
https://github.com/shizusouth/Live2DSample

以下解説しますが使いたい人は
gitからダウンロードしてローカルサーバーで起動して下さい。
サンプルページでコードと動作を見れます。

以下のようなLive2DデータHiyoriを使いました。
下記URLから桃山ひよりプロ版をダウンロードします。runtimeフォルダの名前をrumtime->Hiyoriにしています。
https://www.live2d.com/download/sample-data/

![Screenshot 2022-09-22 004836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1364047/b54a112a-6974-a0fa-4567-ff1e8949aa22

Reactのコーディング時に使う基本的な技術

# useState

### 概要
変数の状態を変更すると、再描画する仕組みが可能

### サンプル

ボタンを押すたびにdataの値がインクリメントされ、描画されるサンプル

“`js
import { useState } from “react”;

export default function Home() {
const [data, setData] = useState(0);
return setData(data + 1)}>{data};
}
“`


解説

useStateは[変数, セッター関数]といった二つの戻り値を取る。
dataには初期値0が入り、dataの値変更と

EmailJSを使ってクライアント側で完結するフォームを実装する

## 始めに
Reactの勉強がてら、バックエンド処理が不要なお手軽フォームを作ってみたので備忘録として軽くまとめておきます。

## 言語、フレームワーク、ライブラリ
・React
・EmailJS

## EmailJSについて
公式サイト：https://www.emailjs.com/
クライアント側からメールを送信できるようにするライブラリです。単にメールを送信するだけでなく、例えば問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる機能などもあります。月に200通までの送信は無料で、それ以上は段階的な課金が必要となります。ただ、月1000通までは$4/月なので、料金は比較的易しめです。

## メール送信の流れ
1. EmailJSの登録
1. EmailJSのダッシュボードでメールテンプレート作成
1. Javascript側からAPI呼び出し
#### 1. EmailJSの登録
まずはEmailJSのサービスに登録する必要があります。ここでは主に、API KeysとserviceIDの発行と、受信するメールサーバの登録を行います。AP

jsPanel4にてウィンドウリサイズに追従させたい

# jsPanel4 使ってますか？
　相変わらずバニラJS書きしている昨今ですが、ウィンドウ内にフローティングパネルを表示するのに、[jsPanel](https://jspanel.de/)ばかり使っているんです。

https://jspanel.de/

　その上で、なんの工夫もないとウィンドウのリサイズ（最大化も含めて）時に、せっかく表示しているパネルが元の位置に放置されてしまって少し残念でした。
　リサイズ時にオフセット量を踏まえて表示位置を追従させたいと思い、コードを工夫しました。

# 工夫あれこれ

## 自作クラスでのプロパティにpositionを持たせる

“`JavaScript
this._position = { my:’right-top’, at:’right-top’, offsetX: -4, offsetY: 4 };
“`

　こんな感じにpositionを持たせて、ドラッグ操作後にoffsetXとoffsetYを計算して上書きすることを考えます。
　ただ、jspanelのイベント処理がdocumentに対するグローバルなものになるため、あら

WordPress【WooCommerce】セット販売商品の商品画像を表示させるjQuery

①「商品データ」を「グループ化された商品」にする

②「関連商品」の「セット販売商品」「アップセル」に同じ商品を入力

③javascript記述。

＜js概要＞
アップセル商品画像が商品ページの下部に表示されるので、そのa要素をコピーして、セット販売商品にも画像を表示させる

④CSSで整えて完了！

“`javascript
$(function(){

//商品画像横の「セット商品」のIDを取得
let grouped_product_id_nums = [];

$(‘.woocommerce-grouped-product-list > tbody > tr’).each(function(){

//ID名（.ex）”product-1111″を、”post-1111″に変えて配列に追加する

grouped_product_id_nums.push( “post-” + $(this).attr(“id”).slice(8));
});

//先ほど取得した「セット商品」のID番号と一致するclass名”post-11

【JavaScript】if文の中でgotoしたい

こういうコードがあったとする。
これをスッキリとさせたい。（今はa, b, cしかないが、後々d, e, f…などと追加されたとき面倒だから）

“`javascript
if (a.isHoge111) {
a.hoge111();
}
else if (b.isHoge111) {
b.hoge111();
}
else if (c.isHoge111) {
c.hoge111();
}
else if (a.isHoge222) {
a.hoge222();
}
else if (b.isHoge222) {
b.hoge222();
}
else if (c.isHoge222) {
c.hoge222();
}

if (a.isHoge333) {
a.hoge333();
}
else if (b.isHoge333) {
b.hoge333();
}
else if (c.isHoge333) {
c.hoge333();
}
else if (a.isHoge444) {
a.hoge444();
}
else if (b.isHoge444)

[JavaScript]連想配列備忘録(hash in array, object in array, map in array)

## この記事ついて
主に`[{}, {}, {}]`のような構造についての操作の備忘録です。主はいつも忘れてしまうので、手早く探せるように作ります。

## indexを探す
普通探す時は`indexOf`を使うのだが、`[{}, {}]`のような構造な時はfindIndexを使うのが一番手早い。

“`js
// hash in arrayなのでhiaで略称させていだだく
const hia = [
{id: 1, value: “a”},
{id: 2, value: “b”},
{id: 3, value: “c”},
]

hia.findIndex(elem => elem.id === 2) // output: 1
“`
具体的な違いについてはmdn公式ページへどうぞ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

https://developer.mozilla.org/ja/docs/Web/J

JavaScriptによるカンマ区切りプログラム（配列の挿入を使う方法）

JavaScriptによるカンマ区切りのプログラムです。
今回はカンマ区切りの関数(Number(value).toLocaleString)は使用禁止として作成しました。

“`JavaScript

process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
//数字変数
var num = lines[0];
//数値を配列にする
var num1 = num.split(”);
//配列の長さ
const leng = num1.length;
//挿入する配列の位置の変数定義
var

paizaラーニング レベルアップ問題集Aランクレベルアップメニュー JavaScript 座標系での向きの変わる移動

座標系での向きの変わる移動 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_move_boss

JavaScriptで解いてみました。

# 解答例(C++の場合を参考)
各移動の方向LかRをmで受け取って、関数 move に現在の向きと移動の方向を渡し、関数を実行します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const direct = [‘N’,’E’,’S’,’W’];
let dcount = 0;

//移動の関数定義
const move = (D, M) => {
let [LR, add] = [1, 1];

if(M == ‘L’){
LR = -1;
add = 3

JavaScriptのStringについて part3

# 初めに
今回はテンプレートリテラルの使い方をまとめていきたいと思います。

# Template literals(Template strings)
## Basic usage

https://es6.ruanyifeng.com/?search=%E9%81%8D%E5%8E%86&x=7&y=8#docs/string#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2

すでに使い慣れたと思ったけど、実際調べたら別の使い方や応用もあるので色々とメモしたいです。
`HTML`のタグとタグの間空白があっても画面に表示されないのであまり気にしませんでしたが、意識しないうちにそれがバグの原因にあったかもしれないので、`trim()`で空白を排除するのがいいと思います。
“`jsx
let str = `

• first
• second

`.trim()
console.log(str)
/*

• first
• second

React redux-redux-toolkitで確認ポップアップを実装する方法

# React redux-redux-toolkitで確認ポップアップを実装する方法

## まえがき

モーダルポップアップを表示させ、その結果によって処理を変えたい場合があると思います。

confirmメソッドの ように簡単にどこからでも呼べて便利なポップアップを実装方法を共有したいと思います。

もし、改善点などございましたら、コメント・連絡いただけますと幸いです。

## 実装例

javascriptの`confirm`メソッドと同じように呼び出し、使用することを目的とします。

#### サンプルコード

ディレクトリ構造

“`
├──components
| ├──functions
| | └──useConfirmationModalManagement.js
| └──pages
| └──Test.jsx
└──stores
├──Popup.js
└──index.js
“`

Test.js

“`jsx
import React from “react”;
import Button from “@mui/

paizaラーニング レベルアップ問題集Aランクレベルアップメニュー JavaScript マップの判定・縦

マップの判定・縦 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step4

JavaScriptで解いてみました。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map(Number);
//盤面
const board = lines.slice(1).map(line => line.split(“”));

//盤面全てのマスについて調べる
//y座標、行について
for (let i = 0; i < H; i++) { //x座標、列について for (let j = 0; j <

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript マップの判定・横

マップの判定・横 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step3

JavaScriptで解いてみました。

# 解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = lines.slice(1).map(line => line.split(“”));

//盤面全てのマスについて調べる
//y座標、行について
for (let i = 0; i < H; i++) { //x座標、列について

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 盤面の情報変更

盤面の情報変更

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step2

JavaScriptで解いてみました。

解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W , 与えられる座標の数を表す整数 N 
const [H,W,N] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { board.push(lines[i].split("")); } //盤面の与えられた座標の文字を "#" に書き換えた後の盤面を出力 for (let i =

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 盤面の情報取得

盤面の情報取得 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_step1

JavaScriptで解いてみました。

# 解答例
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W , 与えられる座標の数を表す整数 N 
const [H,W,N] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { board.push(lines[i]); } //与えられた座標の盤面を出力 for (let i = 1; i <= N;

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 座標系での規則的な移動

座標系での規則的な移動 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_move_step4

JavaScriptで解いてみました。いくつか解答例を載せましたので、理解しやすいもの、しっくりくるものを参考にしてみてください。

# 解答例1

## 考え方
規則性を考えると、東に1歩、南に１歩、歩く歩数が+１増えて、西に2歩、北に2歩、…となっています。

### 方向

まず、方向について、初め東Eを向いていて南S、西W、北Nの順に変わるので、この順で、移動方向`d = [‘E’,’S’,’W’,’N’]`を作ります。

方向の決め方は、dのインデックス `direction`でします。初期値は`direction = 0`(東向き)です。

方向を変える時が来たら、direction+=1することで、右90度に方向を変えられます。directionが4になったら、また0になるように`%4`します。これで0,1,2,3,0,1,2,3と、4ごとに繰り返されま

マイクロタスクとマクロタスク

## マクロタスク
* マクロタスクはタスクキルと呼ばれているもの
* イベントループで処理が回ってきたら一つずつ格納されているタスクを実行する
“`js
setTimeout
setInterval
requestAnimationFrame
// など
“`
`setTimeout`
一定時間後に1度だけ特定の処理を行う
`setInterval`
一定時間ごとに特定の処理を繰り返す
`requestAnimationFrame`
画面のリフレッシュレート(１秒あたりの描画切り替え回数)に合わせて繰り返されるのでリフレッシュレートに沿って滑らかなアニメーションが実現することができる。

https://ics.media/entry/210414/

この記事のイラストが非常にわかりやすい

60Hzと144Hzのリフレッシュレートの画面があった場合、setIntervalでは固定で再生されるのに対して、requestAnimationFrameはリフレッシュレートに応じたアニメーションが再生される

requestAnimationFrameの利点としては要素の移動やインタラ

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript マップの判定・縦横

マップの判定・縦横 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_boss

JavaScriptで解いてみました。いくつか解答例を載せたので、理解しやすいところ、しっくりくるところを参考にしてください。

# 解答例(上下左右判定)
上下左右ひとつひとつ調べました。

“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W
const [H,W] = lines[0].split(” “).map((num) => Number(num));
//盤面
const board = [];
for (let i = 1; i <= H; i++) { boar