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

HTMLをJavaScriptで操作する仕組み

# はじめに
JavaScriptはフロントエンドまたはクライアントサイドの言語とされており、ブラウザで表示されている画面を操作することができます。
今回、どのような仕組みでJavaScriptがブラウザ上で機能しているかまとめました。

# HTMLがブラウザで表示されるまでの流れ
HTMLは文字の羅列であるため、そのまま表示すると見にくいデータです。そのため、JavaScriptやCSSでHTMLを装飾することで見やすくしています。具体的には文字の色や大きさを変えたり動きをつけたりします。
そのための手順は、
①HTMLをDOMツリーに変換する
②JavaScriptやCSSで装飾する
③ブラウザで表示する
という流れになります。

# HTMLをDOMツリーに変換する
DOM(Document Object Model)とはHTMLを解析しデータを作成する仕組みです。解析されたデータは階層構造となり、これをDOMツリーまたはドキュメントツリーといいます。
HTMLをDOMツリー変換して初めてデータを操作することができます。つまり、データをJavaScriptで操作するためにはHT

Javascript 変数 (初学者の学習メモ)

# Javascript 変数の学習メモ

### 変数の基本

– 変数(let)、定数(const)はデータにあだ名をつけるみたいな機能
(昔はvarも使用されていたが、varはもう使わない為、覚えなくてよい)

– 変数、定数は使い方が３つある
1. 宣言→ あだ名をつけること
2. 代入→ あだ名に対して値をひも付けすること
3. 参照→ あだ名にひもづいている値を使うこと

– 変数(let)は、再代入できる、再定義できない。(先に宣言だけして、後から代入することができる。)
– 定数(const)、再代入できない、再定義できない。(宣言と値の代入はセット。)

– 変数の名前は、“`「 Unicord文字(記号以外の文字)、数字、$、_ 」“`が使える。
(日本語も使えるが、非推奨)
– 同じスコープ内で、同じ変数名を定義することはできない ( スコープについては後に記載)

“`javascript:変数 let
let x = 20; // 宣言、xの値を代入
let y = 30; // 宣言、yの値を代入

console.log(

JavascriptからTypescriptへ1人で5万行修正し、移行した話

# はじめに

## なぜ Javascript から Typescript に置き換えたのか？

まず、Typescript のメリットは何か？
この記事などで Typescript の旨味を伝えてくれています。
[TypeScript の導入で開発現場はどう変わる？　 Sansan の事例に見るメリットとコスト](https://codezine.jp/article/detail/14849)

自分がフロントチームとしてアサインした時、開発している Web アプリケーションは運用開始してから 4 年程経っていて、人も入れ替わりの時期でした。
4 年も経っているので仕方がないことなのですが、機能を担当した人しかわからない部分や、ドキュメントに記載されていないような暗黙知みたいなところが少しづつ出てきているような感じでした。
これらは言わば「属人化」という人に依存するリスクだと思います。
自分が新規参画者側ということもあったため、このアプリケーションの属人化をなるべく排除していきたいというモチベーションがありました。
そこで、まずはコードを静的型付け言語にし、型を強制し暗黙知を減ら

isNaNはTRUEじゃないの？

## 今回記事を記述した背景
☆isNaNを書いてつまづいた人へ。
暇だったのである問題を解いていました。
問題の内容は
入力した引数が
＊数字だったら5枚する
＊数字ではなければ”ERROR”という文字を返す
という簡単な問題を作っていました。
## 記入したコード
“`function num(input){
if(isNaN(input)){
console.log(input * 5)
}else{
console.log(‘error’)
}
}

