JavaScript関連のことを調べてみた

配列の基本

# 初学者の備忘録
初学者の備忘録です。今回は配列の基本編です。

## 配列
値がたくさん入る箱。変数がたくさん入る箱みたいなイメージでOK。
配列を作成するには決まり事があります。

・配列は[]で定義する
・,（カンマ）で区切ること

上記の二つの定義は大切なのでしっかり覚えておきましょう。

## 配列の基本
“`
let 変数名 = [値, 値１, 値２, 値3, ・・・]
console.log(変数名);
“`

上記のコードが基本形になります。変数名を定義してあげてから、今度は配列を定義してあげて[]と,（カンマ）を使用してあげることで配列ができます。値と書いてあるところに変数を入れることも可能です。

“`
let 変数１　= 値１
let 変数１　= 値2
let 変数１　= 値3

let 変数名 = [値, 変数１, 変数２, 変数3, ・・・]
console.log(変数名);
“`

上記のコードのような配列も可能。つまり基本さえ守れば変数でも値でも入ることができるということです。
ここに四則演算もつけることが可能です。

### 配列の要素を

標準入力

# 初学者の備忘録
初学者の備忘録です。今回は標準入力からデータを受け取れるコードを書いていきます。
ただ、機能はしますが理解はまだまだ及んでいないので未完成の記事となっています。ご了承ください。

## 標準入力
プログラムでデータが特に指定されていない場合に、標準的に利用するデータの入力元。つまりユーザがキーボードで入力した値を受け取ってなんらかの処理をプログラミングが実行するということ。

## 標準入力を受け取るコード
“`ruby:標準入力

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

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
// push=最後に出力
lines.push(line);
});
reader.on(‘

ループ処理：for文基本

# 初学者の備忘録
初学者の備忘録です。今回はループ処理：for文基本編です。

## for文
決まった回数繰り返し処理するための構文。ループ処理。

## for文の基本
for文の基本コード
“`ruby:for文
for (条件式に使う変数の初期化処理; 条件式; 条件式に使う変数の値の更新) {
　　//繰り返し処理
}
“`

文章で表すとこれで終了です。()の中に１行で処理を記述できるので、while文よりもすっきりとしたコードになります。
具体例もこのまま記述していきます

“`ruby:具体例
let count = 0;

for (var count = 0; count < 6; count++) { console.log(count); } ``` 上記のコードは変数に０のデータを入れる。０〜５までの間繰り返し出力するという処理になります。count++は＋１つづ足していくという意味で、省略できるので省略した状態です。 繰り返し処理して出力するという基礎ならこれだけで終了です。 ## 最後に while文もfor文も繰り返し処理という

ループ処理：while文基本

# 初学者の備忘録
初学者の備忘録です。今回はJavaScriptのループ処理：while文基本編です。

## while文
指定した条件が満たされている間だけ指定された範囲のコードを繰り返し実行する、ループ処理の制御構文の一つ。

## whileの基本形
まずはwhile文の基本コード
“`ruby:while

// 条件式に使う変数の初期化処理
let 変数名 = 0；

while (条件式) {
// 繰り返し処理
console.log(変数名);
// 条件式に使う変数の値の更新
変数名 = 変数名 + 1;
}
“`

基本コードはこうなります。少し文章で補足を入れると
変数名はなんでもいいです。変数名はデータを入れる入れ物のようなイメージなので好きに決めてください。
最初の１行目は条件式に使用する変数の初期化で、プログラミングは０から考えるので初期化に０を使いました。０でなくても構いません。
１行目で大切なのは条件式がこれから始まる上での`初期値を変数`に入れるということです。

次はwhile文を使用して条件式を設定してあ

なんちゃってブラウザゲームを作った話

## ■はじめに
### 読んだらいい人、読んでほしい人
+ ゲーム作ってみたい方。どうやって作ったの？が気になる方
+ JavaScript触れるから、アドバイスしてやろうというお優しい方

### こんなゲームを作りました↓
直線上に現れる敵をジャンプと攻撃で回避し、ハイスコアを狙うゲームです。


### ゲーム作成のきっかけ
+ プログラマに転職したい　→　何か自分で作ってみよう！　
⇒何が楽しいかな　→　ゲーム？！
と短絡思考で着手しました。

## ■やったこと大雑把に
1. youtubeで動画を見ながら、ゲーム制作の大体の構造を学ぶ
1. テーマ、企画を考える
1. コーディング、プログラミング
1. ゲームバランス整える
1. ビルド
1. 事後作業(github,qitta)

以

画像をリサイズ&クロップしてFirebase CloudStorageにアップロードする

## やりたいこと
Vue.jsで下記の動作を実現する:
1. formから画像をアップロード
2. アップロードした画像のアスペクト比を保ったまま正方形にリサイズ & 円形にクロップ
3. 加工した画像をFirebase ColudStrageにアップロード

画像のリサイズはなんとなくサーバーサイドでやるもの？と思っていたのですが、これくらいの操作であれば、canvasを使えばいけました。

## formから画像をアップロード
Templete内のform部分はこんな感じ。
“`vue:upload.vue

