JavaScript関連のことを調べてみた2022年09月16日

「null」と「undefined」の違いをゲームで楽しく学ぼう！

## はじめに
プログラミングを学習する上で必ず理解が必要となる`null`。
**何もない状態**ということではありますが、いまいちイメージが付きにくいかと思います。

また、`JavaScript`（以下、`js`）では値の1つとして`undefined`があります。**未定義であることを示す値**とされていますがこちらもイメージが付きにくく最初は悩ます存在ですよね…。

オブジェクティブグループでは、社員一人一人の技術力向上を目指し毎月Excel講習、フロントエンド講習といった様々な講習会を行っています。

フロントエンド講習会では受講者の希望や理解度に合わせて講習を行っています。
ロジックコースの初心者向けクラスでは`HTML`・`CSS`・`js`を使って基礎的な「プログラミング」で必要な内容や考え方を学習していきます。過去に`null`と`undefined`についての講義があり、その際に盛り上がったゲームについてを記事とさせていただきます。

## null or undefined ？

:::note warn
– null：定義付けはされているけど、答えがありません

NextJS+ThreeJS+electronでメタバース

## なぜこんな面倒なことをするのか？

通常ゲーム開発をする場合Unityを使いますが、私はJSの勉強のためにあえてUnityもUnrealEngineも使わずにメタバースの開発をやってみます。

## とりあえずhello world

“`js
import React from ‘react’
import {ChakrProvider} from ‘@chakra-ui/react’

export default function Home () {
retrun (

Hello

)
}

“`

次回はこれに3DデータのJSファイルを紐づけていきます。

【JavaScript】配列の最後の要素を取り出すメソッド

次のメソッドを作ってください。

“`javascript
Array.prototype.last = function() {
if (this.length === 0) {
throw new Error(“要素が存在しない”);
}
return this[this.length – 1];
};
“`

簡単に最後の要素が取り出せるようになります。

“`javascript
const hogeArray = [1, 1, 2, 3, 5, 8];
console.log(hogeArray.last()); // 8
“`

How to create Nextron(NextJS + electron) app?

## そもそもNextronとは何なのか

Nextronとはelectron+NextJSの環境を今までより簡単に構築できるようにつくられた(らしい)ツールです。とはいえ私はいきなりこれでやったので今までのやり方をしらないんですけども結構開発がしやすいです。

## プロジェクト作成方法

まずは以下のコマンドを入力

“`
npx create-nextron-app
“`

割と軽めなので回線が良ければすぐ終わります。

そして
“`
npm run build
“`
と入力してビルドします。これをしないとエラーになるのでお気を付けて。通常のelectronだとpackage.jsonとかmain.jsを作成・編集しないとうまく起動しませんが、Nextronは勝手にやってくれるので楽ですね。

んじゃあ

“`
npm run dev
“`
と入力すれば実行できます。

ちなみに起動時は開発者ツールが自動で立ち上がります。メインページはrender/pages/home.jsxとなります。まずはそのファイルを編集して挙動を確かめてみましょ

へっぽこエンジニアが MobX を学ぶ

業務で状態管理ライブラリを使用したアプリケーションを作ることになったので、
`useState` と `useEffect` くらいしか使えない私が気合いで MobX を使ってみる。

# MobX を選んだ理由

* シンプルかつ簡単に状態管理ができるから。
* 身近に得意な方がいたから。
* 本当は Redux を使いたかったけど、難易度が高すぎるとのことで見送り（無念）

# ドキュメントを読んでみる

まずは入門や概要を読んでノリを掴む。


> 1. まず第一に、アプリケーションの状態があります。オブジェクトのグラフ、配列、プリミティブ、アプリケーションのモデルを形成するリファレンス。これらの値は、アプリケーションの「データセル」である。
> 2. 第二に、派生物があります。基本的には、アプリケーションの状態から自動的に計算されるすべての値です。派生値や計算値には、未完成の TODO の数のような単純なものか

