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

CORSにハマった…(Laravel, JavaScript)

CORSにハマったので、備忘録として記載します。。

## CORSとは、
> オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

引用元: https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

ハマった原因としては、GETリクエスト用のAPIだけ用意してCORS対策のレスポンスヘッダーを設定していたのですが、プリフライトリクエストを考慮しておらず、JavaScriptでCORSのエラーが発生していました。

## プリフライト(preflight)リクエストとは
> 単純リクエストとは異なり、「プリフライト」リクエストは始めに OPTIONS メソッドによる HTTP リクエストを他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リク

【JavaScript関数ドリル】中級編のunion関数の実装アウトプット

## union関数の課題内容

_.union関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#union

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】union関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では引数を受け取る際に、…で展開されているのが、参考になった。

## union関数の実装コード（答えを見る前）
“`javascript
function union(arrays) {
const unionArray = [];

for (let i = 0; i < arguments.length; i++) { for (let j = 0; j < arguments[i].length; j++) { if (!unionArray.includes(arguments[i]

【JavaScript関数ドリル】初級編のcompact関数の実装アウトプット

## compact関数の課題内容

_.compact関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#compact

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】compact関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。
– 前回まで、変数名をわかりやすいものにしていなかったので、今回は気をつけようと思った。

## 課題に取り組んだ後の状態

– 解答例とまったく同じ（変数名も含めて！）にできたので、嬉しかった。

## compact関数の実装コード（答えを見る前）
“`javascript
function compact(array) {
const compactedArray = [];

for (let i = 0; i < array.length; i++) { if (array[i]) { compactedArray.p

【JavaScript関数ドリル】初級編のdrop関数の実装アウトプット

## drop関数の課題内容

_.drop関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#drop

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】drop関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では、第２引数が０の場合や配列の長さより長い場合をあえて分けて処理するなど、自分のコードと違う部分があるが、自分の実装コードのforループで、第２引数が０の場合は処理されないように記述し、第２引数が配列の長さより長い場合も含め、サンプルの処理結果が同じように出ているため、このままで良いかと判断。
– もし、極端に大きすぎる第２引数が渡された場合に備える場合は、むだにforループを続けてしまうので、やはり解答例と同じようにif文を使いたいと思う。

## drop関数の実装コード（答えを見る前）
“`javascript

function drop(array,

【JavaScript関数ドリル】初級編のdropRight関数の実装アウトプット

## dropRight関数の課題内容

_.dropRight関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#dropRight

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】dropRight関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例では、第２引数が０の場合をあえて分けて処理するなど、自分のコードと違う部分があるが、自分の実装コードのforループで、第２引数が０の場合は処理されないように記述し、サンプルの処理結果が同じように出ているため、このままで良いかと判断。

## dropRight関数の実装コード（答えを見る前）
“`javascript
function dropRight(array, n = 1) {
const newArray = […array];

for (let i = 0; i < n; i++) {

【JavaScript関数ドリル】初級編のfill関数の実装アウトプット

## fill関数の課題内容

_.fill関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#fill

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】fill関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできるか自信がなかった。

## 課題に取り組んだ後の状態

– 解答例とは違う部分があるが、このままで良いかと判断。

## fill関数の実装コード（答えを見る前）
“`javascript
function fill(array, value, start = 0, end = array.length) {
for (let i = start; i < end; i++) { array[i] = value; } return array; } ``` ## fill関数の実装コード（答えを見た後） ```javascript // 同じ ```

【JavaScript関数ドリル】初級編のflatten関数の実装アウトプット

## flatten関数の課題内容

_.flatten関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#flatten

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】flatten関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできるか自信がなかった。

## 課題に取り組んだ後の状態

– なんとか処理結果がサンプル処理結果と同じにはなるように実装したものの自分のコードが腑に落ちない状態だった。
– Array.isArray()という便利なものがあることを改めて認識した。

## flatten関数の実装コード（答えを見る前）
“`javascript
function flatten(array) {
const newArray = [];
for (let i = 0; i < array.length; i++) { if (typeof (array[i]) === "object"

【JavaScript関数ドリル】初級編のhead関数の実装アウトプット

## head関数の課題内容

_.head関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#head

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】head関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– シンプルすぎて、関数を書くほどの処理でもないので、何かしら見逃しているのかと気になったが、解答例と同じなので安心した。

## head関数の実装コード（答えを見る前）
“`javascript
function head(array) {
return array[0];
}
“`

## head関数の実装コード（答えを見た後）
“`javascript
// 同じ
“`

【JavaScript関数ドリル】初級編のindexOf関数の実装アウトプット

## indexOf関数の課題内容

_.indexOf関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#indexOf

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】indexOf関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例はfromIndexが負の数の場合の処理を別途書いていないようなので、その辺り、自分の書いたコードでよいのか判断に悩みました。(※Lodashのページには、”If fromIndex is negative, it’s used as the offset from the end of array.”とあったため)

## indexOf関数の実装コード（答えを見る前）
“`javascript
function indexOf(array, value, fromIndex = 0) {
if (fromIndex < 0)

【JavaScript関数ドリル】初級編のinitial関数の実装アウトプット

## initial関数の課題内容

_.initial関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#initial

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】initial関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例は引数の配列を一旦新しい配列にコピーし、その新しい配列からpop関数で最後の値を取り除いている点が、自分の解答と主に異なる点で、その方が早く処理できそうなので参考になった。

## initial関数の実装コード（答えを見る前）
“`javascript
function initial(array) {
const newArray = [];
for (let i = 0; i < array.length - 1; i++) { newArray.push(array[i]); } r

【JavaScript関数ドリル】初級編のjoin関数の実装アウトプット

## join関数の課題内容

_.join関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#join

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】join関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例は引数の配列を一旦新しい配列にコピーし、配列の最初の値を変数宣言時に入れているのが、自分の解答と主に異なる点で、そういう方法は思いつかなかったので、参考になった。

## join関数の実装コード（答えを見る前）
“`javascript
function join(array, separator = ‘,’) {
let str = “”;
for (let i = 0; i < array.length; i++) { str += array[i]; if (i < array.length - 1) {

React始めました

Reactで何か作ろうと思ってずっと先延ばしになっていたんですが、
ようやく勉強を始めることができました！

で、学んだことをゆるーく備忘録として残していこうと思います。

お手柔らかにお願いします！

## ファイル準備
ディレクトリ構成はこんな感じ

“`
app
└─ public
└─ scripts
“`

“`html:app/public/index.html