http環境（非https）でのクリップボードへのコピー【JavaScript/TypeScript】

## はじめに

偉大なる本家様は以下になります。
この記事は、以下のページで紹介されているjQueryのコードをTypeScript（+α）に書き換えた記事です。

https://mamewaza.com/support/blog/javascript-copy.html

## 概要

JavaSciptでクリップボードへコピーする際、 `navigator.clipboard`[[1]](https://developer.mozilla.org/ja/docs/Web/API/Navigator/clipboard) を利用することで実現出来ます。
しかしながら、http環境では動作しません。
そこで、 http環境でも動作する`document.execCommand`[[2]](https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand) を利用したコピー方法をフォールバックとして利用します。

このフォールバックなコピーコードが以下になります。

## コード

“`typescript
con

enchant.jsをタッチパネルに対応させるため修正してみた

## 今さらenchant.js？
　GIGAタブレットが全国の小中学生全員に配布されています。市町村によって機種が異なり、Windows、Chromebook、iPadの3種類のどれかになっています。Webアプリであれば、3種類のGIGAタブレット共通に動きます。enchant.jsもWebアプリを作動させるライブラリとして利用できます。しかし、enchant.jsはiPadでは問題なく作動しますが、タッチパネル上の移動イベント（touchmove）を取得できないため、Windows、Chromebookでは作動が不完全になります。
　そこで、touchmoveが作動するように書き換えてみました。これで、過去に作成したenchant.jsを利用したプログラムがGIGAタブレットでも作動可能になります。

×[タッチパネルで操作できない例「とけいの学習」（マウス可、iPadでは作動）](https://kaihatuiinkai.jp/enchantjs/tokei083/ “とけいの学習”)

〇[タッチパネルで操作可能の例「とけいの学習」（マウス可、iPadでも作動）](

海馬社長にカードだけじゃなくてビジネスも教わりたい

# 海馬瀬人のおさらい
海馬瀬人は、アニメ「遊戯王デュエルモンスターズ」に登場するキャラクターです。
主人公の武藤遊戯のライバル的存在で、玩具やゲームの開発・販売を行う海馬コーポレーションの社長でもあります。デュエルで使用するソリッド・ヴィジョン・システムも海馬コーポレーションで開発されました。

海馬は自信家で人に対しては見下した態度も取りますが、常に真剣で弟思い、そして情熱的で勝利に貪欲という魅力的な人物です。

“`plantuml
@startuml

footer コナミ公式サイトより
title
@enduml
“`

## こんな人たちへ向けたLINE botです

リアルタイム読み上げサイトの作り方

機会音声のリアルタイム読み上げサイトがリニューアルしました！💡
是非お試しください！
キーボードう打てばリアルタイムに機会音声に変換されます❗️#javascripthttps://t.co/qvGDSk6mJr pic.twitter.com/uhvZ1qA7GZ

— gfkska⑨な人PJT (@hsjakkallavfhd) Novembe

[ES6] オブジェクトリテラルの省略記法

## Reactで頻出するこれ

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id,
name,
email,
……..
}
“`
こういう書きかた。
よくわからないがkeyとvalueが同じであれば省略できるという理解でいる。
詳しく理解せずに1年以上もReactを書いている。
よくない。調べようと思う。

## 「オブジェクトリテラルの省略記法」と言うらしい

前述のuserDataオブジェクトは、昔ながらの書きかたではこうなる。

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id = id,
name = name,
email = email,
……..
}
“`

しかしReactでは**propsで持ってきた変数にデータを代入すること**が頻発するため、さすがに冗長に感じてしまう。

そのときにES6で加わったオブジェクトリテラルの省略記法という新しい書きかたを

JavaScript Lintツール

## Lintとは

静的解析ツールのこと

プログラムコードを読み込んで、問題がないか調べてくれる

linterとも呼ぶ

## コンパイラとの違い

コンパイラ：言語仕様や構文規則などに違反する誤りがある場合にエラーを返す
Lintツール：文法上の誤りだけでなくバグの原因となり得る疑わしい記述を返す

## JSのLintツールの一覧

ESLint
JSHint
JSLint

## ESLintの使い方

### 1. ESLintのインストール
“`
npm install eslint –save-dev
“`

### 2. 設定ファイルの初期化

“`
npx eslint –init
“`

### 3. ルールのカスタマイズ

.eslintrcファイルに、ルールを記述する

### 4. Lintを実行する

“`
npx eslint yourfile.js
“`

JavaScript npm

## npmとは

“`
①パッケージの管理をしてくれる

そのプロジェクトで、必要なライブラリやパッケージを容易にインストールすることを可能にする

②依存関係を管理してくれている

