JavaScript関連のことを調べてみた2021年10月18日

「こんな変数宣言は、嫌だ。どんなの？」: JS

## ある日のパイセン、「こんな変数宣言は、嫌だ。どんなの？」

> なんだ？
> パイセンは最近、大喜利にハマっているのか？
>
> もしや、新たなレビュー方法…？
> 評価に関わるかもしれないな
> よし、受けて立とうじゃないか！

## シンプルに`var`

“`js
var notCoke = ‘Pepsi’
“`

`var`は嫌だろう！
どれくらい嫌かって？

炭酸が抜けたコークや
BBQで、もはやあたたかさを帯びたビールくらい嫌だね！

`var`が何で嫌か？まあ、こんなところかな！
1. 巻き上げられて、エラーがでない
2. 再宣言ができてしまう

“`js
console.log(notCoke) // undefined　（巻き上げられて、エラーがでない）

var notCoke = ‘Pepsi’

var notCoke = ‘Dr.Pepper’ // 再宣言ができてしまう
“`

まあこんなことを抜きにしても、`var`を見たら
「え、古っ！」って思うようにはなってしまっているな…

なんか、`var`からは、おじいちゃんおばあちゃんの家と同

【JavaScript】関数とオブジェクト③　thisについて

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/8339820949532dbd6bae

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.this

* 呼び出し元のオブジェクトへの参照を保持するキーワード
* thisの参照先は実行コンテキストによって変わる

####使い方