DjangoでQuerySetをJSONResponseする

Djangonのモデルから引っ張ってきたQuerySetをそのままJSONで返そうとすると怒られてしまう。
“`python
users = CustomUser.objects.filter(prefecture = ‘yamagata’)
data = {
…
‘users’ : users,
…
}
return JsonResponse(data)

“`

“`terminal
TypeError: Object of type QuerySet is not JSON serializable
“`

## 解決

`.values()`で値を取り出して`list()`でリストに変換。

“`python
users = list(CustomUser.objects.filter(prefecture = ‘yamagata’).values())
data = {
…
‘users’ : users,
…
}
return JsonResponse(data)

“`

`serialize

【エラー】Gatsby.jsをNetlifyへデプロイした時の【npm ERR! code 1】の解決方法【修正】

Gatsby,jsにてコーポレートサイトをローカルで作成し、完成したのでNetlifyへデプロイしようとした所エラーに遭遇。
800行近いエラー分が吐き出されたので最初の部分のみ抜粋。
とりあえずまったくわからないため、最初の部分“`npm ERR! code 1“`で調べてみることにした。

そうするとどうやらnpm(Node.jsのパッケージを管理するシステム)の依存関係が原因でどうやらエラーになってるっぽいので、
まず下記コマンドで依存関係をリストします。
“`bash
npm outdated
“`
そうすると色んなパッケージのリストが表示されます。
それを全て最新にアップデートしていくのですが、公式では1つ1つ“`npm install {package}@latest“`す

Python,Ruby,PHP,Java,JavaScript,Perlの四則演算の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの四則演算の比較

# Python

https://qiita.com/hiroyuki_mrp/items/d7e4c2d75e947ab99caf

# Ruby

https://qiita.com/mat827/items/ee569f6549b83bb954e2

# PHP

https://qiita.com/koala_56/items/7ed631f62cf0f225f5a6

# Java

https://qiita.com/takahirocook/items/748990882f2de7a630a1

# JavaScript

https://qiita.com/_haya_/items/dbe80010a0a8ac9d70b1

# Perl

https://perlzemi.com/blog/

ASP.NET Core WebアプリにJavaScriptを書き込んでも挙動不審、動かない

ASP.NET Core WebアプリケーションにJavaScriptを書き込んでも挙動不審、動かない…。

なぜだ、なぜなんだー？？？

で、ブラウザーに届いているソースを見たら、フレームワークが6つくらいJSを読み込んでいるんだから何かあるんだろうなぁ、と思えてきたので

ごそごそ探したら（何を検索で入れたら出たのか忘れてしまった）

@section scripts { }

でくくるのじゃ、

ということが書いてあった
https://qiita.com/misuzoo/items/2c479060320cdcd67dee
のでやってみた。ら。
動いた function も出てきた。
全部が動くわけでもないのが、書いたコードのバグ入り率を示してもいるが…。

コードは括りましょうって、@{} や @Code{} みたいなものか。

ただ、@Html.Raw() でずらずら書いて動いてしまっていた（のでそれでいいと思っていた）のを @section scripts { } に移してダブルクォーテーションにつけていた￥を外しただけだと、逆に動かなくなっている部分も出た。
.NETは

javascript基本文法

# 文字の連結
“`js
console.log(“3″+”5”); //35が出力される
console.log(3+5); //8が出力される
“`

# 変数の定義
“`js
let name = “にんじゃわんこ”;
“`

# 定数の定義
“`js
const name = “にんじゃわんこ”;
“`

# テンプレートリテラル
“`js
const name = “にんじゃわんこ”;
console.log(`こんにちは、${name}さん`); //バッククォートで囲む
“`
# 等価演算子
“`js
a==b //aとbが等しい
a!=b //aとbが異なる
“`
# 厳密等価演算子
“`js
a===b //aとbが厳密に等しい
a!==b //aとbが厳密に異なる
“`
# and / or
“`js
&& //かつ
||　 //　または
“`

# if文
“`js
const number = 7;

