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

JavascriptとReactの学習ロードマップ

# はじめに

今回は、フロントエンドエンジニアがほぼ必須で使うJavascriptとReactのおすすめの学習ソースをご紹介します。今後の記事では、TypescriptやGraphQL、環境周りやフロント設計についてもご紹介しようと思います

どの学習においても言えることですが、インプットしたらアウトプットすることが大事です。僕のおすすめはチームを組んで開発することです。Twitterなどで募集したら割と集まると思うので、是非やってみてください

チーム開発のためのコミュニティも運営しているのでご興味あれば是非お声掛けください?（めっちゃ小さいです）

# 幅広く学ぶ Javascript編

– [しまぶーのIT大学 基礎から学ぶJavascript入門](https://www.youtube.com/playlist?list=PLwM1-TnN_NN7-zdRV8YsGUB82VVhfYiWW)
– [しまぶーのIT大学 モダンJavascript](https://www.youtube.com/playlist?list=PLwM1-TnN_NN4SV6DEs4OtfA5

form通用、jquery.validate.min.jsで項目の入力チェック仕組み

“`sample.html
xxx

xxx

“`
“`formValidator.js
// JavaScript Document
// 各画面入力の共通チェックなど
// 効率的に共通化観点で、なるべく以下の観点で設計しましょう：
// ① 各画面に同じ項目であれば、該当項目の「name」属性を同様に設定する。
// ②

(function () {
//標準エラーメッセージの変更
$.extend($

ランダムな整数値を生成する

## ランダムな整数値を生成しよう。

| 0 | 1 | 2 | 3 | 4 |
|:———–|————:|:————:|:————:|:————:|
| 0.00… | 0.99… | 1.99… | 2.99… | 3.99… |

“`javascript

Math.random()
//0.00…~0.99…1未満の数値をランダムで生成　
“`
**注意！１を含まない**

###０から2までのランダムな整数を生成する。

“`javascript
Math.random * 3
//0.00…~2.99…までのランダムな整数を生成する。
“`
整数値だけが欲しいので小数点以下を切ります。

“`javascript
Math.floor(Math.randomu() * 3)
“`
###０からnと決まった範囲ではない場合
“`javascript
Math.floor(Math.random() * (n+1)

//応用　min ~ Ma

jQuery　イベント発火

買い物リストアプリに非同期ツールを導入するため、カリキュラムの復習をしました。

非同期通信　（Ajax）エイジャックスと呼ばれる。
非同期通信とは
リクエスト後にレスポンスを返す際、ブラウザーに再読込されることなく通信が行われる通信法。
“Asynchronous JavaScript + XML”と表現される。
Ajaxでは、レスポンスのデータにJSONという形式が使われることが多い。

JSON
Java Script Object Notationの略で、データ交換を行うためのデータ記述形式の一種。
Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式。

同期通信
デフォルトアクション
HTMLの要素を操作した際に定められている挙動
追加ボタンを押すとリクエストがおくれる。
リクエストに対してのレスポンスはJSON形式で返してほしい旨をリクエストに含めます。
フォーム要素のデフォルトアクションを無効にする。

非同期通信をする際は、リクエストにJSON形式で返してほしい旨の情報が含まれているため、その場合の対処をコントローラのアクションに明記する必要があ

SvelteのAwait blocksを使ってみる

# はじめに
Web APIでデータを取得する際にfetch APIだけを使っていたのですが、
`.then`が何回も出て見通しが悪くなったので、async/awaitとSvelteのAwaite blocksで見通しをよくする。

# 元のコード

“`javascript

{#if items}
{#each items as item}

{item.name}

{/each}
{:else}

ロード中

{/if}
“`

# async/await Await blocks

“`javascript