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

フロントエンド周りでお世話になった本と記事一覧（随時更新）

## 概要
フロントエンド周りで参考になった、学びがあった本と記事のまとめ
公式ドキュメントは見ている前提なので省いてます（ReactだけBeta版があるので紹介）

## JavaScript
### [JavaScript Primer](https://jsprimer.net/)

### [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

## TypeScript
### [TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)

### [サバイバルTypeScript](https://typescriptbook.jp/)

### [プロを目指す人のためのTypeScript入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%

IntersectionObserverを使うときに、複数作っても大丈夫？と悩んだのでメモ

# observer　=　new IntersectionObserver はいくつも作れます！

コーディング練習でPhotoshopカンプからのコーディングを練習していたときに、
少し悩みました。
でも、よく考えたら、ふつうにつくれるでしょうということのような気もしますが、
ぼくの勉強も含めて記事にしようと思いました。

# やりたかったこと

１つのページの中で、交差オブザーバーを使って、以下の２つを付けたいと思いました。

– ある程度スクロールしてきたらヘッダー出現
– スクロールに合わせて、タイトルや画像が入ってくる、よくあるやつ

最初にヘッダーの出現をIntersectionObseverを使って実装していました。
その後、スクロールに合わせてのアニメーションはお手軽なAOSにしようとしました。
すると、まだきちんと確認していないのですが、競合してしまっているような感じがしました。
なので、すべてのアニメーションをIntersectionObseverを使おうとしました。

# ちがうアニメーションをつけたい。
ということで、オブザーバーのインスタンス（？）を２つ作りた

無料でJavaScriptを学べるサイト

# 無料でJavaScriptを学べる「javascripttutorial.net」

プログラミングの学習をしていて出会ったサイトがあります。
それが「**javascrittutorial.net**」というサイトです。

https://www.javascripttutorial.net/

ほとんどの内容が網羅されている海外のサイトになります。

すべて英語表記なので、苦手な方はとっつきずらいかもしれませんが、
このサイトをみながら英語読解にも慣れていこうという勢いでぜひ見てみてください（笑）

ちなみに
– **ES6(ES2015)以降の内容**
– **JS BOM / JS DOM**
– **WEB API**

などなどの内容が載せられています！

# まだまだあった！
JavaScriptだけではなく、他にも言語別でサイトがありました！
どちらも「javascripttutorial.net」の姉妹サイトです。

## Pythonが学べる「pythontutorial.net」

https://www.pythontutorial.net/

## Ty

AngularJsを勉強してつまづいたところを振り返る【コントローラー編】

# はじめに
先日、AngularJsを初めて勉強したのですが、
これまでFWを用いたフロントエンドの改修経験が全くなく、
勉強の過程で色々つまづいたので個人的に重要そうなところを備忘録として残します。

今回はAngularJsのコントローラーについて取り上げます。

:::note warn
バージョンについて
本記事で扱うフレームワークはAngular（ver2以降）ではなく、AngularJs（ver1.x系）です
:::

# 初めてコントローラーの定義を見た時の感想
タイトルにもある通り、AngularJsのコントローラーの定義の理解に時間がかかりました。

AngularJsを解説しているサイトを色々見ていると
サンプルコードとして以下のようなソースが取り上げられるのですが、

なんとなくwebpackを使うのはもう終わりにする。【動作確認編】

