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

JavaScriptで小数点を切り捨て表示する方法

画面上に消費税を表示する際に小数点を消したかったので、その解決方法をシンプルに書きます。
## Math.floorを使用する
`Math.floor(数値)`と記述することで、()内の数値を小数点切り捨て表示することができます。
Math.floor(5.2)なら5が返ってきます。

## 使用例
“`price.js
const itemPrice = document.getElementById(“item_price”);
itemPrice.addEventListener(“keyup”, () => {
tax = Math.floor(itemPrice.value * 0.1);
“`
上記例では、入力フォームの要素をidで取得し、keyupによってキーボード操作時にイベント発火するようにしてあります。
フォームに入力された数値の10%（itemPrice.value * 0.1)をMath.floor()内に記述して小数点切り捨て表示できるようにしてあります。

【React】公式のチュートリアルをやってみる～①環境構築

Reactをお勉強中な私です。
[公式のチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を粛々とこなし、よく分からない部分はきちっと調べながら進めていこうと思います。

環境構築は、苦しむと思いきや、秒で終わりました・・

## 前提
– OS: Window 10
– Node.js version: 14.16.1

## 作業用ディレクトリ作成
– テキトーに、React-Tutorialフォルダを作成

## プロジェクト作成
– 作業用ディレクトリで、`npx create-react-app my-app` を実行する
“`
PS C:\■■■■■■■■■■\React-Tutorial> npx create-react-app my-app
(略)
Success! Created my-app at C:\■■■■■■■■■■\React-Tutorial\my-app
Inside that directory, you can run several commands:

npm start

Prettier と plugin だけで Node.js のモジュール import の並び順を整える

## はじめに

– Prettier を導入しているが、ESLint が導入されていない JavaScript/TypeScript の小さなプロジェクトで `import` の並び順を揃えたいニーズがあったため、追加したライブラリと設定を記載します
– ESLint を導入することで解消も可能でしたが、 ESLint を入れる程大きなプロジェクトではないため見送りました

## 実行環境

“`zsh
% sw_vers
ProductName: macOS
ProductVersion: 12.4
BuildVersion: 21F79
% node -v
v16.7.0
% yarn -v
1.22.15
“`

## import の並び順を整える

今回追加するのは trivago が開発している `prettier-plugin-sort-imports` です

https://github.com/trivago/prettier-plugin-sort-imports

### ライブラリの追加

該当のプロジェクトでは `yarn` を利用していたた

Javascriptの非同期処理とfetch APIについて学ぶ

現在学習中のJavascriptで新しくfetch APIについて学習をしたため、復習も兼ねて投稿します。

## 目次
① まず初めに（非同期処理について ※ 説明長め）

② fetch APIとは

③ 実際に使ってみた

## まず初めに（非同期処理について）
Javascriptには非同期処理というものがあり、fetch APIは非同期処理の一部であるため、まずは非同期処理について説明します。

### 非同期処理とは？？

簡潔に言うと非同期処理とは、
実行した処理が完了するのを待たず、次の処理を実行する動きのこと
です。

逆に同期処理とは、
実行した処理が完了してから次の処理に順番に進んでいく動きのこと
になります。

実際に同期処理と非同期処理の違いについて、実際のコードと結果を記入すると以下のようになります。

※以下の処理は@tokky_se様の投稿を参考に記載しております。
　実際の処理の動きも確認されたい場合は、こちらの投稿がとても分かりやすい為ご確認する

Vue3 & Vuetify3でバリデーション付きのフォームを作ってみる

:::note warn
この記事は、以前に投稿した「[Vue & Vuetifyでバリデーション付きのフォームを作ってみる](https://qiita.com/tekunikaruza_jp/items/0a68d86084d961d632ac) 」という記事の、Vue3.x 版となります。Vue2.xでの内容をご覧になりたい方は以前の記事をご覧ください。
:::

[Vue](https://v3.ja.vuejs.org/)と[Vuetify](https://next.vuetifyjs.com/)を組み合わせて、下図キャプチャのようなバリデーション付きのフォームを作ってみます。Vueの基本事項は知っている前提です。だいぶ回りくどい記事になっています。

![Sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84550/68eece

未経験者がポートフォリオを作成してみた。【Laravel /Vue.js/ AWS】

# 1.はじめに
* 友人／家族／恋人との休日の行き先、ルートを提案してくれる「デートプラン提案アプリ」という物を作成しましましたので紹介させていただきます。

# 2.自己紹介
* こんにちはishii28と申します。
当記事は実務未経験者がポートフォリオをつく
WEB制作をはじめ、プログラミングに興味を持ち始めた。

* 私は「人の役に立ちたい」また「物作りを通して誰かの課題を解決したい」という思いがあった。
この観点から考え、エンジニアはそれを実現できると確信した。
この先はエンジニアという仕事を通じて人の課題に寄り添ったサービスを提供していけるようなっていきたいと考えエンジニアを目指した。


# 3.簡単に自己紹介
* 現在29歳でwebエンジニアになるために就職活動中です。

* 多くの人々の問題を解決し、人の役に立てる人間になっていきたい、 エンジニアはそれを実現できると確信しエンジニアを目指し始めた。

* 趣味は読書に没頭すること。


# 4.開発背景
* PFのテーマを選定する所から始まり、身近な友人や家族から実際に困っている事や不便に思っている事はないか調査す

JavascriptのObject,Class,Constructorを27分57秒で完璧に理解する記

## JavascriptはObjectで出来ている

**JavaScriptをやればやるほど、JavaScriptの全てがオブジェクトで出来ている**事を思い知らされる。
データを保存したり、キープする際にはオブジェクトを使うし、APIやデータベースとやりとりする際につかうJSONフォーマットもオブジェクトだし、各種ライブラリもオブジェクトとして配布されているし、DOMのノードもオブジェクトとして、DOCUMENTオブジェクトに入ってるし、JavaScriptのビルトイン関数やプロパティも全てオブジェクトとして保存されてるし、プロミスもオブジェクトで返ってくる。
**JavaScriptを理解したければ、オブジェクトを理解するのは必須で、オブジェクトを意識してJavaScriptを書けば、理解のスピードも桁違いだ。**

で、自分も理解しているつもりだったんだけど、この動画をみてさらに理解が深まったというか、目からウロコが落ちて見通しがさらにくっきりした様な気分になったので、是非JavaScriptを勉強中の諸君にもシェアしたいと思い、これを書いているのです。

![-212- 6

js系アプリ開発でよく使うコマンド備忘録

# 記事の目的
私自身開発していてよく
「あれどうやるんだっけ？」と忘れるコマンドが多いので
ここに来れば一発でコマンドを思い出せる or よく見る記事に飛べるを目指す個人的なメモです。
まだまだ勉強中なので便利コマンド見つけたら随時書き足していきます。

## ライブラリのインストール
* `npm install`
package.jsonに記されたパッケージをインストール

* `npm install パッケージ名`
* 指定したパッケージのインストールができる
* `npm i パッケージ名`でも同等
* インストールしたパッケージがpackage.json, package-lock.jsonに記録される
　　
* `npm uninstall　パッケージ名`
* パッケージのアンインストールができる
* アンインストールしたパッケージがpackage.json, package-lock.jsonから削除される
* 全ライブラリを強制削除したい場合は`rm -rf node_modules`
* package(-lock).jsonか

非同期処理

JSの特に重要な概念について学習したのでメモ。
## 非同期処理とは
通常非同期処理は
あるタスクが実行されているときに、ひとつの実行処理の完了を待たずに、他のタスクが処理が実行できる概念のこと。
つまり、非同期処理では同時に実行している処理が複数ある。

同時に処理をはしらせることができるため、全体の処理速度を速められるメリットがあるが、その反面、現在何の処理が行われているかなどプログラムの全体像が複雑になるデメリットもある。

【Deno】ReadableStreamでFizz Buzzして無限Fizz Buzzサーバーを建てる

## ReadableStream（Webストリーム）でFizz Buzzする

[ReadableStream](https://developer.mozilla.org/ja/docs/Web/API/ReadableStream)は細切れのデータを送受信できるAPIです。
今回はこのAPIを使ってFizz Buzzしていきたいと思います。

また、Denoを使うとストリーミングするサーバーを簡単に書くことができます。今回はDenoを使って無限FizzBuzzストリーミングサーバーを書いてみます。

（何を言っているかわからない方は https://dash.deno.com/playground/fizzbuzz にアクセスして実例を見てください。）

### 実装方法

WebストリームAPIには以下の3種類が存在します。

– ReadableStream – 細切れのデータを読み込み
– TransformStream – 細切れのデータを変換
– WritableStream – 細切れのデータを書き込み

これらは、以下のコードのようにメソッドチェーンで組み合わせて使

Three.jsで目指せ60FPS : ジオメトリ結合編

## はじめに

この記事は、three.jsにおけるジオメトリ結合の

– 描画負荷に対する影響
– モデルデータの結合方法
– 結合したジオメトリの制限と回避方法

の3点を共有するためのものです。

### 想定する環境

– Google Chrome 102.0.5005.61
– three.js r141

お手元のthree.jsのバージョンを確認してからお読みください。バージョンが異なる場合、記事の内容が適用できない場合があります。

### 想定する読者

– three.jsを使ったことがある。
– WebGLを直接書いたことはない。
– 画面描画の負荷に不満があるが、どのように改善すればいいかわからない。

この記事では、three.jsのインストール方法は取り扱いません。あらかじめご承知ください。

## ドローコールの数と描画負荷の変化

### デモ

まずはデモをご覧ください。画像をクリックすると、それぞれのデモページに遷移します。

#### ▼ デモ A : ジオメトリを結合していないデモ

::: note aler

JavaScriptのデバックにはdebugger文を使おう

JavaScript初心者のため、デバック力がまだまだ拙くどうしたらデバック力ってつくのだ…と悩んでいたら

?‍? < スタックトレースするといいよ！ ?‍? < スタックトレースするには`debugger`とか`console.trace()`使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので? ### スタックトレースとは > スタックトレース (stack trace)とは
>
> エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。
>
> [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word13281.html)

### スタックトレースを使って問題をどう切り分けるか
まずは問題が起きている箇所のスコープを狭くしていきましょう?

問題の切り分け方として
– ざっくり入口と出口の関数に適切な値が入っているのか
– 外れ値の場合はどうか
– 意図していない値が入ったとき

【Angularアプリケーション開発 #6】複数データを表示させる

なんちゃってMockファイルを作成して、複数データをhtmlで扱う方法を学びます。

– Mockファイルを作成しましょう。
外部から参照できるようにexportの宣言を忘れずに！
“`typescript:mock-member.ts
import { Member } from ‘./member’

export const MEMBER:Member[] = [
{id:’1′,name:’daisuke’},
{id:’2′,name:’masato’},
{id:’3′,name:’takeshi’},
{id:’4′,name:’shiji’}
];
“`
– コンポーネントからMockファイルのデータを参照できるようにします。
– MEMBERをimportします。
– `members`という変数にMEMBERの代入しています。
※onSelectメソッドは今回関係ありません。（気にしないでください）
“`typescript:members.component.ts
import { Component, OnInit } from ‘

TypeScriptでワーカースレッド（Web Worker）を手軽に、そして型安全に使いたい

## ことの発端

Webブラウザで動作する `javascript` で [Web Wroker](https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API) の存在は知っていたのですが、ワーカースレッドで動作するコードは別ファイルにする必要があるという認識で、今まで「何とかならんかなぁ？」と思いながら過ごしていました。
で、つい最近 [PapaParse](https://www.papaparse.com/) を使用する機会があって、この `PapaParse` がワーカースレッドで動作させることができるので、これは良い機会と興味本位でスレッドで動くべき `javascript` ファイルはどこで読み込まれるのかを Webブラウザのネットワークログを見て観測していたら、`Blob URL` で読み込んでいました。

「なんですと！」

そこで、もうちょい調べてみると、こんな記事が！！！

https://stackoverflow.com/questions/5408406/web-workers-without-

【React】Webpackの設定で3種類のエラーが出たから原因と解決方法をここに記す

# 目次
[1.動作環境](#1-動作環境)
[2.バンドルしたファイル](#2-バンドルしたファイル)
[3.バンドル成功時のWebpackの設定](#3-バンドル成功時のwebpackの設定)
[4.上記のコードになるまでに出たエラー文と原因と解決方法](#4-上記のコードになるまでに出たエラー文と原因と解決方法)

# 1. 動作環境
Windows10
React 18.1.0
Webpack5
npm 8.5.5 (←2022年3月22日に公開されたバージョン)

# 2. バンドルしたファイル
今回Webpackでindex.jsを起点に2つのcssファイル、4つのjsファイルを辿って計6つのファイルをバンドルしました。


# 3. バンドル成功時のWebpackの設定
“`webpack.

npmコマンドまとめ

## はじめに
取りあえず使うのってこれくらい？
他につかたいコマンドがあれば都度調べるなり、付け足して使うなりしてください

## ローカル
**npmを初期化**
`npm init` `npm init -y`
**install**
`npm install `
**localのcommandを呼び出す**
`./node_modules/.bin/コマンド`
**簡単に呼び出す**
`npx コマンド`
**packageをdevDependenciesに記録する**
`npm install –save-dev `
**uninstall**
`npm uninstall `
**dependenciesも消す**
`npm uninstall –save `
**devDependenciesも消す**
`npm uninstall –save-dev `
**install済みのpackageを表示**
`npm list`

**特質事項**
過去のnpmのversion`

【まとめ】npm install と npm audit とnpm-check-updates

## npm install の概要

npm install を実行すると、 package.json に記載しバージョンのパッケージと、
そのパッケージを使用するために必要な関連モジュールをまとめてインストールしてくれる。

なお、この際にpackage-lock.jsonが自動作成され、
実際にインストールされたパッケージや関連モジュールのバージョン等が記載される。

次回以降に npm install を実行した場合、package.json ではなく package-lock.jsonを元にインストールが実行される。
package-lock.jsonの存在意義としては、チームで開発する場合などに関連モジュールのバージョンまで揃えられる、という点が主かと思われる。
そのあたり下記記事様がわかりやすく解説してくださってます。

https://qiita.com/sasao3/items/b794c1e44715bb6f834f

## パッケージのセキュリティに問題がある場合

上記 npm install でインストールしたパッケージやモジュールのセキュリティに問題がある場

なぜ !1 なのか？

プロジェクトの古いソースコードを眺めていると次のような記述があった。

“`javascript
{
hoge: !1
}
“`

`!1` ！？！？

そのコードを見た時、正直笑いました。
なんでそうなるの？？って。

そして理由を考えてみたのです。
かのプログラマーがそう書かないといけなかった理由を……。

### 推測① 短くしたかった

まっさきに思いついたのがこれです。
`false` ５文字に対して、 `!1` ２文字ですからね。

わからなくない。
わからなくはないんだけど……なぜ！　なぜ `0` にしない。
１文字いけただろ！

底妥協すんなよ！！

ということで、この推測は却下しました。

### 推測② 俺JSに詳しいんだぜって言いたかった

ほら、あるじゃないっすか！
三項演算子覚えたプログラマーが、やたらめったら三項演算子使っちゃうやつ。
めっちゃ見にくいからやめれ！！！

って感じで、 `JavaScript` の `1` が `true` として評価されるのを覚えた人が書いた、と。

これは普通にありそうだ。
……でもなぜ `0` にしない！！　

ヘッダ固定テーブル(縦横スクロール)（むりやり）

## DEMO
codepen

## イメージ
そのままの状態 |上や左が固定
–|–
|

## 気にしたこと
– position sticky だと作れなかった。
– 上や左を固定で置くために、tableを複数個置いた。
– HTML的には、いいコードではないけど、見た目重視。
– jQueryを使わない。

タグ付きテンプレートリテラルを理解したい

## はじめに

MDNによると、

>テンプレートリテラルは非公式にテンプレート文字列と呼ばれることもありますが、文字列リテラルではないので、文字列リテラルが使えるところならばどこでも使えるわけではありません。

恥ずかしながら、文字列リテラルだと思ってました。
MDN読んでると日々新しい発見があって面白いです。

## テンプレートリテラルのおさらい

文字列リテラルは、シングルクォートとダブルクォートで文字列を囲みますが、
テンプレートリテラルは、バッククォートで囲みます。

通常の文字列リテラルと違うのは主に2点。

:::note
1.改行できる。
2.プレースホルダーを含めることができる。
:::

## 改行について

“`TypeScript
// 文字列リテラル
const hoge: string = “Hello, \nworld!”;
console.log(hoge);

// テンプレートリテラル
const huga: string = `Hello,
world!`;
console.log(huga);
“`

結果

“`
Hello,
wo