JavaScript関連のことを調べてみた

[Rails7] Popper.js Popper__namespace.createPopper is not a function エラー解決方法

## 目的
Rails7で後からbootstrap5を導入しました。
その際にPopper.jsのエラーにハマったのですが無事解決でき、記事が少なかったので備忘録として投稿します。

## 開発環境
– rails 7.0.4.3
– ruby 3.1.2
– Bootstrap 5.3.3
– Popper.js 2.11.8

## Bootstrap5導入方法
rails7で後からBootstrap5の導入をしたい方はこちらを参考にしてください。

https://qiita.com/PJZ9n/items/03341f942c2c84713c99

投稿者はこの記事を参考にしてBootstrap5を導入する途中でPopper.jsのエラーにハマりました。

## エラー内容
ブラウザでBootstrapのjavascriptで動く部分の動作確認をしていたら、下の写真のようなエラーに遭遇しました。

エラー名：`Popper__namespace.createPopper is not a function`

![スクリーンショット 2024-05

栄養を気にしてくれる人(Bot)を作りました！

# 突然ですが・・
毎日時間に追われて過ごしている皆さん、朝食を取らずに出社したり、適当に菓子パンを頬張りながら仕事したり、昼食は毎回ラーメンやファーストフードで済ませたりしていませんか？
たまにならいいんです。おいしいですもんね。分かります。
でも、毎日の積み重ねで不健康が加速して、10年前の自分はこんなんじゃなかったとぼやく未来なんて悲しいですよね。

# いやいや、そんな考えてる暇も自炊する暇も無いよ😠
そうですよね。栄養を気にしてくれる人がいたら・・なんて妄想する人もいることでしょう。
そこで、コンビニや食堂で手軽に手に入るメニューをおすすめしてくれる人(の代わり、LINE Bot)を作ってみました！

# 活用ツールや技術
・Node-RED
・JavaScript
・LINEmessagingAPI

# フロー
![スクリーンショット 2024-05-28 11.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/9f201bb9-524f-4c33-0930-38f

繰り返し処理 for文、while文などの基本 [Java Script]

繰り返し処理

プログラミングのコードを書いていると、同じ処理を数回繰り返して処理を行いたい時があります。

例えば、

:::note warn

ある処理を１０回繰り返し行うように書きたい。

:::

なので、１０回同じ処理を書く！
“`js
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
“`
“`text: 出力結果：
1
2
3
4
5
6
7
8
9
10
“`

これは、読みにくいコードになってしまうし、とても非効率です・・・

そのために、各プログラミング言語には
**繰り返し処理**というものが存在し、それを活用することで、
複数の処理を１つの式として短縮して書くことができます。

#### 例：
・console.logの出力を１つの式でかける。
・配列の中のすべての数字の合計値

【CSS】被写界深度を再現してみた

## はじめに
皆さんは、[codepenのChallenges](https://codepen.io/challenges)を知っていますか？
毎月html,css,javascriptのお題がcode penから出されて、それを実装するというcode penが実施しているイベント（？）です。
今日はこの五月のチャレンジ「フィルター」をテーマにして、カメラの「被写界深度」を再現してみたので紹介します。

## 被写界深度とは？
被写界深度とは、カメラのピントの合う範囲のことです。カメラをよく知っている人ならいわゆるF値と呼ばれるものですね。下の図のようなイメージで被写界深度を上げる（f値をあげる）とピントの合う範囲が広がりより多くの被写体に対してピントを合わせることができます。

![被写体深度2.png](https://qiita-im

自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。 例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。

自分は、矢印を左側にすると、その左側の駅名の文字、ひらがなとローマ字が、矢印のサイズ分（それが難しければ具体的に30px)、右側にずれ、逆に右側だと、右側の駅名の文字が左にずれるというものです。
例えば、前の駅が御徒町で、次の駅が有楽町だとすると、有楽町の側に矢印が来て、有楽町の文字が矢印とは逆方向にずれ、御徒町も然りといったプログラムを作りたいです。
“`