[webpack公式サイト](https://webpack.js.org/)

# はじめに
webpackビギナーです。
タイトルの通り、なんとなくwebpackを使っていたのでなんとなくを卒業すべくまとめてみました。:hatched_chick:

今回は**基本動作を確認し概念を理解**します。
具体的なwebpackのファイルの設定方法はまたの機会にしようと思います。

# webpackってなんだ
* JavaScriptのモジュールバンドラー。
* 通常**Babel**と一緒に使われる。
* **複数のファイルを一つまたは少数のファイルにバンドルしてくれる**（束ねてまとめてくれる）。
* ちなみに画像ファイルとかも一緒にバンドルしてくれる。

# webpackを使うメリット
* ファイルをバンドルするので、**リクエス

【Rails】リロードをしないとJavaScript (jQuery)が動作しない

今回はスクールでも頻発している
”リロードしないとjQueryが動かない問題”について記事にしていこうと思います。
かくいう私も見事この沼にハマり、かなり悩まされました、、、

# 開発環境
Rails 6.1.4
ruby 2.6.3

# 目次
– 原因
– 対処法
– 対処法（番外編）

## 原因
私の場合、FontAwesome導入時にjQueryのコードを追記していたのですが、
なぜかそれが削除されており、jQueryが作動しないという状況でした。

## 対処法

下記のコードを追記します。

“`ruby:config/webpack/environment.js
const webpack = require(‘webpack’)
environment.plugins.prepend(
‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery/src/jquery’,
jQuery: ‘jquery/src/jquery’,
Popper: ‘popper.js’
})
)
“`

【超便利】MIDIでコード/スケール名を逆引きできるWebアプリ作った【個人開発】

超便利な**音楽系Webアプリ**を作ったので、紹介します！＼(^o^)／

# どんなアプリ？

一言で言えば、「**コード/スケールの逆引き検索アプリ**」です。

…とは言え、ただの逆引き検索アプリではありません！
自分が「あったらいいな！」と思う機能をたくさん盛り込んだ

**超　便　利　ツ　ー　ル（自己評価）**

です！

では、詳しく機能と使い方を説明していきます！！！(๑˃̵ᴗ˂̵)و

# 主な機能と使い方

## 基本的な使い方

### ページへアクセス！

Webアプリなので、まずページへアクセスしてください。笑

https://o-to.khufrudamonotes.com/o-to-reverse-lookup-keyboard

※PC推奨です。
※ブラウザは、**Google Chrome**や**Microsoft Edge**を使ってください。
（現時点では、[**Web MIDI API**](https://caniuse.com/?search=Web%20MIDI%20API)に非対応の**Safari**や**Firefox**で

自己紹介ページをReact,Next.js,Tailwind CSSで作成してみた

# ランディングページで苦労したこと

今回企業さんの課題で、以下ルールでランディングページを作成する課題があったので挑戦してみました。
12月からJavascriptの勉強を始めた初学者なので、
作成までの学習方法や躓いた点など初学者中身に共有できたらと思います！

プログラミング言語： JavaScript
UIライブラリ：　React
フレームワーク：　Next.js
CSS:Tailwind CSS

## 1. プログラムの学習方法
ルールに記載したJavaScript,React,Next.jsそしてTailwind CSSの学習方法についてまずどうしたかを紹介します。

まず何をするにも基本的にこちらの知識がないと何もできないですよね。。
自分が効率的！と思った動画や参照サイトについて説明します。

### JavaScript
JavaScriptは、王道のドットインストールで学習しました！

### React
Reactは、Webサイト上のUIを効率よく開発するために作られたUIライブラリだそうです。
今注目のUIライブラリだとのことでモチベーションが上がります:f

JavaScriptのPrototypeについて

# 初めに
JavaScriptを勉強し始めてすぐ遭遇する概念ですが、なかなか全般的に理解できないのでそのまま放置してました。（読めるけどうまく使えなかった）最近もう一度JavaScriptを勉強することを機に、自分の言葉でわかりやすくまとめていきたいと思います。

まずはJavaScriptのオブジェクトは何？から始めたいと思います。
前に書いたものを振り返るとやっぱりあの頃の自分はまだ全般を理解していなかったと思った。例えば`typeof`運算子で`Array`が`object`だと疑問があったけど、自分の中は実践が大事だから使いこなせるまでそのまま疑問を放置してました。
でもこうして振り返りの大切さ、そしてやりがいも感じました。わからないことをわかるようになる楽しみを味わいながら頑張っていきたいと思います！

# Object in JavaScript

JavaScriptのデータ型は大きく分けると、プリミティブとオブジェクトがあります。

**Primitives**
`String`
`Number`
`BigInt`
`Boolean`
`undefined`
`Sym

日付自動生成型生年月日フォームを作る（うるう年判定含む）

# 導入
問い合わせフォームや会員登録フォームで、生年月日を入力するプルダウン、よくありますよね。

その中で、月の末日というのは、「3月は31日まで」「9月は30日まで」「2月はうるう年なら29日まで」など、年月によって変わってきます。

存在しない日付は、最初から選択肢に無いほうが望ましいですよね。

ということで今回は、選択された「年月」から、選択可能な「日」を自動生成してくれる、さらにはうるう年も考慮にいれた、いい感じのフォームをjqueryで実装します。

# 1. フォームを作る

最初にシンプルなフォームを作ります。

“`html

【JavaScript】要素のドラッグ＆ドロップ

このように投稿した要素のドラッグ＆ドロップができるよう実装します。
# 投稿した要素のドラッグ＆ドロップ
“`php

“`
投稿をブラウザに表示します。
次に、JavaScriptでドラッグ＆ドロップを実装します。

“`javascript
$(document).on(‘dblclick’, ‘.memo’, function(event) {
let memo = document.querySelector(‘.memo’);
let currentD

carrierwaveとcocoonを使った複数枚画像投稿

# 執筆中

## 概要
carrierwaveとcocoonを使った複数枚画像投稿機能。
結論から言うと、本体とは別に画像テーブルを作成し、formをcocoonで複製しないと、ハッシュ化した複数投稿はできない。(と、思う。)
いろいろな記事があるが、画像の名前をハッシュ化していなかったりとピンとくる記事がなかったのでそれらを補ったものを投稿する。

## 開発環境
・Ruby: 3.1.2
・Rails: 7.0.2
・OS: macOS Monterey

## 準備
### テーブル構成
本が1に対して、画像が多のテーブル構造。
[carrierwaveの公式サイト](https://github.com/carrierwaveuploader/carrierwave)では複数画像の時は、json形式のカラムを作り(本記事だとbook)、そこに配列形式で格納する方法が紹介されているが、この方法で実装するとファイル名のハッシュ化で詰む。(後の、画像テーブルは別で用意するにて詳述する)

“`
# images
lass CreateNoticeImages < ActiveRe

React + TypeScript: React 18でコンポーネントのマウント時にuseEffectが2度実行されてしまう

React 18でコンポーネントをはじめて表示(マウント)したときに、`useEffedt`が2度実行されるようになりました。

# 結論
React 18からの仕様です。[`StrictMode`](https://ja.reactjs.org/docs/strict-mode.html)が有効な開発時のみ、すべてのコンポーネントについて`useEffect`はこのように動作します。

なぜそのような仕様が採り入れられたのか、それで何の役に立つのか、公式「React Docs」(BETA)の「[Synchronizing with Effects](https://beta.reactjs.org/learn/synchronizing-with-effects)」の中に解説があります。その内容をかいつまんでご説明しましょう。なお、このページの情報全体は「[React: エフェクトによる同期 ー useEffectのあれこれ](https://fumiononaka.com/Business/html5/FN2207001.html)」でご紹介しました。詳しくは、この記事をお読みく

【Vue.js】コンポーネントをComposable関数（カスタムフック）から提供する

:::note info
こちらはZennにて[『【Vue.js】コンポーネントをComposable関数（カスタムフック）から提供する』](https://zenn.dev/crayfisher_zari/articles/7946414921fe42)に投稿した内容と同じです
:::

[『コンポーネントをカスタムフックで提供してみた』](https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/)という記事に感動したので、Vue.js（以下Vue）で利用する方法を紹介します。概念などは当該記事にて詳しく書いてあるので、この記事では主に実装と個人的な感想を述べます。

https://engineering.linecorp.com/ja/blog/line-securities-frontend-3/

# Vue.jsバージョン
Vueでもバージョン3から正式導入されているComposition APIを使えば当該記事のようにカスタムフック、Vueでの名称はコンポーザブル関数（Composable

Nuxt3にElementPlusを導入する。

# やる事
Nuxt3にElementPlusを導入して、サクッと画面を作れるようにする。

# 動作環境
– Windows10Home64bit(21H2)
– node v16.16.5
– element-plus v2.2.6
– nuxt v3.0.0-rc.4
– sass v1.53.0
※ChromOSのLinux環境でも動作確認済み

# 手順
## プロジェクト作成
公式ドキュメント通りにやる。Nuxt2系と違い細かい質問は聞かれないし必要最小限の要素だけが用意される。

“`
npx nuxi init sample-elementplus
cd sample-elementplus
npm i
“`

## 動作確認
親の名前並みに見たコマンドで動作確認。とても起動が速い。

“`
npm run dev
“`

## ElementPlusの導入
### 導入
ひとまずnpmからインストール

“`
npm i element-plus @element-plus/theme-chalk sass
“`

公式ドキュメント曰く、Vueのプロジェ

Denoのパーミッション指定の勘所

DenoはNode.jsの後継JavaScriptランタイムです。

https://deno.land/

Denoの特徴の一つに、実行時の **–allow-xxxフラグを使ったパーミッション制御**があります。
具体的な例を挙げると、以下のようなものです。

– `–allow-read=/path/to/dir/`：指定したディレクトリを読む許可を与える
– `–allow-write=/path/to/dir/`：指定したディレクトリに書き込む許可を与える
– `–allow-net`：外部とHTTP通信する許可を与える
– `–allow-run=deno`：指定した子プロセスを実行する許可を与える
– `–allow-all` / `-A`：全て許可する

などなど。

これを実行時にコマンドラインで指定することで、プログラムに与える権限を指定することができます。

“`shell
> deno run –allow-net ./main.ts
“`

しかし、実行時に毎回こうしたフラグを指定するのは面倒という声も聞かれます。だからと言って`-A`フラグ

Cognitoの USER_SRP_AUTHフロー や パスワード付きカスタム認証フローで必要な「SRP_A」を計算する (js, ts限定)

## SRP_A ってなに？
Cognitoに用意されている認証フローのうち、下記で必要になるパラメータだよ。
* USER_SRP_AUTHフロー
* パスワード検証付きカスタム認証フロー

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/amazon-cognito-user-pools-authentication-flow.html

上記フローでは、広く標準化された鍵交換プロトコルである **Secure Remote Password プロトコル (SRP)** を使っていて、 SRP_A はそれに関連する **「大きな整数」で生成された値** だよ。

## Cognito使ったことあるけどSRP_Aなんて聞いたことない。これっていつ使うの？
Cognitoが用意してくれるログインエンドポイント＋トークンエンドポイントを使う構成や、Amplify UI にお任せする場合には、あまり登場しない部分かもしれないね。

でも、自分で Cognito の各種 API をコールしていく実装なら、必要にな

【絶対に観るべき】英語のYoutubeチャンネル集【プログラミング】

こんにちは。masakichiです。

わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。

そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。

ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。

**なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。**

## The Coding Train

**所感**
スネークゲームやパズルゲームなどクリエイティブなチュートリアルがたくさんあるチャンネルです。運営者が教育の仕事もしているようなので、説明がわかりやすいと思いました。また、語学学校の先生みたいなノリで喋

Swift WKWebViewでWebViewのTableの行クリックからネイティブへデータを受け取る

Webのテーブルリストの行をクリックしてSwift側でその行の必要なデータをネイティブデータとして取得する例。
“`

Vue.jsの書き方忘却録

# 背景
Vue.jsの基本的な書き方を忘却録として残す

# 開発環境

PC:macOS Monterey(Intel Macbook Pro 2020)
エディター：Visual Studio Code
Vue.js： 2系

# コード

“`javascript:app.js
// Vueインスタンスの生成
var vm = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue！’
}
})
“`

“`html:index.html

{{ message }}

“`

“`:出力
Hello Vue!
“`

## 基本構文
new Vue()でVueインスタンスを生成する
インスタンスを生成することで、Vueアプリケーションが有効になる
VueはMVVMの影響を受けているので、Vueインスタンスの変数名にはvmがよく使われる

上記のapp.jsでインスタンスを生成する時の引数（オプションオブジェクト）は以下である

– el
Vueの有効範囲を指