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

バックエンドに『FastAPI』、フロントエンドに『Vue.js』を用いて開発する際の『CORS』対策

バックエンドに『FastAPI』、フロントエンドに『Vue.js』を用いてWebアプリを開発する際、
それぞれローカルサーバーを立ち上げ、『Vue.js』から『FastAPI』にAPIをたたくと『CORS』エラーがでます。
これを回避するため、『FastAPI』のコードに下記を追記します。

“`
from starlette.middleware.cors import CORSMiddleware

origins = [“http://localhost:8080”]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=[“*”],
allow_headers=[“*”],
)
“`

『Vue.js』のローカルサーバーは、デフォルトで”http://localhost:8080″ですので、
これを開放します。

React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する

[React Hook Form](https://react-hook-form.com/jp)は、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「[はじめる](https://react-hook-form.com/jp/get-started)」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。

# インストール
React Hook Formは、`npm install`コマンドでつぎのようにインストールします。

“`terminal
npm install react-hook-form
“`

アプリケーションを手もとでつくるには、[Create React App](https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app)

javascript入門

####こんにちは
今回は短編です。
今回することは、javascriptの入門編です。
では、やっていきたいと思います。
####`はじめに…`
では、はじめに色々なことを説明していきます。
まず、`javascriptって何ができるの？`ということを説明します。
簡単に説明すると『動的なサイトの作成』です。
でも、これだけじゃ何言ってるのかはわかりませんよね？
では、具体的に説明します。
例えば、私がしているのは、`RPG開発`です。
こういう感じにまず作り方を考えます。
↓
キャラクターを動かしたいな〜…
①キャラクターを表示させる場所(canvasと言います)を表示させる
②キャラクターを表示させる
③キーが押されたかを検知する
④色々な場所にキャラクターを表示させる

このように一つ一つ考えていきます。
では、今回は入門編なので簡単な文法を覚えていきます。

####`作動環境`
まず動く前提として、javascriptを許可しているかを確認します。
そして許可されていなければ許可をしてください。

次にわたし的にコードを書く中で、使いやすいと思ったのが[`CodeP

【Javascript】フォームバリデーションを実装してみた

#はじめに
割り勘額を計算してくれる簡易Webアプリを作成中に、Javascriptでフォームバリデーションを実装してみたので学習メモとして残しておく。CSSでの細かいスタイリングは記載しない。
当方、初学者のため記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。

#要件
「追加」「削除」(1～8人)が可能なフォームにて、以下の要件を満たすバリデーションを実装したい。
※フォームの追加、削除方法に関しては以下の記事に記載しています。

[templateタグを使ってフォームを複製]
[templateタグを使ってフォームを複製]:[https://qiita.com/cookiesand1023/items/d7e25d51e3a9143879f6]
[【Javascript】remove()で要素を削除する]
[【Javascript】remove()で要素を削除する]:[https://qiita.com/cookiesand1023/items/3cd57fd51f85ff920990]

▼個々のフォームのルール
・名前:12文字以下。
・年齢:

JavaScript入門(例外処理)

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
exception.js：例外処理記述ファイル
index.html：「exception.js」を使用、および開発者コンソールで確認する際に開くファイル

**【★ポイント】*

【React】コンポーネントのimportとexportについて【JavaScript】

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

##コンポーネントのimportとexportについて

### Reactではコンポーネントを分ける
Reactでは、1ファイル1コンポーネントになるように記述していき、importとexportをすることでそれらを組み合わせ、最終的な形にしていきます。
理由は以下の通りです。

– 何のための部品なのか明確にするため
– 管理しやすくするため
– 再利用するため

JavaScriptのモジュールと同様です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

### importとexportの使い方
improtとexportはReactでは以下の方法で行います。

“`sample.js
// デフォルト

【WordPress+Symbol】特定のトークン（モザイク）を持っている人のみ記事を閲覧できるプラグイン

WordPressと暗号通貨プラットフォームのSymbolを組み合わせて、特定のトークン（モザイク）を持っている人のみ記事を閲覧できるプラグインを作ってみました。

最初に言い訳を……
PHPのコードを書いたのも、WordPressのプラグインを作ったのも、今回が初めてです。
ついでに言うとJavaScriptもそれほど詳しくありません。
そんな人間が勉強目的で作ってみたものなので、これを本番環境で稼働させることはお控えください。
コードやアイディアの叩き台として何かの役に立てば幸いです。

準備

Symbolのモザイクを使って記事の閲覧の可否を判断するプラグインということで、WordPressの管理者側でもSymbolのアドレスとモザイクが必要になります。

ウォレットのインストールはこちらをご参照ください。
Symbol(XYM)デスクトップウォレットのインストール＆設定方法！！

モザイクの発行はこちらをご参照ください。
【Node.js】バージョンが古くてfetchが使えんのお

# はじまり
Node.jsのための環境を以下の記事のように立ち上げました。

https://zenn.dev/kinkinbeer135ml/articles/6369ee73dd1508

そして、そのまま、fetchを使ったスクリプトが動くかどうかを試してみたのですが、
何か自分のスクリプトとは違うエラー（Unexpected Identifierみたいな）が出現しました。

そこで調べてみてこんな記事を見つけました。

https://chaika.hatenablog.com/entry/2019/01/23/083000

そこには、importを使うスクリプトの拡張子は`.mjs`でなければならないと書いてあったのですが、
fetchはメジャーなモジュールなので、流石にそんなヤバい挙動を2年も引き摺っていないだろうと思いました。
恐らく、Node.jsのバージョンを上げれば直るだろうと思い、この記事を書きました。

今回、立ち上げた環境は、ubuntuです。

# 問題のやつ
これが出てきたエラー画面です。
![20220103_01.jpg](https://qiit

LocomotiveScroll と ScrollTriggerを連携させる

LocomotiveScroll と GSAPのScrollTriggerを連携させたときのメモです。

GSAPの公式がCodepenに[サンプル](https://codepen.io/GreenSock/pen/ExPdqKy)をあげてくれていますので、完成形やより詳細を知りたい方はこちらを参考にしてください。
ポイントとなる部分のコードをみていきます。

“`jsx
gsap.registerPlugin(ScrollTrigger);

const locoScroll = new LocomotiveScroll({
el: document.querySelector(“.smooth-scroll”),
smooth: true
});
locoScroll.on(“scroll”, ScrollTrigger.update);

ScrollTrigger.scrollerProxy(“.smooth-scroll”, {
scrollTop(value) {
return arguments.length ? locoScroll.scrollTo(va

typescriptのcallback関数がぱっと見が謎だった

udemyの講座を見ていてぱっと見謎だった。
console.logで42が表示されるソースが以下。

“`index.ts
function doubleAndHandle(num: number, cb: (num: number) => number) : void {
const doubleNum = cb(num * 2);
console.log(doubleNum);
}
doubleAndHandle(21, doubleNum => {
return doubleNum;
});
“`

googleでアロー関数を調べて理解した。要は無名関数の以下と同義。

“`index.ts
doubleAndHandle(21, function (doubleNum) {
return doubleNum;
});
“`

()を付けたほうがわかりやすいと思った。

“`index.ts
doubleAndHandle(21, (doubleNum) => {
return doubleNum;
});
“`

素人なりに本気でJavaScriptでクイズアプリを作ってみた。

どうも。

JavaScriptでクイズアプリを作ってみました。

こちら[おいしい数学](https://hiraocafe.com)という現在月間40万PVぐらいのサイトを運営しているものです。ネットだとAKRという名前を使っている場合もあります。別に本名を隠したいとかまったくないのですが。

さて、受験生が入試前に、数学(今回はIA)の頻出事項、弱い事項が確認できるように、クイズアプリを作りたいと思いました。

完成はこちらです→[ファイナルチェック数学IA](https://hiraocafe.com/note/finalcheck1a.html)

条件としては
・答えを場所で覚えないため選択肢がランダムで表示されて欲しい
・数式も問題なく表示して欲しい
・得点を集計し、それに応じた判定文を出す。そして解けなかった問題を最後に提示する

この辺です。

htmlとJavaScriptのソースコードを公開します。このアプトプットが将来の自分、そしてどなたか(特にプログラミング経験が浅い人)のためになれば幸いです。

まずはhtmlから(articleタグの中だけ公開です)

`

JSONがどんなものかをなんとなくで解説

「JSON」という言葉を知ってネットで色々と検索したものの、イマイチ意味がわからず
「結局JSONってなんやねん!!」と思っていたのですが、現場の先輩にとても丁寧に解説されて納得したので、さらに自分なりにまとめて解説していこうと思います。

##JSONとは!!
**JSONとはJavaScriptオブジェクトを文字列化したもの**。。。らしいです。
いきなり言われてもわけが分からないですねよね。
説明をする前にJSONってやつを見てみましょう。
JSONの例を出すとこんな感じです↓↓

“`ruby:jsonExample
‘
let JsonExample = {
‘id’:12345,
‘name’:hogehoge,
‘info’:{
‘money’:10000,
‘type’:’A’
}
}
‘
“`

↑だけ見てもわからないので、説明文の言葉で僕がイマイチ分からなかった部分を個別に解説して、説明文全体を理解していこうと思います。
ここで分からないことを一つずつ紐解いていきます。
僕がJSONの解説をされて分からなかった言葉↓↓
・オブジ

TestCafeを触ってみる

# 概要

E2EテストフレームワークのTestCafeを簡単に触ってみます。
※ごく簡単な説明しかしてないです。
# TestCafeの特徴

– TestCafeはE2Eテストを行うためのフレームワークです。
– JSでテストコードを書くことができます。
– 導入も簡単で、Seleniumの様なDriverを用意する必要はありません。

# 導入

npmでインストールします。

“`shell
$ npm install -g testcafe
“`

testcafeコマンドが通ればOKです。

“`shell
$ testcafe -v
1.18.1
“`

# テストを書く

テスト対象はテスト自動化練習サイトの[HOTEL PLANISPHERE](https://hotel.testplanisphere.dev/ja/index.html)を利用します。
ここでは、宿泊プランの予約画面でプラン名が正しく表示されているかを確認するテストを作ります。

![img_001.jpeg](https://qiita-image-store.s3.ap-northeas

【JavaScript】定数で長い文字列(SQL文)を持たせる

## はじめに
筆者はJavaScriptの経験が浅いため、参考程度にご覧いただければと思います。
また、誤記や誤字、アドバイス等ありましたら、コメントお願いします！

## 経緯
Node.jsを使用したAPI作成で「SQL文」を文字列として、const定数に持たせる際、
どのように書けば見やすいのか、候補をまとめてみました。

## １行で書く
短いSQL文なら問題ないが、定数宣言合わせて２行になる場合は、
横スクロールしないと、全体が確認できないので、見づらい

“`Javascript
const sqlStr =
“SELECT param1, param2, param3, param4, param5 FROM test_table WHERE param6 = ‘test’;”;
“`

## 加算演算子で文字を連結
JavaScriptを触ったことがない人でも
何となくイメージしやすい形かつ、コードが長くなっても見やすい

“`Javascript
const sqlStr =
“SELECT” +
” param1,” +
” param2,”

【JavaScript】map()メソッド、filter()メソッド、splice()メソッド、三項演算子

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

##map()メソッド
配列のすべての要素に対して与えた関数を実行して、その結果を配列として返します。
返り値が配列であることを望まない場合には、`forEach()`を使用します。
map()メソッドの記述例は以下の通りです。

“`sample.js
const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// Array [2, 8, 18, 32]
“`

##filter()メソッド
配列の要素に対し、指定した条件に合致するもののみを取り出し、新たな配列を生成するメソッドです。
条件に合致する要素がひとつもない場合には、空の配列を返します。
記述例は以下の通りです。

“

【Vue.js】v-forの中でクリックイベントをシンプルに実装したい【e.target】

#やりたいこと

v-forを使用してボタンとなる要素を複数作成。
ボタンのいずれかをクリックした際に、クリックしたボタンだけ色が変わるようにしたい。

上記内容をできるだけシンプルなコードで実装したい。

####forEachを使う場合

See the Pen
button color change(vur.js sample)

今Vue3やるなら＜script setup>を使おう

# はじめに
※ qiitaのxss対策に引っかかって引用先のMarkdownが壊れる問題があるようなので、タイトルの<が全角になっていますが気にしないでください。 まめに知識のアップデートをしている方はご存知でしょうが、vue3.2から\
“`

これが

“`vue