num(3);
“`
＊numの中身が数字だったら→numを5倍するなので、3を入れたら15になるかとおもいきや、、errorになってしもーた。
### isNaN(input)で、数字かどうか判断します

## 原因

### isNaN() 関数は数値ではない場合に true を返すので、注意して使用してください。とのこと

## 修正
“`function num(input){
if(!isNaN(input)){
console.log(input * 5)
}else{

LeetCode easy: 383. Ransom Note

LeetCodeを解いているので記録しています。

## 解いた問題

https://leetcode.com/problems/ransom-note/

> Given two strings ransomNote and magazine, return true if ransomNote can be constructed by using the letters from magazine and false otherwise.
Each letter in magazine can only be used once in ransomNote.

### Example 2:

>Input: ransomNote = “aa”, magazine = “ab”
Output: false

### Example 3:

>Input: ransomNote = “aa”, magazine = “aab”
Output: true

## 処理の流れ
magazineの中身を一回しか使えないのに注意
シンプルに考えると、ransomNoteの文字列をforルー

みんなが簡単簡単書いているので、React + JavaScript + FullCalendar を触ってみた

## Glideでカレンダー形式の予約アプリを作ったら紙以下と言われた

詳しくは書きませんが、 **会社の会議室予約管理を紙でやっていて**、テレワークの促進とともにに紙の弊害が目立ち始めたので、[Glide](https://www.glideapps.com/)でサクッとアプリ化してみました
**見出しの通りで激おこなので、フルスクラッチで作ることに決めました。**

>画像は紙以下で検索して出てきたイメージ画像です。

React + FullCalendarというありきたりなライブラリではありますが、

* 既存の記事が“`TypeScript“`向けのものが多かった
* 本当の初心者はどこにソースを追加すれば良いのかわからない
* 忘備録

以上の理由で記事を執筆します。
Reactを触ったことがなくても~~参考記事の皆

chrome 拡張 manifest v3 でアイコンクリック時に任意の html を開く

# 実現したいこと
– 開発した chrome 拡張のアイコンをクリックしたときに、指定した html ファイルを開く。
– 有名な拡張でいうと、[Talend API Tester](https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja) のような動きを実現したい。


# なぜ書いたか？
– [v1 や v2 での解説記事](https://qiita.com/Silphire/items/949b22cba0610ec9f40b)はちらほらあるが、v3 はあまり見かけなかった。
– ハマりポイントがいくつかあったので備忘として書いておきたかった。

# 実装
### ディレクトリ構成

SpeackerDeckをリモートコントロールできないか実験

SpeackerDeckに上げたスライドを外部から制御できないかなと思い、ブリッジさせる制御を書けないか試してみました。

> https://speakerdeck.com/n0bisuke2/puroziekutohe-tun-dewebfalsewei-lai-wogan-zitemiyou-number-jsfes-number-projectfugu

CodePen上に埋め込みして試しています。

> 

試した際には`Copy javascript embed code`の方を選択しています。

## メニューを出す

`js-sd-player`というclassの箇所がスライド下部のホバーすると出てくる

“`j

今週の学び　第11回

# 今週の学び

jQueryなど

– $(this)
– $(this)にしていないと上から id を取られるので、正しく作動しない場合がある

– 常に console.log する

– prev()
– prev()のパラメータに絞りこみたいセレクタを指定することで、そのセレクタに一致する兄弟要素を対象にすることができる

その他業界用語など

– ブロックチェーン
– 仮想通貨に使われる技術である。
ブロックチェーンとは例えるなら、１つの巻物のような物で、その巻物に対してトランザクションデータを時系列順に取引履歴などを書き込むイメージである。
さらに、従来の中央集権で１台のコンピュータが集中管理するのではなく、ユーザー同士が P2P(分散管理)する技術なので、ユーザー全員のパソコンの出力合計より、１台でそれを上回るパソコンは現状存在しないので改ざん耐性が高い。
– NFT

– NFT とは「Non-Fungible Token」の略で、fungible は代替可能という意味。
つまり NFT は『代替不可能なトークン』ということ

JavaScript初学者が超初学者に向けて教材を作った

通っている学校が間もなく夏休みに入るということで、より多くのクラスメイトにJavaScriptに接してほしいと考え、教材を作りました。

主にDOM操作に関するものです。

Qiita上の方々にも助けになれば良いなと思って投稿しますが、私自身も初学者なので、間違った日本語の使い方をしている部分などあると思います。
もしあればお気軽に連絡していただけると幸いです。

fizbuzzについての解説が記載されていませんが、私のクラスの多くはどういうものか知っているため省きました！
“`html