JavaScript関連のことを調べてみた2023年08月30日

HTML+CSSでPhotoshop風の選択範囲のアニメーションを再現しようとしたら凄く面倒くさかった

## ことの発端

先日、息子からの夏休みの宿題として個人で[アイロンビーズエディタ(IBE)](https://bu-kurokky.github.io/IBE/)というのを開発しました。

今回はその時に実装しようとした**選択範囲のUI/UX(↓こんなの)を再現する話**です。


実物を触って見てもらった方が良いと思いますので、[こちら](https://bu-kurokky.github.io/IBE/cp.html)に用意しています。

開発秘話的なものは[note](https://note.com/kurokky/n/n6190a71858ae)に記載しているので省略しますが、一言で言えばペイントツールにありがちな「選択範囲」と「コピペ」を実装しようと思ったからです。

#

JavaScriptでスクロールアクションを実装する

## はじめに
Javascriptを用いてスクロールアクションを実装する

## コーディングルール
– ES6 (EcmaScript2015)以降のモダンな記法を使う
– 関数をモジュール化して使用する
– data 属性を使用してDOM要素を取得する

## コード(pug, scss)
すでにpugファイルとscssファイルは用意されており、JSファイルを作成する。
この2つのファイルはすでに用意されているもののため割愛。

“`_scrollAction.pug
.scrollAction
.scrollAction__inner
.scrollAction__target.–active
p.scrollAction__label section 0
p スクロール連動で残り3つを表示させましょう
.scrollAction__target(data-selector=”scroll-action-target”)
p.scrollAction__label section 1
.scrollAction

Stripeのカスタマーポータルを利用した、請求マイページやプラン変更・解約画面のローコード開発入門

サブスクリプションサービスを提供する際、「契約や請求内容を管理する画面と機能」の開発または運用フローの策定が必要です。


月々の請求だけでなく、未払いが発生した場合のリカバリーや回収・キャンセル理由の収集と分析など、サービスを成長させようとすると、少なからず開発リソースを確保する必要が生まれます。

## Stripeのカスタマーポータルで「作らない請求管理」を実現する

Stripe Billingを利用してサブスクリプションサービスを提供している場合、カスタマーポータルを利用して、コードを書かずにマイページを提供できます。

![スクリーンショット 2023-07-14 13.55.33.png](https://qiita-image-store.s3.ap-northeast-1.a

Node.js APMエージェントをどうしても試してみたいので、Node-Redにエージェント導入を試みる

:::note info
このアップデートの詳細はこちら
[New Relic アップデート](https://newrelic.com/jp/blog/nerdlog/new-relic-update “New Relic アップデート”)
:::

# はじめに
Node.jsが大好きだ。だけど、ガリガリとNode.jsを使ってアプリケーションを開発できるほどのスキルは持っていないので、いままで[Node.jsにAPMエージェント](https://docs.newrelic.com/jp/docs/apm/agents/nodejs-agent/getting-started/introduction-new-relic-nodejs/)を導入して遊んでみることができなかった。(**がんばれ自分!!**)

もしかしたら、Node.jsやっているエンジニアにとっては知っていて当たり前のことなのかもしれないけど、[Node-Red](https://nodered.org/)という**神**の様なNode.jsベースのソリューションがあることを知人に教えてもらいました。(**感謝感

plunkerでvue その64

# 概要
plunkerでvueやってみた。
練習問題、やってみた。

# 練習問題
vueファイルでブラックジャックを作れ。

# 参考にしたページ。

https://qiita.com/t2kojima/items/88a924fa3807909e0488

# 写真


# 方針

– Vue + RequireJS を使う。
– myData.jsを使う。
– vueファイルをcomponent化。
– 画像は、お借りする。
– componentは4つ
card,dealer,player,game

# 成果物

https://embed.plnkr.co/plunk/JmGzuZv5WWYRKU3M

以上。

[Ruby JavaScript] ハッシュ、オブジェクト比較

# 目的
現在携わっているRails + Vue.jsのプロジェクトで、Ruby、JavaScriptそれぞれのキーと値を組み合わせてデータを管理する方法の呼び方、表記の仕方が混乱したので比較する。
# Ruby　ハッシュ
“`
currencies = {‘japan’ => ‘yen’, ‘us’ => ‘dollar’, ‘india’ => ‘rupee’}

# キーと値
# 値を取り出す
currencies[‘japan’]
“`

シンボルを使った場合
“`
# キーのみシンボル
currencies = { japan: ‘yen’, us: ‘dollar’, india: ‘rupee’}
currencies = { :japan => ‘yen’, :us => ‘dollar’, :india => ‘rupee’}

# キーも値もシンボル
currencies = {japan: :yen, us: :dollar, india: :rupee}
currencies = { :japan => :yen, :us => :dollar, :ind

ES2015を学ぶ

# はじめに
Vue、React、AngularなどのモダンJSを学ぶ上で、まずはJavaScript（以後JS）の基礎を理解する必要があると思います。
自分もReactを勉強しようと思った矢先、Reactの記法の前にJSの基本を理解できていないと気づき、改めて勉強した際の備忘録です。
ReactでもES2015(ES6)の記法は結構出てきますのでモダンJSを始めようという方は、是非勉強しましょう。
他にもQiita内でES2015(ES6)について詳しく書かれている記事があると思いますので、気になった方は探してみてください。

## ES2015とは
ESとはECMAScriptの略で、JSの標準化を行っているECMA（European Computer Manufacturers Association）が定義しているものとなります。
`2015`は西暦を指しており、2015年に発表されたECMAScriptという意味合いになります。
ECMAScript 6th Editionの意味合いでES6と呼ばれることもあります。
※ES2015以後は西暦の方が正式名称となっています。

3次元物体の回転~javascript~

## 前回の2次元図形回転の復習
2次元図形回転は[こちら](https://qiita.com/takatakao397/items/67960568d465504b13b9)で実装しています。なかなか好評？いいね2つとストック3つ頂いたので、調子乗って3次元物体の回転も解説したいと思います。
復習がてら2次元の場合の回転行列は下になります。
“`math
R(θ) =
\begin{pmatrix}
\cosθ & -\sinθ \\
\sinθ & \cosθ
\end{pmatrix}
“`
## 軸を中心に回転させる
2次元図形の回転はxy平面上の動きですが、3次元的に物体を回転させるには下のような動きをします。


この例ではy軸を中心に回転させていますが、x軸z軸

Ubuntu Wallpapersのすべて

See the Pen
Ubuntu Wallpapers by John Doe (@04)
on CodePen.