if(number>10){
console.log(“num

【Typescript】スプレッド構文と残余引数（レスト構文）の違い

Typescriptを学習中、スプレッド構文と残余引数（レスト構文）の違いで少し悩んだので、復習も兼ねて投稿します。

## 目次
**■スプレッド構文とは**

**■残余引数(レスト構文)とは**

**■共通点・違い**

**■よく見るスプレッド構文の例と「Typescript」**

## ■スプレッド構文とは
**配列やオブジェクトの中身を展開する。**

同じ配列の中身やオブジェクトの中身を展開して複合するのに便利。

“`javascript
const array: number[] = [1,2,3];

const array2: number[] = […array, 4];
// [1, 2, 3, 4]

const obj = {
name : “sample”,
age : 25,
}

const newObj = {…obj, from: “japan”};
// { “name”: “sample”, “age”: 25, “from”: “japan” }
“`

## ■残余引数(レスト構文)
**複数の要素

【初心者向け】Javascriptで簡単なTodoアプリの作成【addEventListener】

# 本記事の内容
javascriptで簡単なTodoアプリを作ります。
実装手順は以下の通りです。

①Todoを表示・保存
②Todoを削除
③Todoを完了

# 環境
HTML、CSS部分は今回は範囲外とします。
以下の内容は実装済みの前提で記載していきますので、お使いのテキストエディタへのコピペをお願いします。

コードは以下です。
“`html:index.html

[js/ts]取得した文字列が、指定した文字列と前方一致しているかを判別する方法

はじめに
—
「フォームに入力された文字列が〇〇と前方一致している場合のみ処理Aが動く」というような記述がしたく、前方一致しているか判別する方法を調べたので内容を備忘録として残そうと思います。

前方一致かを確認するためには”startsWith()”を使用する
—
“startWith()”というメソッドを使用することにより、前方一致しているか判別することができます。

※厳密に言うと、デフォルトが前方一致で、引数で指定をすれば、判別を開始する位置を変更することができます。

構文
—
下記が構文です。
文字列(str)と指定した文字列(searchStringの箇所で指定)の前方が一致しているかどうかを判別をします。

一致している場合はtrue/一致していない場合はflaseを返します。
~~~ts
str.startsWith(searchString[, position])
~~~

下記が簡単な例になります。

~~~ts
const str = ‘hello world!’;

console.log(str.startsWith(‘hello’));
// tr

#プログラミング #英語 #Javascript #nodejs #glitch # 英単語を覚えたり、思い出すのを早くするツール

本内容を利用した場合の一切の責任を私は負いません。

# 概要
リスニングができるようになるには、英単語の意味を思い出す早さも必要だと思った。
それをトレーニングするツール。
ほんとは見てではなく聞いてで行いたかったが素材が無いため。
一応、英単語を覚えるツールとしても使えると思う。

# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v10.16.0-win-x64
– linq(node.jsのライブラリ)
3.2.4
– multer(node.jsのライブラリ)
1.4.5-lts.1
– jsonwertoken(node.jsのライブラリ)
8.5.1
– async-lock(node.jsのライブラリ)
1.3.2
– csvjson-csv2json(node.jsのライブラリ)
bc644c4428f551

JavaScript 日付をYYYYMMDD, YYYY/MM/DD など区切り文字指定してフォーマットする関数

# 状況によって区切り文字を変えたい
JavaScriptで日付をフォーマットする際に
– YYYYMMDD (区切り文字なし)
– YYYY/MM/DD (スラッシュ区切り)
– YYYY–MM–DD (ハイフン区切り)
– YYYY.MM.DD (ドット区切り)

など状況に応じて区切り文字を変えたいときがあります。
そこで区切り文字を可変で指定できるフォーマット関数を作成しました。

こちらの記事を参考にさせていただいております。
月、日のゼロ埋め(1 → 01) なども解説頂いております。
[日付をYYYY-MM-DDの書式で返す関数 (JavaScript)](https://qiita.com/toshimin/items/5f13c3b4c28825219231)

# 日付

自作一本ノック

こんにちは。
N予備校でプログラミングをせっせせっせと勉強中のふーちんです。
N予備校プログラミング入門コースの「千本ノック」というものを真似して自分も一つ作ってみたので、「一本ノック」です。

# N予備校プログラミング入門コースの千本ノック

N予備校プログラミング入門コースでは、今年「JavaScript 千本ノック」というのが追加されました。
それは簡単に言うと、JavaScriptの文法の問題集です。
演算子について、文字列について、ループ処理について、配列についてなどや他にもたくさんありますが、
それらを一つ一つできるだけ一言で説明し、それらを使って解くことができる問題を用意してあります。もちろん答えもあります。
流石に1000問もないですが、簡単な問題から、少しずつ工夫が必要になってくるので、ものすごく身に付くと思います。
問題の題名やフクロウのつぶやきが面白いなと思ったりもします。
やりたいと思ったあなた、是非ともN予備校に入学しよう～

https://www.nnn.ed.nico/

# 作った問題

簡単な電卓の関数を作る問題です。もともと、引数の数値を

JSのPromiseの基本について調べてみた

## 背景
Axiosを使おうとした際にAxiosのREADMEに「Promise based HTTP client for the browser and node.js」とあり、
そもそもPromiseってなあに？となったためPromiseの概要についてまとめてみました！

※新卒1年目で知識も浅いため、内容には間違いがある場合があります?

## Promiseの基本
そもそもPromiseとは、日本語に訳すと「約束」です。

JSのPromiseも同じで処理における約束を決めるものになります。
つまり　①約束を守った場合、➁約束を破った場合の処理をそれぞれ記述することができるものです。

#### Promiseのステータス
待機状態　　　　　　　⇒　pending
成功（約束を守った）　⇒　resolved
失敗（約束を破った）　⇒　rejected

#### Promiseのインスタンス化
Promiseをインスタンス化する際には、引数に何を入れるかは決まっています！
***▶第1引数にはresolve（約束を守った場合）のコールバック関数***
***▶第2引数には

実習（ポートフォリオサイト作成）

# 初級編

まずは初級編として以下を作成していきます。

https://code-step.com/demo/html/portfolio1/

## ステップ１
すぐにコーディングせずに一度全体を見て、どの部分にどのタグを使用していくかを考えます。

まず、大きく３つに分けることができます。

– ヘッダー
– メイン
– フッター

また、レスポンシブを考慮して、デスクトップ版、モバイル版両方のレイアウトを作成する必要があります。今回はデスクトップ版のレイアウトを基準にページを作成していきます。
※最近はモバイルファーストという言葉もあり、モバイル版のレイアウトを基準にページを作成していくことが推奨されているそうです。⇦Udemyの某e-ラーニング講師が言っていました。

### ヘッダー

– ヘッダー
– モバイル版ではMy W

8.2 基本構文（変数とは、if文, switch文, for文, while文について）補足

# 基本構文を使用して表示を制御してみよう

## if文、for文

if文やfor文を使用して、ボタンを押下することで表示、非表示の切り替わる文字列を実装していきます。

index.html

“`html

visibilityプロパティを使用して表示を切り替える

あいう

8.2 基本構文（変数とは、if文, switch文, for文, while文について）

## 変数とは
プログラミング言語における「値を入れておく箱」のこと

https://wa3.i-3-i.info/word1603.html

### 変数の宣言について

https://techacademy.jp/magazine/14872

実際にjsで書いてみよう

宣言

“`js
// 宣言
var testV = “var”;
let testL = “let”;
const testC = “const”;
console.log(testV);
console.log(testL);
console.log(testC);
“`

再代入

“`js
// 再代入
var testVar = “var宣言”;
console.log(testVar);
testVar = “var再代入”; // 再代入可
console.log(testVar);

let testLet = “le