JavaScriptでアプリを作成しました【7】【パックマン】

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【仕様】

##参考サイト
[バニラJavaScript、HTML、CSSでパックマンを構築する|アニア・クボウ]
(https://www.youtube.com/watch?v=CeUGlSl2i4Q)

JavaScriptでアプリを作成しました【7】【パックマン】

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【仕様】

【Rails】コントローラーからjavascriptへパラメータを渡す

# はじめに
・本記事ではコントローラからjavascriptにパラメータを渡す方法を説明します。

## controller→view→javascriptとviewを介してパラメーターを渡すことができます。

まず、コントローラからビューへは、インスタンス変数を使いパラメータを渡します。

“`ruby:/app/controller/books_controller.rb
def index
#パラメータを、インスタンス変数でビューに渡す
@book = ‘コントローラからjavascriptへパラメータを渡す方法’
end
“`

view(ビュー)ではinputタグでtypeをhidden属性にし、valueとして受け取ります。

“`html:/app/views/books/index.html.erb

indexページ

node.js超入門ノート9(Sequelizeでのレコード検索編)

# テーブルを表示する
以下のように修正します。

“`javascript:routes/users.js
const express = require(‘express’);
const router = express.Router();
const db = require(‘../models/index’);

/* GET users listing. */
router.get(‘/’, (req, res, next) => {
db.User.findAll().then(users => {
var data = {
title: ‘Users/Index’,
content: users
}
res.render(‘users/index’, data);
});
});

module.exports = router;
“`
以下のファイルを作成します。

“`html:views/users/index.ejs

Reactコンポーネントに渡される文字列内のURLをリンクにする方法

## 現状
umiJSのcommentにリンクを挿入する
`renderItem={}`内の`comment`タグがチャットメッセージコンポーネントに該当する。
その中の`content`プロパティにメッセージが渡されている。

## 問題点
`item`を受け取って`text`を表示している。
問題はここが全て`string`型で渡されているので、URLを添付してもリンクが繋がらない。

“`JavaScript
// 修正前
{
return (

)
}}
/>
“`

## 実装方針

入力された文字列からURLを検索し変換してから`content`に渡す。
正規表現を用

node.js超入門ノート8(Sequelize導入編)

# 準備
以下のコマンドでインストールします。

“`
npm install sequelize
npm install sequelize-cli
“`

以下のコマンドでsequelizeを初期化します。

“`
npx sequelize-cli init
“`
config.jsonを以下のように修正します。

“`json:config/config.json
{
“development”: {
“database”: “db-development”,
“dialect”: “sqlite”,
“storage”: “db-dev.sqlite3”
},
“test”: {
“database”: “db-test”,
“dialect”: “sqlite”,
“storage”: “db-test.sqlite3”
},
“production”: {
“database”: “db-product”,
“dialect”: “sqlite”,
“storage”:

オンラインゲーム(GunZ)のマップをWEBに移植してみた【Three.js】

### 一週間前の自分： 3dゲームの知識皆無。Three.js使ったことない

### 一週間後（今）：???

ってことでタイトルにもある通り

**GunZ The Duel (or GUNZWEI)** っていう
昔流行ったオンラインTPSゲームのマップをwebに移植してみたので
デモ貼っておきます。
自分は今大学生ですが、昔GunZよくプレイしていました

GunZ, GUNZWEIを愛した人たちに届けばと思ってデモ置いていきます


エピソードとか書こうと思いましたが
**みんなが見たいのは結果の部分**だと思うので先にそれをお見せします

# 移植したデモ、コード

WEBでThree.jsを使ってGunZのマップを描画したものです
![image.png](https://qiita-image-store.s3.ap-north

複数APIへのリクエストをfetch関数で同時実行するプラクティス

# 複数APIへのリクエストをfetch関数で同時実行するプラクティス
## はじめに
JavaScriptでfetch関数を使用して、複数のAPIへのリクエストを同時に実行する際のベストプラクティスを探求していく。
今回は以下の２種類の方法を模索する。

* Promiseオブジェクトで実行
* fetch関数のコールバッグのthenメソッド内で次のAPIへのfetch関数で順次実行

## Promiseオブジェクトで実行
最初はfetch関数の戻り値をPromiseオブジェクトに設定し、実行する方法。

“`JavaScript
var resultList = [];
let processA = fetch(‘https://wwww.aaa.com/bbb’);
let processB = fetch(‘https://wwww.ccc.com/ddd’);
Promise.all([processA, processB])
.then((response) => {return response.json();})
.then((data) => {

FL Studio Edison Script – DTMプログラミング言語探訪

[DTMプログラミング言語探訪](https://qiita.com/aike@github/items/77b3eccc6861de09513a)

# Edison Script

## 概要

波形編集ツールは定型的な操作を自動化するためのスクリプト機能を持っていることが多いです。
FL Studio付属の波形エディタプラグインEdisonもスクリプト機能を持っているので機能や使用方法を説明します。なお、ドキュメントによるとスクリプティング機能はWindows版のみとのことです。
## 用途

– カスタム波形編集機能の作成

作成したスクリプトは、通常の機能と同様にメニューから簡単に呼び出せるため、ツールに新機能を追加する感覚に近いです。
ファイル入力は可能ですが、スクリプトから保存はできないようです。またフォルダ内のファイル一覧も取得できないので、複数ファイルを一括処理する用途には向いていません。

## Fluity Convolver

ちなみにFL Studio付属のIRリバーブプラグインFluity ConvolverでもEdison Scriptを動かすことができま

Google検索したらタイトル長が短かった件

## はじめに

`Googleのコーディング面接で使えるかもしれないKosarajuと …`──Googleで検索すると、このような検索結果がQiitaの記事に表示された。`Kosaraju`と`Tarjan`の両方のキーワードがタイトルとして出て欲しいのに、片方しか出ないことに引っかかった。

`誰でもたった1分で1万円の現金をラクラクGET！ – 消費者庁`──Googleで検索すると、このような検索結果が表示されることを、[ITmedia](https://www.itmedia.co.jp/news/articles/2108/30/news131.html)は記事で公表した。消費者庁が詐欺的なページを公開しているかのようにも見えるということだ。

ITmediaは、Webページのタイトルを生成する新しいシステムを導入したのが原因としたが本当だろうか？ページ内で目立つコンテンツなどを考慮したページタイトルを自動生成するというものだ。

## ページタイトルの自動生成？

> 「誰でもたった１分で１万円の現金をラクラクＧＥＴ！」などとうたい多額の金銭を支払わせる事業者に関す

【デザインパターン】JavaScriptで学ぶBridge

#はじめに
現在デザインパターンについて勉強中です。
今回はBridgeついてまとめました。

https://qiita.com/suzuki0430/items/d44a83c500993a763c1d

https://qiita.com/suzuki0430/items/abbb433fd49e356e8643

#Bridge
Bridgeはクラスの余計な拡張を防ぐために橋渡しとなるクラスを使う、構造に関するデザインパターンの一つです。

例えば、`Circle`クラスと`Square`クラスが存在するとき、描画方法に関する派生クラス`VectorRenderer~`と`RasterRenderer~`を考えると以下のようになります。
このとき、`VectorRendererCircle`

【初学者向け】JavaScriptの『forEach / for of / for in』のまとめ

配列を使い
-for文
-for in
-for of
-forEach
の違いをまとめてみました。

##事前準備

①まずはこのような**配列**を用意します。(添字と混ざらないように奇数にしてます。)

“`js
const arry = [1, 3, 5, 7, 9];
“`

**②変数名は自由につけることが可能**ですが、

**[for文/for in]** の場合は
`iを使用(※index(添字)の意味がある）`

**[for of]** の場合は
`vを使用(※value(値)の意味がある)`

しています。

##①『for文』だと
“`js
for(let i = 0; i < arry.length; i++) { console.log(i); //0 1 2 3 4 (インデックス取得) console.log(arry[i]); //1 3 5 7 9 (インデックスを使って配列の値を取得) } ``` ##②『for in』だと **point: indexが取得できる。ひと手間いるが値が取得で

JavaScriptモジュールシステムのこれまでとこれから

JavaScriptは当初モジュールシステムを持っておらず、実装されるまでに長い時間がかかりました。
その過程で様々な手法が考案され、今なお統一されておらずプロジェクトによって異なる方式を採用しているのが現状です。
本稿ではJavaScriptがここに至った経緯と各種モジュールシステムの概要を紹介し、今後どのようにモジュールを設計していくべきかを考えます。

JavaScriptには複数の言語仕様が存在してとてもややこしいのですが、言語の**仕様を策定する団体**と各種プラットフォームで言語を**実装する団体**が異なる点に注意して読むと理解を助けると思います。

内容に誤りがある場合はご指摘いただけると幸いです。

# 年表

| 年 | 出来事 |
| —— | ———————————————————— |
| 1995年 | Brendan Eichによって**JavaScrip

Node-RED 2系をAzure Web Appsで利用する #noderedjp #azure

## Node-RED 2系をAzure Web Appsで使いたい

最初に、AzureでNode-RED動かしたいなと色々と調べてて動作したのが[こちら](https://github.com/jmservera/node-red-azure-webapp)のやりかたでした。

> https://github.com/jmservera/node-red-azure-webapp

ただ、こちらはv1.0.6で固定されてたので2系にしようとしたらうまくデプロイできず。（まだ検証ちゃんとしてないけど）

Node-REDは最近2系にアップデートされて結構中身が変わってるので2系をなんとか使いたいところ。。。ということで調べてましたが@horihiroさんのリポジトリからうまくいけました。

> [ほりひログ 2018-12-09 （勝手に）続・Azure Web AppでNode-REDを動かす手順](https://uncaughtexception.hatenablog.com/entry/2018/12/09/071216)

## 終わってみると簡単にいけた2系のデプ

【JavaScript】配列のメソッド

#はじめに
こんにちは。
今回は、配列のメソッドの中でも「先頭または末尾の要素を追加/削除するメソッド」に絞ってアウトプットしていきます！

###pushメソッド（末尾に追加）

“`javascript:JavaScript
const numbers = [1,2,3,4];

numbers.push(10);
console.log(numbers); //[1, 2, 3, 4, 10]
“`
pushメソッドは、配列の末尾に要素を追加するので、配列の末尾に`10`が追加されて出力される。

###popメソッド（末尾を削除）

“`javascript:JavaScript
const numbers = [1,2,3,4];

numbers.pop();
console.log(numbers); //[1, 2, 3]
“`
popメソッドは、配列の末尾を削除するので、配列の末尾の`4`が削除されて出力される。

###unshiftメソッド（先頭に追加）

“`javascript:JavaScript
const numbers =

Next.jsで特定ページに認証（ログインチェック）を書けるシンプルな方法

next.jsで特定のページに認証を書ける方法のメモ。
認証を行うAuthコンポーネントを作成し、それで囲めば認証がかかる方法のチェック。

>NextAuthとかのライブラリもありますが、一旦、「素の実装方法」を確認しておきたい。

## やりたいこと

下記のようなフローを作りたい。


## 準備

検証用のプロジェクト差k末井。

“`bash
npx create-next-app next-auth-test
cd next-auth-test
“`

今回は認証の方式（ログインの維持）としてCookieに認証情報を書き込んでそれが有るか、無いかでログイン状態を判断する実装としたいと思いますので、Cookieを

Recoil最低限 Next編 （2021年9月）

NextでRecoilおよびPersist使ってみる。
Create-React-App編は[こちら](https://qiita.com/zaburo/items/e28be44f6b98e36b38c7)をどうぞ。

## やりたいこと・作るもの

ページを移動しても値が維持（共有）され、ページをリロードしても値が（保持したければ）保持されるという機能の検証。


## 準備

### プロジェクトの作成

create-next-appを利用してプロジェクトを作成。

“`bash
npx create-next-app next-recoil-test
cd next-recoil-test
“`

recoilをイ

基礎から学ぶReact/React Hooks学習メモ 1 JavaScript基礎

# JavaScript基礎

## 変数と宣言

– グローバルスコープ・・・どこからでもアクセスできる
– ローカルスコープ・・・関数内からアクセスできる
– 関数スコープ
– ブロックスコープ

“`js
const global = ‘global’;

const sampleFunc () => {
const local = ‘local’;
}
“`

– const 再代入不可
– let 再代入可能（初期化しないとundefinedで初期化される）

## 命名規則

– upperキャメルケース
– コンポーネント名
– クラス名
– lowerキャメルケース
– 変数名
– メソッド名
– プロパティ名
^ スネークケース
– 定数名

## データ型

– undefined
– 型が未定義
– null
– 型は決まっているが値が存在しない
– boolean
– true/false
– string
– 文字列
– number
– 整数、浮動

node.js超入門ノート7(バリデーション編)

# 準備
以下のコマンドでパッケージをインストールします。

“`
npm install express-validator
“`
# バリデーションを使う
以下を修正します。

“`html:views/hello/add.ejs

【初心者向け】webpackの基本構成を紹介(devserverの導入も)

webpackの環境構築をよくやるので、共有と備忘録を兼ねて、初心者の方向けにwebpackの導入を書いてみました。(私も初心者ですが、、)

単にwebpackをインストールするだけでなく、基本的な設定やwebpack-dev-server(定番の開発用サーバー)の導入も合わせてやっていきます。

## ▼前提条件
– **PCにnode.jsがインストールされていること（重要）**
– **cdコマンドなど、基本的なターミナル操作ができること（重要）**
– webpackがどんなものかはなんとなく知っている

webpackがまったく分からんという人は、このあたりを読んでみるのいいかも。

https://ics.media/entry/12140/

https://webpack.js.org/

## ▼私の環境

– OS : Win10 home
– Editor : VScode
– Terminal : bash
– Node.js version : v14.16.1

macOSの人でも手順自体は一緒だと思います（エアプ）あと、npm使ってます。

## ▼