JavaScript関連のことを調べてみた2020年11月28日

JavaScriptで加速度センサーひろってみた

# 加速度センサーを拾ってみた

`window.addEventListener(“devicemotion”, ハンドラとなる関数);`
で拾えます。（使えるかどうかは、使用しているデバイスとブラウザに依存します。）


– 赤 ・・・ `event.accelerationIncludingGravity.x` の値
– 緑 ・・・ `event.accelerationIncludingGravity.y` の値
– 青 ・・・ `event.accelerationIncludingGravity.z` の値
– 白 ・・・ 上記をベクトルとみなしたときの長さ。（それぞれを2乗して和を取って平方根を取ったもの）

# CodePen

（※センサを搭載していないデバイスで閲覧している場合、何も面白くないものが表示されていると思います。）

ProgateのJavaScript　PHPとの類似点及び反省点

Progate
・JavaScriptII

繰り返し、配列、オブジェクト等
上記の内容でしたが、こちらもPHPと類似点が多い印象でした。
バッククォーテーションを用いたテンプレートリテラルは忘れてしまいがちなので意識していきたいです。
while文、for文、swich文はほぼPHPと同じ。
配列とオブジェクトは初感覚でした。
応用問題は、変数（定数）.プロパティ　を用いた処理を忘れずに行いたいです。
ただ、基礎の組み合わせなので難しくはないですね！

JavaScript 基礎

#JavaScriptとは

プログラミング言語の1つで主にクライアントサイド(WEBブラウザ上)で力を発揮します。
現在、JavaScriptは多くののWebアプリケーション開発現場で用いられているほど人気のある言語です。また、世界で最も使用されている言語だと言われています。

#JavaScriptの主な役割

・ ページ遷移無しで画面の表示を切り替えられる
・ 画面を更新をせずに、サーバーと通信できること

クライアント側のぺージに動きを付けることで、ページ遷移なしで画面の表示を切り替えられる。
その結果、ユーザーはストレスなく様々な情報を得ることができます。

react-hook-formでサーバーサイドで行ったバリデーション結果がコントロール操作時にクリアされる

react-hook-form v6.10 ~ 6.11.5 までで確認した挙動です。

## やろうとしたこと

react-hook-formを使用して情報登録用のフォームを開発していたが、
仕様上フォームの入力内容バリデーションはAPIを呼び出してサーバーサイドで実施しなければいけなかった。

理由は単純で、フォームの入力内容がバリデーションを通った場合は入力項目を表示する確認画面を表示し、
バリデーションエラーがあった場合にはフォームの再入力を促すという画面構成だったからだった。

“`plaintext

+——+
| Form |<---+ +------+ | | Submit | +--------+ フォームが submit されたらバリデーションAPIで検証。 | 検証OKなら確認画面へ、バリデーションエラーがあった場合は | バリデーションエラーメッセージを表示したフォーム画面を再表示する。 v +---------+ | Confi

Progate　JavaScript　PHPとの類似点

Progate
・JavaScriptⅠ

PHPの記述と似ていると感じました。
変数の定義の仕方が
Java→let **
PHP →$ ***
PHPをはじめに学んでいた為、すんなりと終えることができました。

Java Script初心者が覚えた、エラー把握＆解決方法のまとめ

#console.log();

“`
console.log(“Hello”);
“`
等と構文内に入れ、cromのディベロッパーツールを使ってどこまで実装されているのか、どこで止まっているか切り分けると便利です。
Helloの部分は変数を代入して、値がきちんと取得されているかなど、確認します。

#スマホでのconsole.logの確認方法
スマホではconsole logが見れないので

“`