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

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

四捨五入、切り捨て、切り上げをしたい(Math)

## はじめに
現在、独学でJavaScriptを勉強中です。
`Mathオブジェクト`で躓いてしまったのでまとめてみました。

## よく使うMathオブジェクト
`Math.round` ・・・四捨五入する(戻り値 数値)
`Math.round()メソッド`は次のような挙動をする。
・小数点部分が0.5以上であれば、次に大きい整数へ切り上げ
・小数点部分が0.5以下であれば、次に小さい整数へ切り下げ
“`javascript
Math.round(5.34); //結果: 5
Math.round(6.8); //結果: 7
“`
`Math.floor` ・・・切り捨てる。数値以下の最大の整数を返す(戻り値 数値)
※少数の大小に関わらず切り捨てる。
“`javascript
Math.floor(5.34); //結果: 5
Math.floor(6.8); //結果: 6
“`
`Math.ceil` ・・・切り上げる。数値以上の最小の整数を返す(戻り値 数値)
※少数の大小に関わらず切り上げる。
“`javascript
Math.ceil(5.34); //結

元記事を表示

BigQueryで分かち書き

# はじめに
BigQueryだけで自然言語系の処理をしたいケースがあって、その最小限の方法を調べました。一般的な形態素解析というののちょっと手前の、分かち書きまでです。品詞の特定とか、単語の原型を出さない。
品詞を特定するのは、辞書ファイルが必要で、BigQueryではライブラリから外部のファイルを読むことができなさそうだったので、ひとまず分かち書きまで。

[TinySegmenter](http://chasen.org/~taku/software/TinySegmenter/)というライブラリを使用しました。

# 最初に結果
分かち書きの結果
> 入力:明日は天気が良さそうなので買い物に行きたい
> TinySegmenterの結果:明日 / は / 天気 / が / 良さ / そう / な / の / で / 買い物 / に / 行き / たい

学校ではこの分野は超絶 ~~嫌い~~ 苦手だったので正解はわかりませんw
ただ以前、こちらの記事([kuromojiを使ったJavaScriptだけの形態素解析](https://qiita.com/yo16/items/880

元記事を表示

セレクトボックスの一部の項目を選択できなくする

# 見出し1
JavaScriptでセレクトボックスの一部を動的に選択できなくする方法を記載します。

# コード

“`HTML

“`

“`JavaScript
let items = Array.from(document.querySelectorAll(‘#selectbox option[data-val=”1″]’));
items.forEach(option => option.disabled = true);
“`

これでセレクトボックスのdata-valが1の項目が選択できなくなります。

元記事を表示

addEventListener()メソッドについて詳しく記載

## イベント発生時の関数を指定したいとき
`addEventListener()メソッド`は、特定のイベントが配信されるたびに呼び出される関数を設定します。
#### 構文
“`javascript
イベントターゲット.addEventListener(イベント, リスナー, [オプション*省略可])
“`

#### アロー関数を使う方法
アロー関数の利点はthisを固定できるというところです。
“`javascript
//要素の参照を取得する
const button = document.querySelector(‘.button’);

//アロー関数を使う方法
button.addEventListener(‘click’, () => {
console.log(‘ボタンがクリックされました’);
});
“`

#### function宣言を使う方法
“`javascript
//要素の参照を取得する
const button = document.querySelector(‘.button’);

//function宣言を使う方法
button

元記事を表示

express-generatorで作成したexpressプロジェクトをTypeScript化する

はじめまして。katと申します。
本記事が初投稿になります。至らない点があるかもしれませんが、何卒ご容赦ください。

今回は、express-generatorで作成したexpressプロジェクトをTypeScript化する方法について、学んだ事項を紹介したいと思います。

工夫した点は以下の3点です。
– views, publicフォルダを使用できる
– 開発用実行として、ts-node-devを使ったホットリロードで実行する
– 本番用実行として、jsファイルに変換した上で実行する

Githubリポジトリは[こちら](https://github.com/katkatprog/expressTs)です。

## 背景
つい最近、TypeScriptの基礎学習が終わり、何かしらアウトプットをしてみたいと思っておりました。
そこで、自室のラズパイ上で稼働中であるexpress-generatorで作成されたWEBアプリをTypeScript化してみることにしました。

その際、なるべくexpress-generatorの原型に沿ってTypeScript化したいと思ったため、view

元記事を表示

React-Hook-FormでRefを自作コンポーネントに渡したときのエラー・対処

## はじめに

本業でNext.js(React),TypeScriptを使用してて、React-Hook-Formを実装する際に**ref**を含む`register`を自作コンポーネントを渡した時に、
`Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?`
とエラーが出てのでその対処法についてのアウトプットです。

また、子コンポーネントにinputの属性含むpropsの型定義が冗長になってたのでrefを含む**ComponentPropsWithoutRef**を使って対処・リファクタリングも行いました。

:::note warn
**ref**についての説明は省いております。
:::

## 対処したコード

今回は自作したlabel付きのInputコンポーネントに対してバリデーションを実装したので、labelの型を含ませた子コンポーネントになっております。

“`typescript

元記事を表示

Re:ゼロから始めるSNS作り生活(一週間目+α)

# ☆どんな記事?☆
プログラミング初心者が、イチからSNSサイトを構築する過程を記録したもの。
誰かに「勉強の状況はどう?」と訊かれたときに提示できるよう、Qiitaの記事として投稿しています。
# ☆前置きや前提☆
### 完成品のイメージ
– コンセプトは「勉強記録をポストしたり、問題を出しあったりできるSNS」
– 自分の勉強記録をポストし、閲覧できる
– 友人の勉強記録に対し、コメントやミニクイズを投稿できる(本記事では未実装)
– 自分と似た目標を持つユーザーを検索し、フォローできる(本記事では未実装)
– フォローしている人の勉強記録を一覧表示する「タイムライン」もある(本記事では未実装)
– 当然レスポンシブデザイン(本記事では未実装)
### 制作の目的
– プログラミング技術の向上
– あわよくば友人にこのSNSを使ってもらいたい
### これまでの経験や知識
– WordPressで構築されたサイトの調整経験
(2年弱従事していたため、HTML・CSS・PHPとも基礎はわかっていたつもり)
(通信をはじめバックグラウンドの知識はゼロ)
– 大昔にイチからサイトを構

元記事を表示

SolidJS「分割代入しないでクレメンス」ワイ「Why」

# SolidJS君さぁ…
Reactとは違い、`state`や`props`を分割代入すると、reactivityが失われます。どういうことかと言うと、
“`jsx
const Component = (props) => {
const { isLoading } = props
return (
Loading…

}>

Some Content


)
}
“`
こうやって`isLoading`を分割代入すると、値が変わっても表示が切り替わらなくなります。
[`createSignal`](https://www.solidjs.com/docs/latest/api#createsignal)や[`createStore`](https://www.solidjs.com/docs/latest/api#createstore)によって作成された状態に関しても同じです。

## なぜなのか
公式ドキュメント

元記事を表示

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)

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

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

元記事を表示

OTHERカテゴリの最新記事