package.jsonに記載されている情報をもとに、
必要なバージョンを正確に、一括でインストールすることを可能にする
“`

##

任意のディレクトリで npm init を実行し、package.json を作成

“`
npm init
“`

の実行結果、

“`
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` aft

JavaScript try…catch

## try…catch文とは

結論
“`
一言説明　：　エラー特化のif文みてーなもん
“`

ちゃんと説明

“`
例えば、関数やクラスやオブジェクト、JSプログラムにおいて、
特定の条件が発生した場合に、意図的に（わざと）エラーを発生させたい場合に使うもの
“`

## 実例

“`
//関数定義
function checkDivisibleByFive(num) {
let target = num % 5;
var result;
if(target == 0 ){
result = true;
}
else{
result = false;
}
return result
}

// try…catch 構文
try{
const result = checkDivisibleByFive(4);
if(result === false){
throw new Error(‘5で割り切れない数字です’);
}
else{
console.log(result)
}

}

JavaScript　　console.logとconsole.errorの違い

`console.log` と `console.error` は、どちらもコンソールにメッセージを出力する際に使用されるメソッドですが、異なる目的で使われます。

– **`console.log`**: 一般的な情報やデバッグ情報を表示するのに使われます。主に一般的なログ、変数の値、オブジェクトの内容などを表示するために使われます。通常のプロセスや実行の流れを理解するための情報を出力します。

“`javascript
console.log(‘This is a log message.’);
console.log(variable); // 変数の値を表示
“`

– **`console.error`**: エラー情報や警告を出力するのに使用されます。特に問題がある場合やエラーが発生した場合に、その旨を強調して表示するために使われます。エラーが発生した場所や原因を特定しやすくするために使われます。

“`javascript
console.error(‘This is an error message.’);
console.error(errorVariabl

JavaScript クラス　｜　class構文

## JavaScriptのクラスについて

ES2015（ES6）までは、`class構文`なんてものは存在しなかった。

JavaScriptは、プロトタイプベースの言語であり、クラスベースの言語ではないからだ。

しかし、クラスが作れないのは不便だ

ということで、ES2015以降は、クラスも使えるようになった。

これによって、ありがたいことに、クラスベースの言語を習得している人にとって、わかりやすくJavaScriptでも同様にクラスを作成できるようになった。

## クラスの作り方

“`
//クラスの定義
class Playlist{
//コンストラクタを作っている
constructor(name){
this.name = name;
this.songs = [];
}
//メソッドを作っている
addSong(song){
this.songs.push(song);
}
//メソッドを作っている
play(){
return this.songs[0]
}
//メソッドを作っている

TruthyとFalthy JavaScriptとPHPの違い

## Truthyとは
動的型付け言語において、真偽値型に変換されたらTrueになる値のこと

## JSとPHPで異なる例
#### ‘0’（文字列の0）
JSではtrue、PHPではfalse
“`test.js
‘0’ == true // true
“`
“`test.php
‘0’ == true // false
“`
#### []（空配列）
JSではtrue、PHPではfalse
“`test.js
[] == true // true
“`
“`test.php
[] == true // false
“`
ちなみに、JSでは{}（空オブジェクト）もtrue
“`test.js
{} == true // true
“`
#### 公式
https://developer.mozilla.org/ja/docs/Glossary/Truthy

https://developer.mozilla.org/ja/docs/Glossary/Falsy

https://www.php.net/manual/ja/types.comparisons.p

IPアドレスから天気を取得するサイトを作ってみよう

# 1.はじめに
今回はIPアドレスから現在地を取得して気象情報を表示するサイトを作成してみました。
また、天気の状況によって表示される背景を変更できるようにしました。
使用したAPIは
[Open Weather Map](https://openweathermap.org/api)
[IPInfo](https://ipinfo.io/)
です。
“`:環境
windows10
vscode
IP info API
Open Weather API
“`

# 2.HTML
“`html:index.html

【javascript】【jquery】urlの文字列編集

# コード
“`javascript

var url1 = “http://192.168.55.33/nnnnnn/aaaaaaa”;
var match = url1.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url1);

var url2 = “https://192.168.55.33/aaa/”;
var match = url2.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url2);

var url3 = “http://192.168.55.33”;
var match = url3.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url3);

“`

# 結果
“`javascript

“/nnnnnn/aaaaaaa”
“/aaa/”
“http://192.168.55.33”

“`

自分が関わったコードの中で最凶のクソコード

# 最凶コード

論より証拠、そのコードを見てみよう。そのコードとは、JavaScriptで書かれたコードである。

“`Original.js
t = 1234.56
:
if(n==0){
var a, b, c, d, e, f = t,
w = self._iFirst,
x = self._iSecond,
y = self._iThird,
z = self._iFourth;
z.innerHTML = “0”,
f > 100 ? (a = f, b = self._getRound(a),
d = “”,
y.style.width = “234px”,
w.innerHTML = “120”,
x.innerHTML = “240”
)
: (c = self._getRound(f), e = self._getRound(f / 2),
y.styl