JavaScript関連のことを調べてみた2020年11月26日

【JavaScript】for文の入れ子を理解したい！

#プログラミング勉強日記
2020年11月26日
for文の入れ子の処理について学習したので、記録します。
間違えている自信しかないので、何かあればコメントください?

#for文とは
指定された回数だけ繰り返し処理を行う命令です。
[(for-Javascript | MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for)

##書き方

“`for文.
for(初期化式; ループ継続条件式; 増減式) {
ループ内で実行する命令
}
“`

##処理の流れ
####1.初期化処理
####2.条件判定
####3.判定がtrueの場合、ループ内の処理実行、falseの場合、ループの終了
####4.増減処理
####5.3の判定がfalseになるまで繰り返し

##(例) 変数iが10未満の間、コンソールに数値を出力
“`script.js
for (let i =0; i < 10; i ++) { console.log(i); } ``` #f

を初期化する方法

## input type=”file” を初期化する方法
初期化するには、inputタグにidを指定し、

“`

“`

script内で、inputのidを使って

“`
document.getElementById(‘inputFile’).value = ”
“`

を実行する。

静的サイトジェネレーター　Gatsby.js　入門

#Gatsby.js入門
第１回は、Gatsby.jsのインストールの仕方について書いていこうと思います
##Gatsby.jsを利用するための準備
開発環境の用意
・Node.js(nvm)
・yarn
・git

のインストールが必要です
インストールの仕方については、次の記事を参照してください

##Gatsby CLIをインストールする
`yarn global add gatsby-cli`
と入力して、Gatsby.jsをインストールしていきます。

#スターターをダウンロードしてみる
`gatsby new`
と入力して、サイトを構築していきます。

入力すると、プロジェクト名と使用するスターターを聞いてくるので、自分にあったプロジェクト名とスターターを選んであげましょう。

※スターターについては、https://www.gatsbyjs.org/starters/?v=2
を参照してみてください

ダウンロードできたら、`cd プロジェクト名`でプロジェクトフォルダに移動し、`gatsby develop`で開発サーバーを起動してみます。

開発サーバーが起動したら、

ポケモンでTypeScriptおもしれーってなる(型エイリアスまで)

## 型エイリアス typeとは

型宣言をtypeで記述することができる。

“`ts
type Age = number
let age: Age = 15
“`

## オブジェクト

もちろんオブジェクトもできる。
`?`を使うと必ず記述しなくても良くなる。

“`ts
let o: { a: number, b?: string } = {
a: 2
}
console.log(o.a) // -> 2
console.log(o.b) // -> undefined
“`

## readonly

オブジェクトのプロパティを書き換え禁止にできる。
変数で言うconst。

“`ts
let o3: {
readonly id: number
} = { id: 3 }
o3.id = 2 // -> エラー
“`

## ポケモンとtypeでいちゃいちゃする

以上を踏まえてあれこれ触る。

“`ts
type Action = {1: string, 2?: string, 3?: string, 4?: string }
type Pokemo

リングフィットアドベンチャーの道具でグーグルストリートビューを歩き回る【Unity+GoogleMapsJavaScriptAPI】

リングコンは使いません（レッグバンドとジョイコンだけ）

## 経緯

* スタンディングデスク+ステッパーという意識高そうな在宅ワーク環境を手に入れた…のはいいものの、すぐ飽きた。座りたい。
* 運動の動機付けとしてサイクリングマシンでストリートビューを操作するやつ([これ](https://omocoro.jp/kiji/230063/)とか)をステッパーで作ってみようと思った。
* 運動を検知するためにセンサーが必要。何かしらの動きをマイコンで検知するとして、さらにそれを何かしらの手段でPCに送信して、…結構大変だなあ。お金もかかりそうだ。
* どっかに**運動（特に傾き）を検知できて**、**BluetoothでPCに接続できる**機械ないかなあ～～～～～。


* あった～～～～～～！！！！。ジョイコンで傾き検知が可能。ついで

UTC ベースで時間データを扱う: JavaScript 版 (IoTプログラミング)

「UTC ベースで時間データを扱う(IoTプログラミング)」
https://qiita.com/nanbuwks/items/e3714f6b0b6b0b8585f4

では C で　UTC を扱う記事を書きました。

今回は　JavaScript でUTCを扱う方法です。

# UNIX 時間 → Date オブジェクト

UNIX時間 1606323269 ( UTC 2020年11月25日 16:54:29 ) を worktime に格納しているとします。

これを JavaScript の Date スクリプトにして、更に文字列形式に変換し出力するには以下のようにします。

“`
worktime=1606323269;
datetime = new Date(worktime*1000);
stringline=(datetime.toLocaleString());
document.write(stringline);

“`

Dataオブジェクト内部には1970年1月1日からの時間が UTC ベースで格納されてい

TypeScript/JavaScriptの諸々の演算子達(!, ?, &, =)の役割をまとめてみた(初心者向け)

**React（TypeScript）、「!」とか「?」とか「&」とか記号多すぎて訳わからんのだが！！**
というところからこの記事を書くに至りました。

記号ってただでさえググりづらいし、TS/JS関連だと**Optional Chaining**とか、**Nullish Coalescing**とか名前もいちいち覚えづらい…
ので自分用のメモとしても残しておきたいな、と。

記事の内容としては、下記の通り演算子周りが主となります。
• 短絡評価 (||演算子と&&演算子)
• &&演算子
• !（非nullアサーション演算子）
• ?. (Optional Chaining)
• == と=== (等価演算子)
• 三項演算子

初心者ゆえにざっくりとした理解に重きを置いてますので悪しからず。。
## 短絡評価 (ショートサーキット評価)　ー ||演算子と&&演算子 ー
AND演算子(&&)、OR演算子(||)自体はどの言語でもあるかと思いますが、
Reactだとこの短絡評価をよく見かけます。（で、これが正直読みづらい…）
ナウい書き方らしいので頑張りましょう。

**短絡評価（

WebSocket メモ

## WebSocket とは

– クライアントとリモートホストの間で双方向通信を可能とするプロトコル。
– セキュリティモデルはウェブブラウザでよく用いられるオリジンをベースとしたモデル。
– `XMLHttpRequest` やロングポーリングに頼らずにサーバとの双方向通信を必要とするブラウザアプリケーションのためのメカニズムを提供する。
– クライアント・サーバ間の双方向のトラフィックのためにTCPコネクションを一つだけ張る。

## プロトコルの概要

プロトコルは**ハンドシェイク**と**データ転送**の2つの部分からなる。

### ハンドシェイク

#### クライアント -> サーバ

“`http
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, s

JavaScript アウトプット

・変数宣言（var,let,const）をしないとすべてグローバル変数になる（関数で厄介）。

・Functionコンストラクター（new Finction）は、関数内部でもその配下の変数は全てグローバルスコープとみなされるので、利用はおすすめしない。

・与える因数の数が、関数側で要求する数と異なる場合も、チェックしない（エラーにならない）。

・引数は、後ろの引数だけ省略できる。

・高階関数で配列をリスト化したり合計値を算出したりできる。

・スコープチェーンとは、グローバルオブジェクトとCallオブジェクト（ローカル変数）を生成の順に連結したリスト。変数のメカニズムがわかる。

・関すリテラルは、匿名（無名）関数を使用する。

・closure関数が呼び出されると、
　・匿名関数（関数名を記述せずに引数や代入に使用する関数　
　　例：const myfunc = function (name)）を表すCallオブジェクト（ローカル変数）
　・closure関数のCallオブジェクト
　・グローバルオブジェクト
　というスコープチェーンが形成される。

・プロパティの宣言→コンス

Javascript(React) 株価取得WebAPI グラフ表示(Function Component)


API-GRAPH-REACTという名前で
githubにて公開中です。

検索欄入力の際チィッカーシンボルを入力してください
例：
Amazon =>　AMZN
Microsofl => MSFT
Apple => APPL
Facebook => FB

＃連想配列

Javascript(react) 多次元配列をテーブルに挿入するfunction component

オライリージャパンreatビギナーズガイドの練習課題『高機能excel作成を作ろう』にて
多次元配列の処理をclass componentで書かれていた。
function componentの理解のため、function componentに書き換えていく。

参考書籍：reactビギナーズガイド
サンプルコード：https://github.com/stoyan/reactbook
該当フォルダ・ファイル：chapters/03.04.table-sortby.html

配列の要素は適当に違う値を使用します。

#土日がない？休みなんか必要ないですよね？笑

“`react:Table.jsx

function Table() {

const hea

【JavaScript】コールバック関数メモ

配列arryに数字を格納し、それを1つずつコンソールに出力させる処理

“`JavaScript:app.js
const arry = [1, 2, 3, 4]

arry.forEach(function() {
console.log(val)
})
“`

“`sh:出力結果
1
2
3
4
“`

【Nuxt.js】「dotenv」を使った環境変数の設定方法

#「dotenv」をインストール

プロジェクト直下で`npm install –save @nuxtjs/dotenv`を実行

“`:ターミナル
$ npm install –save @nuxtjs/dotenv
“`

#package.jsonで確認
“`json:package.json
“dependencies”: {
“@nuxtjs/dotenv”: “^1.4.1”, <- "core-js": "^3.6.5", "nuxt": "^2.14.6" } ``` #プロジェクト直下に`.env`ファイルを作成 ```:ターミナル $ touch .env ``` **`.env`ファイルに適当な値を定義します。** ```:.env TEST = 'テスト' ``` #console.logで確認 きちんと設定されているか確認します。 `pages/index.vue`に`console.log`を設置。 ```vuejs:pages/index.vue