- 1. 四捨五入、切り捨て、切り上げをしたい(Math)
- 2. BigQueryで分かち書き
- 3. セレクトボックスの一部の項目を選択できなくする
- 4. addEventListener()メソッドについて詳しく記載
- 5. express-generatorで作成したexpressプロジェクトをTypeScript化する
- 6. React-Hook-FormでRefを自作コンポーネントに渡したときのエラー・対処
- 7. Re:ゼロから始めるSNS作り生活（一週間目＋α）
- 8. SolidJS「分割代入しないでクレメンス」ワイ「Why」
- 9. JavaScriptで小数点を切り捨て表示する方法
- 10. 【React】公式のチュートリアルをやってみる～①環境構築
- 11. Prettier と plugin だけで Node.js のモジュール import の並び順を整える
- 12. Javascriptの非同期処理とfetch APIについて学ぶ
- 13. Vue3 & Vuetify3でバリデーション付きのフォームを作ってみる
- 14. 未経験者がポートフォリオを作成してみた。【Laravel /Vue.js/ AWS】
- 15. JavascriptのObject,Class,Constructorを27分57秒で完璧に理解する記
- 16. js系アプリ開発でよく使うコマンド備忘録
- 17. 非同期処理
- 18. 【Deno】ReadableStreamでFizz Buzzして無限Fizz Buzzサーバーを建てる
- 19. Three.jsで目指せ60FPS : ジオメトリ結合編
- 20. JavaScriptのデバッグにはdebugger文を使おう
四捨五入、切り捨て、切り上げをしたい(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の結果：明日 / は / 天気 / が / 良さ / そう / な / の / で / 買い物 / に / 行き / たい学校ではこの分野は超絶 ~~嫌い~~ 苦手だったので正解はわかりませんｗ
ただ以前、こちらの記事（[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…
}>
)
}
“`
こうやって`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の基本事項は知っている前提です。だいぶ回りくどい記事になっています。
.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)### スタックトレースを使って問題をどう切り分けるか
まずは問題が起きている箇所のスコープを狭くしていきましょう?問題の切り分け方として
– ざっくり入口と出口の関数に適切な値が入っているのか
– 外れ値の場合はどうか
– 意図していない値が入ったとき