““`javascript
// personというオブジェクトを設定
const person = {
// nameとhelloをそれぞれ設定
name: ‘Tom’,
hello: function() {
// この場合,thisがpersonを参照しているpersonオブジェクトの中のnameを呼び出す
console.log(“Hello” + this.name

これからReact始めたい人のための今日だけでできるTODO#26 TODOアプリの作成④ TODOリストをコンポーネントにする

## TODOリストをコンポーネントにする

### liをTodoItemコンポーネントとして定義する
`li`タグを`TodoItem`として定義します。
TodoItemにはステータス変更のボタンや削除ボタンをつけたいためTODO自体の情報に加えて
親コンポーネントから`useTodo()`で定義した関数も受け取れるようにしておきます。

“`js:App.js
const TodoItem = ({ todo, toggleItemStatus, deleteTodo }) => {
const handleToggleTodoStatus = () => {
toggleItemStatus(todo.id, todo.done);
};

const handleDeleteTodo = () => deleteTodo(todo.id);

return (

{todo.content}

{ todo.do

angular.jsonを書き換えてassetsフォルダのようなビルドと関係ないフォルダを作りたい

自分なりに調べたので備忘として残しておきます。
# angular.jsonとは
一言でいうとAngularアプリの設定を行うファイルとのこと。
ビルドの設定やフォルダ構成、sourceMap等の有効化など色々な設定を行っている。

# ビルドのオプションをいじって任意のフォルダを作成する
[参考サイト](https://angular.jp/guide/workspace-config#asset-config)

デフォルトではAngular.jsonのassetsプロパティに定義されている通り、**assetsフォルダ**の中身がdist/appフォルダ下に展開される。

“`angular.json
“assets”: [
“src/assets”,
“src/favicon.ico”
]
“`
これを詳しく書くと以下のようになる

“`angular.json
“assets”: [
{
“glob”: “**/*”,
“input”: “src/assets/”,
“output”: “/assets/”
},
{

JavaScriptの画面描画後の実行タイミングについて

# 画面描画後の実行タイミングは3パターンある！

### ①HTMLが全て表示された後のタイミング(DOMが出揃ったとき)
HTMLが揃っただけなので、画像などHTMLと並行して読み込まれるものの制御はこのタイミングではできない

書き方の例

“`
$(function() {
console.log(‘hoge’);
});
“`

### ②全要素が読み込まれた後のタイミング
画像やレイヤの大きさの制御を行うのはこのタイミング！

書き方の例

“`
$(window).load(function(){
console.log(‘hoge’);
});
“`

### ③処理が読み込まれた後のタイミング
HTMLのソースにベタがきすれば良い
この場合、特定のDOMに対する処理は実行できない

初心者JavaScriptのセミコロン『 ; 』

##『 ; 』いつ使う？
JavaScriptを勉強していると、文末の;をどうしても忘れてしまう・・・。
というより、いつ使えばいいのかと思うときがあります。
今回は、そんなときにパッとわかるようにまとめます。
記事を調べると、「;いらない説」なども見受けますので、そこまで重要ではないかと思います。
(例えば文と文が改行されているときは省略できるなど）

##『 ; 』が必要なとき
:::note info
let
:::
:::note info
const
:::
:::note info
console.log( );
:::
:::note info
break;
:::
(注)break;とは、switch文の終了命令です。case ○○: とセットで使います

##『 ; 』が不必要なとき
:::note info
if ( ) { } else if ( ) { } else ( ) { }
:::
:::note info
switch ( ) { }
:::

###おわりに
今後まとめながら追記していきます！

javascript演習　2日目、３日目/３０日

覚えたことたち

1秒ごとに１度回転させる

“`javascript
const now = new Date();

const seconds = now.getSeconds();
const secondsDegree = ((seconds / 60) * 360);
secondHand.style.transform = `rotate(${secondsDegree}deg)`;

“`

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ドキュメントのルート要素にcssの変数を設定する

“`css
:root {
–base: #ffc600;
–spacing: 10px;
–blur: 10px;
}

img {
padding: var(–spacing);
background: var(–base);
filter: blur(var(–blur));
}
“`

javascriptでhtmlタグのアトリビュートを操作する

“`javascrit
//

Internet Explorer から Edge にシームレスに案内するスクリプト

###スクリプト
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/msie|trident/) {
var url=location.protocol + “//” + location.hostname + location.pathname;
var msg=”当サイトは26年の歴史を歩んできたInternet Exploerのサポートを終了しました。

“;
msg+=”Edgeのダウンロード

“;
msg+=”Microsoft Edge ブラウザーで表示“;

/

ml5.jsでカメラ画像から姿勢推定を行う時にハマったこと

## はじめに
この記事では**JavaScript**のライブラリの1つ，**ml5.js**を利用した際のハマったことについて紹介したいと思います．

## ml5.jsとは
**ml5.js**を簡単に説明すると，簡単に機械学習に触れることが出来るライブラリと捉えています．
基本的な画像分類・文章生成から姿勢推定等といった様々な機械学習に触れることが出来ます．

> ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.

今回はこの**ml5.js**を使って**姿勢推定**を利用した際のことについて記

昔挫折したReactの勉強を、じゃけぇ本を見ながらリベンジしているときにハマったこと

数年前に挫折したReactを、じゃけぇ本（[モダンJavaScriptの基本から始める　React実践の教科書](https://www.sbcr.jp/product/4815610722/)）を参考にリベンジ（再学習）しているときに色々とハマったことがあったので、参考までに共有させていただきます。
まだ途中までしか読んでいないので、今後ハマり次第順次追記をしていきます。

#環境
・Windows 10
・Node.js v12.16.3

#4-1 React開発の始め方
###Create React App時のエラー
P93記載のReactプロジェクト開始のためのコマンド（npx create-react-app my-app）実行時に、以下エラーが発生。「global installationは対応してないから、以下のコマンド実行して」という内容。
※global installationはちょっと調べててみたけどよくわからず。どなたか詳しい方教えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.

【GAS】 スライドをページ毎に画像（PNG, JPG, SVG）として一括出力

現在（2021年10月）のところGoogleスライドで作成したスライドを画像形式でダウンロードする際、
各スライドを1つずつ出力するしかないようなので一括で出力できるGASを作った。

スクリプトはほぼ以下のサイトを参照しているので、オリジナリティはない。
[【GAS】Google Apps Script 活用事例　Google Slidesの全てのスライドをJPGに変換するスクリプト](https://note.com/nepia_infinity/n/n969877a32478)

## 参考サイトからの変更点
* コンテナバインドスクリプトにし、スプレッドシート上でスライドのURLとファイル形式を指定
* スライドが置いてあるフォルダ内にスライド名と同名のフォルダを作成し、そこへ出力した画像を保存

## スクリプト

スプレッドシート込みのファイルは[ここ](https://bit.ly/3vj4c29)からコピーをダウンロード

“`javascript
function onOpen() {
SpreadsheetApp.getUi()
.createMenu(‘S

[メモ] Node.jsで開発するにあたっての基礎知識まとめ

# はじめに

この記事は自分がNode.js未経験の状態からNode.jsのプロジェクトに携わって学んだことを忘れない様にメモしておくための記事です。
今はプロジェクトを離れてNode.jsに関わっていないため、思い出すためのメモとしてまとめました。
各ツールの役割を解説する事で、開発時に知識として必要なキーワードを効率よく知る事を目的としています。
私自身常に最新の情報を追えていた訳ではないので、情報としては古い可能性があるかもしれませんのでご注意を。

また、ツールの導入の仕方はバージョンアップによって変わる事があり、都度公式の最新の情報をチェックすべきであり、かつ今回の趣旨ではないため省略します。
実際こちらの記事を記載中にバージョンアップによって色々と変わったツールが散見されました。

# より詳しい情報が欲しい方には

私はある程度自力で試行錯誤しながら学んだ後でこの本に出会ったので、本の内容の半分くらいは既に知っていましたが、知識を固めるのに非常に助かりました。
また、最初にこの本を読んでいたらもっと効率よく必要な知識を学べたと感じました。
ガチガチな技術書より実践的

Azure Cognitive Services の 音声サービスで日本語のテキスト読み上げ（ニューラル音声の利用）

この記事は、Azure を使ってテキストの読み上げ（音声合成、Text to Speech）を行ってみた、という話です。

実装の部分については、以下に説明が書かれた「Azure Cognitive Services」の「音声サービス」の中の「テキスト読み上げ」に関し、JavaScript版の [Speech SDK](https://docs.microsoft.com/ja-jp/azure/cognitive-services/speech-service/speech-sdk) を利用している形です。

– [Azure Cognitive Services とは – Azure Cognitive Services | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/cognitive-services/what-are-cognitive-services)
– [音声サービスとは – Azure Cognitive Services | Microsoft Docs](https://docs.microsof

【学習記録④】コンポーネントを用いて挨拶アラートを出してみる。

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
前回Vue CLIを用いてVueプロジェクトを立ち上げたので、今回はコンポーネントを作ってみました。

##フォルダ構成
componentsフォルダにてそれぞれの挨拶を返却するコンポーネントを作成しており、それらをApp.vueが受け取ってindex.htmlで出力しているという流れになっています。

##サンプルコード
以下はMorning.vueの中身です。Afternoon.vueとEvening.vueの中身も挨拶部分以外は同じ作りになっています。

“`vue:Morning.vue