JavaScriptの勉強でつまづいたこと3選

## 概要
エッセイ・ポエムです。1年間必死にJavaScriptを勉強して特に理解しづらかったことを絞りに絞って3つにまとめました

スペック

* プログラミング初心者
* 用途LPのコーディング
* フレームワークjQuery
* 独学

初心者がプログラミングを勉強するときどんな箇所に苦しむのかを~~楽しんでいただく~~記録しておくのが主な目的。

**ちなみに、各苦しみに対するインテリジェンスな解決法はサポート外です。**

* 技術書を読む（理解できなくても読み進めないといけないので辛い作業。頑張ろう！）
* 他人のコードを読む（時間をかけていい作業。謎構文が頻出するので都度調べる。）
* コードを書いてみる（最初は写経でいい。何回か書いているとインプットした知識と知識がつながり合っていく感覚を味わえるはず。）

という力技で苦しみながら覚えました。

## つまづいたこと3選

### 1. 関数？変数？？引数？定数？？？
JavaScriptの文法を勉強していたときに一番パニくっていた箇所。
初心者からみるとみんな同じような言葉に見えるんです。
僕みたいな低スペ初心者に

NodeListからArrayにシャッフルしつつ変換

フルコードは以下。
[NodeListからArrayにシャッフルしつつ変換するJavaScriptプログラム – sun610.web.fc2.com](https://sun610.web.fc2.com/program/c0002.html)

ポイントは

– `Math.floor(Math.random() * childr_.length)` でランダムインデックスを取得している
– `iArray` に使用済みインデックスを格納し、同じインデックスを2回以上使用しないようにしている

【JavaScript】文字列に半角空白と全角空白が含まれるか判別する

文字列に半角空白と全角空白が含まれるか判別する方法をまとめました。(JavaScript)

こちらを参考にしました。
[Stack Overflow](https://stackoverflow.com/questions/17616624/detect-if-string-contains-any-spaces)

“`javascript
// 半角空白があるか
function hasSpaces(str) {
if (str.indexOf(‘ ‘) !== -1) {
return true
} else {
return false
}
}

// 全角空白があるか
function hasZenkakuSpaces(str) {
if (str.indexOf(‘　’) !== -1) {
return true
} else {
return false
}
}

// 適当な文字列(この例では2つスペースがある)
const input = ‘There is something’;

// いくつスペースが

Denoの開発環境をVSCodeで作る

この記事は、「囲みマス育成会」のために書かれた記事ですが、Denoの開発環境をVSCodeで作りたい方全体を対象をしております。
さいごに囲みマスの説明を少しだけさせてくださいm(__)m

# はじめに
今回の内容は、2021年1月4日時点での方法です。
Denoは発展途上のランタイムなので、より良い方法があるよというときにはコメントにてお知らせしていただけると嬉しいです。
また、VSCode、Denoはインストール済みという前提で話を進めていきますので、まだインストールしていない方は先に済ませておくことをお勧めします。

# 1．Deno拡張機能のインストール
VSCodeにはありがたいことに、既にDenoの拡張機能が用意されています。
[Deno – Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

循環配列について

こんにちは、Mottyです。今回は配列の記事になります。

##循環配列
循環配列はcyclicな配列のことを言います。
普通の配列であれば最後の要素から次の要素へアクセスしようとするとエラーが検出されますが、循環配列では最初の要素にシフトします。

循環配列の中の任意の番号から始まり、要素をすべて取り出す方法を考えるとします。この場合、もう１つ同じ配列をコピーしそれにアクセスする方法があります。

ただし以下のデメリットが考えられます。

・2倍のメモリを確保しなければならない
・実装コードが冗長になる

“`newarray.js
//func
function write(array, start_num)
{
array = array.concat(array);
//自分の配列同士を結合さ

React Redux Hooks公式ドキュメント翻訳（概要編）

Reactアプリケーションの状態管理のためのOSSライブラリである、React Reduxのバージョン7.1.0で追加された、Hooks APIの公式ドキュメントを翻訳していきます。

2021/1/公開。原文リンクは以下。
・公式ドキュメント（React Redux Hooks）：https://react-redux.js.org/api/hooks

今回の記事は概要編です。

#Hooks APIとは
Reactの新しい[hooks API](https://reactjs.org/docs/hooks-intro.html)はローカルなコンポーネントのstateをより簡単に扱うことができる関数コンポーネントです。

React Reduxは今回、高階コンポーネント(HOC)の一つである既存

「エンジニアに向いている人」はGitHub user内にどれぐらいいるのか

## 注意
– この記事はとあるツイートを話題にしていますが、筆者にツイート内容、およびツイートされた方を蔑む意図は一切ありません。
– 筆者は統計、およびプログラミングに関してはまだまだひよっこです。したがって誤った見解や拙いコードを書いている可能性がありますが、お気づきの際は是非コメントにてご指摘ください。

## 背景
あけましておめでとうございます！
正月休みもあけ仕事も始まりましたが、みなさまいかがお過ごしでしょうか。

さて、正月早々、とあるツイートが反響を呼びました。

> プログラミングスクール通ってるかどうかとかどうでもよくて、この年末年始にコード全く書いていない人はエンジニア向いてないんじゃないですかね、それぐらい好奇心が必要な職業だと思うけど

賛否両論あったこのツイートですが、内容はさておき、私はあることが気にかかりました。

**「果たしてこの年末年始、コードを書いた人はどのぐらいいるのだろうか」**

本記事では上記の疑問を検証していこうと思います。

## レギュレーション
もちろんすべてのエンジニアに「この年末年始、コード書きましたか？」ときいてまわるわ

【JavaScript】値のundefinedと空値チェックメモ

####何故メモするの？
*　kintoneのJavaScriptカスタマイズを行う際に、undefinedか空文字かのチェックをすることが多いことと。
*　今まで厳格な等価評価でundefined評価をしていたけどどうやら推奨されていないと知ったため。
[詳細はMDNを参照](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined)

####良く使用していたチェック
“`javascript
// if文
if(val === undefined){

}else if(val === ”){

}else{

}

// 三項演算子
val === undefined ? ” : val === ” ? ” : val;

“`

####なんで推奨されないのか。
`undefined`は、グローバルスコープ内の変数だから。
予約語ではないため、上書きしたりしてグローバル汚染してしまう恐れがあるため。
なるほど。

####どのようにしたの？

`

VRサーフィンデバイス『In The GreenRoom(ITGR＝アイティーギア)』のプロトタイプを作成

# 誰もがGreenRoomを体験できるようにしたい
サーファーの中でも、選ばれ者しか入ることのできない神聖な場所『GreenRoom』。
それは、最高の天気と、最高の波が作るチューブの中にのみ出現する世界。
[](https://www.youtube.com/watch?v=hD2E5qc6HVs)
人生でこのGreenRoomを体験できる人は一握りしかいません。
僕が作りたいデバイスは、この世界を誰もが体験できるデバイス『In The GreenRoom(ITGR＝アイティーギア)』です。
しかも、ただ360度の画像をVRで表現したものではありません。
このデバイスのためだけに撮影された画像を使い、これを不安定なサーフィンの板の上という状況を再現した上で、板の上にたちがるタイミングか適切かどうかを判定することで、より『リアル感』を追求したデバイスを作ることです。
今回は、このデバイスのプロトタイプを作成しました。
実物は以下の通りです。

JavaScript 初級者から中級者へ（スコープ編）

#スコープとは
実行中の式から値と式が参照できる範囲
→5種類存在する
・グローバルスコープ
・スクリプトスコープ
・関数スコープ
・ブロックスコープ
・モジュールスコープ

##グローバルスコープ
var function などで値を定義した時にグローバルスコープに表示される

“`
console.log(b);
console.log(window.b);
//windowオブジェクトは省略

window.d = 1;
let d =2;
console.log(d);

//let d =2 が出力される
“`
console.log(b)
windowオブジェクトは省略

##スクリプトスコープ
let const などで値を定義した時にスクリプトスコープに表示される

##関数スコープとブロックスコープ

“`

//関数スコープ
function a() {
//関数の中にあるスコープ
let b = 0;
console.log(b);
}
a();

//ブロックスコープ
if (true) {
//ブロックスコープは{}の

元記事を表示

YoutubeのLive配信が予約されたら、Googleカレンダーに登録されるスクリプト

Vtuberにハマっていますが、好きなVtuberのLive配信の予定をGoogle カレンダーに自動で登録できたら、そのために予定を調整するのに便利だよなぁ、と思ってスクリプトを作ってみました。

Vtuberさんが協力を仰がなくても自動でGoogle カレンダーに登録できるものの、マメに配信枠を予約するVtuberさんじゃないと有効じゃないかも。

#前提条件
Googleのアカウントを持っている
Google カレンダーの利用を開始している
Youtubeの利用を開始している
（たぶんPCのブラウザでしか使えないです）

#機能
・任意のYouTubeのチャンネルがLive配信を予約したら、任意のGoogleカレンダーへ予定を登録する。
・カレンダーの予定の場所には配信のURL、メモには概要欄の内容を登録する。
・URLが同じ配信予約は重複して予定登録されない。

##できない機能
・後から配信予約の時間が変更された場合、反映する機能はついてません。
・削除された場合も同様

#スクリプト

“`
let scheduleUpcomingLive=()=> {
let r

ES6 moduleのexportとimportについて

## 本日のゴール
– export / import について理解を深める

## アジェンダ
– export について
– import について

## 1. export について

変数、関数、クラスの宣言文の先頭に `export` を付けると、その名前で外部ファイルにエクスポートすることができる

“`javascript
export const foo = foo => {
console.log()
}

export default class bar {
constructor() {}
init() {}
}
“`

## 2. import について

外部モジュールや他のスクリプトなどからエクスポートされた関数、オブジェクト、プリミティブをインポートするために使用

“`javascript
import foo from ‘./foo’
import {foo, bar} from ‘./foo’
“`

## 参考
[MDN – export](https://developer.mozilla.org/ja/docs/Web/J

非同期遷移に関する備忘録

当記事では、非同期遷移について調べたことなどをまとめています。

## 1. 非同期遷移とは

非同期遷移（あるいは非同期画面遷移・Pjaxとも）とは、ブラウザの履歴を操作するHistory APIやXMLHTTPRequestオブジェクトを利用して、画面を遷移する処理を指す言葉のようです。

「ようです」という曖昧な表現を使った理由は、この非同期遷移という言葉があまり一般的ではないためです。試しに、Googleで非同期遷移と検索をかけてみたところ、ヒットしたのは約12万件。これが非同期通信だと約87万件、さらにAjaxだと約2億6,300万件なので、その認知度の圧倒的な差が分かろうというものです。

しかしながら、では、一般的に使われていない処理ではないのかというと必ずしもそのようなわけではなく、YouTube・twitter・Facebook・GitHubなどの大手サイトを始めとした、少なくない数のWebサイトで実装されています。シームレスにページを遷移させるということに、わざわざ名前を付けるほどのこともないということなのかもしれません。

### 1-1. Aja

Markdown正規表現全文検索ツール「Note-CLI」をリリースしました。

Markdown正規表現全文検索ツール「[Note-CLI](https://github.com/yuis-ice/note-cli)」をリリースしました。

以下かんたんな日本語版クイックスタートになります。

> Markdown Indexing and Pcre Regular Expression Compatible Full Text Searching for Advanced Note Takers.

ノートテイキング上級者のためのMarkdownインデックスとPCRE正規表現対応の全文検索システム。

## クイックスタート

“`sh

# データベースへMarkdownファイルをインデックス indexing file
./note-cli.js –index –database notes.db.example –file notes.md.example

# データベースで正規表現でキーワード検索 searching for keywords by regular expression
./note-cli.js –search –dat

【CSS・JS】テキストの選択を解除する方法。（文字列の選択を禁止する方法）

ドラッグである要素を選択したときに、その中の要素が選択状態になってしまう。この**文字列の選択状態を解除する方法**。

例えば、テーブルのセルをドラッグで複数選択すると下図のように、セルの中のテキストが選択されて見づらい。


↓ 実現したいこと（文字列は選択しないようにする）


主な実現方法は以下２つ。１が圧倒的に簡単。２は参考程度に。

1. [cssでuser-selectプロパティの設定](#1-cssでuser-selectプロパティの設定)
2. [JacaScriptで選択解除](#2-j

JavaScript　【最低限の文法】

#　はじめに
こちらは学習用のメモになります。
今回は JavaScriptの基本的は基礎についてまとめていきたいと思います。

##出力
`console.log`でJavaScriptの実行結果がわかります。

＊実行結果を見る方法は実行したブラウザを左クリックして`検証`を押して`Console`を見ると実行結果がわかります。

“`index.js
console.log(‘Hello World’);
“`

##①変数

“`index.js
let text = ‘Hello World’;
“`

`let`は変数を宣言するもの。後ろの言葉を変数にする。

変数は書き換えることができます。

“`index.js
let text = ‘Hello World’;

//変数の更新
text = ‘Hello world2’;
“`
##②定数

“`index.js
const bigText = ‘Hello world’;
“`
定数は変数と似ているのですが、変数は上書きや更新ができるのですが定数は書き換えができないです。
つまり、定数は文字

経過時間をページが更新されると同時に動的に表示させる方法

実は余り使う場面がないような気がするけど一応メモ。

“`html:elapsed-time.html

“`

“`javascript:elapsedTime.js
const oldTime = new Date();//ページが表示されたときの時間
setInterval(() =>{
const currentTime = Date.now();
const diff = currentTime – oldTime;//最初は0だが1秒毎に(setIntervalの第二引数が1000だから)currentTimeの値は増えていく
const sec = Math.floor(diff / 1000);//差分の値を秒に変換
document.querySelector(‘#log’).innerHTML = `${sec}秒が経過`;
},1000);
“`
Vueの場合

“`html:e

JSでの曜日の出し方

“`html:get-day.html

“`

“`javascript
const date = new Date();
const day = date.getDay();//0~6の曜日番号を」取得できる
const dayList = [‘日’,’月’,’火’,’水’,’木’,’金’,’土’];
const label = dayList[day];
document.querySelector(‘#log’).innerHTML = `本日は${label}曜日です`;
“`

カレンダーを作るときに使えるかも。
Vueの場合

“`html:get-day-vue.html

本日は{{ label }}曜日です

ボタンをクリックして要素を非表示から表示に切り替える

““html

サンプルタイトル

サンプルタイトル

ボタン

位置情報の取得

あまり使う機会はないかもしれないが、こういうのがあるよという程度で書いておくことに。

“`html:geolocation.html

あなたはいまどこ？

<