f@ctor

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

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

Riot.jsでStripe.jsのPayment Elementなどの決済フォームを表示させる方法

この記事は、[Riot.js Advent Calendar 2022](https://qiita.com/advent-calendar/2022/riotjs) 4日目の記事です。

Riot.jsはシンプルなUIライブラリの１つで、バンドルの軽量さやカスタム要素などの機能を提供しています。

2022/11月時点で、Riot.jsでStripe.jsを利用するためのライブラリは公開されていない様子でした。

ここでは、Stripe.jsをRiot.jsで利用する方法を紹介します。

## Riot.jsプロジェクトを立ち上げる

まずはRiot.jsのプロジェクトを作成します。

“`bash
$ mkdir riot-demo && cd riot-demo
$ npm init riot
“`

対話形式で、`package.json`の各項目について聞かれます。

“`bash
package name: (riot) demo-stripe-riotjs
version: (1.0.0)
description:
entry point: (index.js)

元記事を表示

ちょっと便利なretoolの使い方

GxPの上野です。

この記事は[グロースエクスパートナーズ アドベントカレンダー](https://qiita.com/advent-calendar/2022/gxp)の4日目の記事となります。

現在案件で使用しているretoolについてご紹介したいと思います。

概要はnyasbaさんの[こちらの記事](https://qiita.com/nyasba-gxp/items/b07fcd62946bfa62b80a)で詳しくわかりやすく説明されています。

私は開発でretoolを使用していく中で「こういう時どうすればいいんだろう？」
と思ったこととその対処法をまとめていきたいと思います。

retoolはあらかじめ用意されたフォームやテーブルやボタンなどの
コンポーネントを組み合わせてwebアプリを作成していくツールです。

チュートリアルは[こちら
](https://gxpretool.gxp.jp/about/docs-quickstart)

retoolの開発画面の初期状態はこんな感じです。
![new.PNG](https://qiita-image-st

元記事を表示

Jenkins：jenkinsおじさんの気配を消して、可愛くし、モチベをあげる話。

# はじめに
ココネ株式会社に入ってからjenkinsを~~触らされている~~楽しく触っている、でぃーだらぼっちです。
最近jenkinsおじさん化してます。
前職ではjenkinsはもっぱら叩く側で、管理側はしたことありませんでした。
せっかく触るのだからと、楽しく（？）独自のやり方で開拓していたりします。

本ページでは、そのjenkinsおじさんのアクセスページ、可愛くしたいよね　っていう話をします。

:::note warn
**jenkinsで、CSSを触る類の話**をします。
jenkinsはCSSをめちゃくちゃカスタマイズすることは推奨されません。
ガチガチにカスタマイズすると、
**バージョンあげたりした時に動かなくなる可能性があるため**です。

何を、どう、いじったのか、を把握した上で本ページはおのおの試してみてください。
:::

# まず、jenkinsおじさんデフォルトの見た目紹介
## ログイン画面
![スクリーンショット 2022-11-29 11.53.27.png](https://qiita-image-store.s3.ap-northeast-

元記事を表示

タブUIの非機能要件を満たしたい時に見る記事

## はじめに
複数のコンテンツを並列にグループ化し各コンテンツに紐づいたタブ要素をアクティブにすることでコンテンツを切り替えるUI、タブUI。
モーダルやカルーセルなどのUIと比べると実装難易度は低めのUIかと思いますが、特にキーボード操作周りで是非に満たしたい非機能要件がいくつかあります。
今回はその非機能要件にフォーカスをあて、具体例をあげながら実装方法を見ていきます。
（ほとんどまるっと[WAI-ARIA Authoring Practices 1.2](https://w3c.github.io/aria-practices/#tabpanel)の写経です）

## 完成形
まずは非機能要件を意識せずに作ったタブUIです。

JSON整形・圧縮ツールを作ってみた

# 背景
JSONテキストを扱うときに自分用のツールが欲しかったので作ってみた。

VSCodeでは、ショートカットキーや右クリックでフォーマット（整形）ができても、圧縮は提供されていなくて（もしあったら知りたい）正規表現で元の整形に直すのが面倒くさかったり、ちょっとしたテストデータを作ってコードに仕込むとき用にエスケープ処理がしたかったので、自分で作ってしまおうと思った。

# できあがったもの
https://ttokage9988.github.io/json-minify-and-formatter/

ツール名は「23日の金曜日」です。
某スプラッター映画とは全く関係ありません。

# 主な使用言語
* JavaScript
（ライブラリは使用せず）

# 機能要件
* JSON整形
* 改行とスペースで整形
* インデントは半角スペース４つ
* JSON1行圧縮
* JSON1行圧縮　+　エスケープ処理

# ソースコード

↓今思ったけどリファクタリングはしてない（笑）追記2022/12/04

“`js
//1行圧縮
function oneline(

元記事を表示

[Day4] コード品質

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 3.1 コーディングスタイル
### 知らない単語
– チートシートとは
– 操作や記述でよく参照される情報を、簡潔な表記でまとめて一覧できるようにしたもの

– ネスト
– 入れ子にすること

### 学んだこと
構文のルール
– 波括弧
波括弧は普通、新しい行ではなく同じ行に書かれる
エジプトスタイルという

このようになる
if (hello) {
…
}

– 行の長さ
横に長いコードは読みづらいので、分割するのがベスト
バック

元記事を表示

Alpine.jsでそれっぽくコードとマークアップを分離する

## TL;DR

addEventListenerの“apline:init“で色々するとJSとマークアップを分離できそう。

## Alpine.jsってなんぞ

私とAlpine.jsの出会いは [Laravel Livewire](https://laravel-livewire.com/)でした。
Laravelフレームワーク上でSPAライクな実装ができるようになるフレームワークなのですが、低レベルなところで色々やっている部分の基底技術がこの“Alpine.js“です。

特徴としては以下のような感じです。

– 15の属性、6のプロパティ、 2のメソッドから構成（※正確には18の属性、9のプロパティ、3のメソッド）。すごくシンプル
– 紐づけするためのオブジェクトもフィールドまたはgetterプロパティでシンプル

兎にも角にもシンプルさが目立つイメージです。けれどもデータバインド周りの機能は十分なので、jQueryの代替として利用することもできそうです。

## そのサンプル、インラインじゃね？

Alpine.jsの簡単なサンプルを見ると、以下のようなものが多い

元記事を表示

Maplibre GL JSで地図上に植林してみた

:::note info
これは [MIERUNE AdventCalendar 2022](https://qiita.com/advent-calendar/2022/mierune)　4日目の記事です。
昨日は @yuskesuzki@github さんによる [Django GEOS API で地図上にちゃんとした魔法陣を描く](https://qiita.com/yuskesuzki@github/items/f82be9768b084333dc6d) でした。
:::

今回は[Maplibre GL JS](https://maplibre.org/)を使用して、地図上に木を植えたいと思います。

## 地図上に木を出現させる

まずは、Maplibreの[ポップアップ](https://maplibre.org/maplibre-gl-js-docs/example/popup/)を使用して地図上に木を表示します。マップを生成し、マップの中心にポップアップを生成します。このとき、ポップアップの[options](https://maplibre.org/maplibre

元記事を表示

レガシーになってしまったアプリケーションのライブラリをどのようにアップデートしていったか？

こちらは、「レガシー」を保守したり、刷新したりするにあたり得られた知見・ノウハウ・苦労話 by Works Human Intelligence Advent Calendar 2022 の 4日目の内容として投稿させていただきます。

## この記事で説明したいことのサマリー

「脆弱性の危険性があるライブラリのversion up 」で得た以下の知見について共有させていただきます。

* ライブラリのアップデートをする際にはきちんとリリースノートを追うことが大切
* 技術的負債を可視化する手段の1つとして、アップデートが必要なライブラリの数を見える化をするといい
* あえて、今はアップデートをしない決断もあり (計画に入れる)

## ざっくり状況の説明

### プロダクトを内製化がスタート

外部の開発会社さんに委託していたシステムを今年(2022年)から内製のチームで引き取って、開発することになりました。

ちょこちょこ設計やいわゆるプロジェクトマネジメント、PRレビューなどでプロダクトのコードについては触れていたもののきちんと向き合ったのは今年の夏頃が初めてで

元記事を表示

Twitterのシェアテキストを動的生成するときは気をつけよう

# はじめに

みなさんご存知かと思いますが、シェアボタンをクリックしたときのツイートテキストは自由に設定できます。ただし、ユーザーが入力した値などの可変長文字列を含ませて動的に生成する際には、文字数制限に気をつけなければなりません。

Twitterの文字カウントは特殊で、`length` プロパティなどでは正確に文字数をカウントできないので、解決策を共有します。

# 文字数をカウントする

[twitter-text](https://github.com/twitter/twitter-text) を使います。
これは、ツイートテキストのパースやユーザー名の抽出などの機能がまとまった、Twitter公式のライブラリです。

その中で用意されている `parseTweet()` は、引数に渡したテキストの文字数や、有効なツイートであるかどうかをオブジェクトで返却してる便利メソッドです。
以下はJavaScriptの `length` プロパティと比較したコードです。

【完走賞ゲット-4】続・OpenAI の ChatGPT のネタ：JavaScript の特定の技術仕様を教えてもらう

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 ](https://qiita.com/advent-calendar/2022/youtoy)の 4日目の記事です。
（4日目は、この記事と別に Adventar のカレンダー用の記事も 1つ書いた ⇒ [漫画で使われるエフェクトの「集中線」を Scratch で作って CoderDojo の活動でデモした時のちょっとした気づき – Qiita](https://qiita.com/youtoy/items/ea1f8b146746a25fb1b5)）

今月1日の夜から話題になり、2日目に記事担当となっていたアドベントカレンダーで急遽取り扱ってみた OpenAI の ChatGPT（あと、[「寝坊して会社に遅刻した時の言い訳を考えてもらって、倫理観を問われたりもした 笑」](https://twitter.com/youtoy/status/1598697646369259521)）。

●【KDDI Engineer&Designer】AI にブラウザ用

元記事を表示

爆速サイトを構築する、静的サイトビルダー「Astro」の紹介

# はじめに
先日[こちら](https://increments.connpass.com/event/261907/)のイベントに出させてもらった際、`Astro`を知ることになり、使ってみたいなーと思っていたところ会社の新サービスLPで利用できる機会がありました。

https://increments.connpass.com/event/261907/

社内のフロントエンドチームの中でも利用した事例はなかったですが、
– 社内で一番利用されている、React(JSX)ベースでも書くことができる
– Astro形式のファイルもSPAフレームワーク利用者なら問題なくキャッチアップできそう

ということもあり、Astroを選定することができました。

まだ**Astroについて知らない人**や**利用を検討している人**へ、本記事での「**実際に`Astro`利用した感想**」や、「**`Next.js`とのパフォーマンス比較**」をもとに導入のきっかけとなれば幸いです。

## こんな人に読んで欲しい
– Astroってそもそも何？って人
– Astroの利用を検討している人

元記事を表示

javascript プロゲート つまづいた所

# 変数の上書き
“`let“`をつけない

# 定数と変数の違い
定数は値を更新することはできません。
“`const“`

# if文の注意点
* 最後に“`；“`は不要
* インデントをつけて見やすくする。

# switch文の注意点
* 最後にセミコロンが不要
* “`breakがない“`と、合致したcaseの処理を行った後、“`その次のcaseの処理も実行“`してしまいます。

# while文の注意点
* 最後にセミコロンが不要
* 条件式がtrueの間、{ }内の処理を繰り返す
* 変数“`let“`を書き忘れない。

“`js
while(number <= 100) { console.log(number); number += number; } ``` ２乗の数になった。 # 厳密等価演算子と等価演算子 厳密演算子は ```===``` 等価演算子は ```==``` # メソッドの注意点 * ```return```を書かなければならない。

元記事を表示

QwikでTODOアプリを作ってみる（2）

https://qiita.com/ta1m1kam/items/7ec246867a16933d12e2

の続きです。

## イベントハンドリング

“`js
function handleSubmit(e) {
e.preventDefault();
alert(‘Hello, world!’);
}

“`

Reactの例では、上記のようにhandleSubmit関数で`e.preventDefault`を実行し、`alert`関数を発火させていますが、qwikではこのようにEventで発火させる処理として、直接`e.preventDefault`を入れて実行することができません。

以下のように設定します。
Qwikでは非同期のために、イベントハンドラがダウンロードされていません。なので代わりに`preventdefault:{eventName}`属性が存在します。

“`ts

{
ale

元記事を表示

SvelteKit svelte/easing関数すべて試してみた。

# easing関数とは

transitionやanimationなどを使うときに、
時間の経過とともにオブジェクトがどのような速度で、変化するかを指定するもので、
10種類のeaseing関数がそれぞれ`in`、`out`、`inout`のバリエーションと、`linear`の合計31種類が用意されています。

`In`は消えるときの変化。
`Out`は表示時の変化。
日本語的には逆に勘違いしそうなので注意。

`InOut`は消えるとき、表示時両方に変化をつける方法。

[公式](https://svelte.jp/examples/easing)が速度変化のグラフを用意してくれているが、
正直表示してみないとよくわからないので、今回は表示させてみた。

|番号|ease|in|out|inOut|
|—-|—-|—-|—-|—-|
|1|back |`backIn` |`backOut` |`backInOut`|
|2|bounce |`bounceIN` |`bounceOut` |`bounceInOut`|
|3|circ |`cir

元記事を表示

「const {変数} = () => {」がわからない人へ

## はじめに
JavaScriptのコードを眺めているとよく現れる「**const {変数} = () => {**」
なんとなく何かの処理が始まるまじないかなと思ってたので、今回かみ砕いてみました。
## const
constは、変数を定義するために使用される修飾子です。
定義した変数は、その後のプログラム中で値を変更することはできなくなります。
同様の定数を定義する修飾子に「**let**」がありますが、こちらはプログラム中に変数の値を変更することができます。

## =
=は、代入演算子です。
左辺にある変数に、右辺の値を代入するために使用されます。

## () => {}
() => {　は、JavaScriptのアロー関数を使用した定義方法です。
アロー関数とは、要するに簡潔に表現できる関数記述となり、JavaScriptで関数表記によく用いられるfunctionを使用した定義と同じ意味を持ちます。

※その他の特徴は以下参照
https://typescriptbook.jp/reference/functions/function-expression-vs-arr

元記事を表示

最も凶悪な退会ボタン

# なかなか退会できないサービスって、嫌ですよね

「何箇所もクリックして、ようやく退会できるサービス」ってユーザー体験よくないですよね。

たまにそういうサイト、あると思います。

ですが今回は、それどころではない「クソの権化」とも言える退会ボタンをTwitter上で見つけました。
そちらをご紹介して行きたいと思います。

# どんなボタンか

こちらです。

「退会する」ボタンをクリックすると、ボタンが少しずつ割れていき、小さなボタンが中から出てきます。
まるでマトリョーシカです。

そして、何度も何度もクリックさせられた挙句、最終的に退会できたのかイマイチわかりません。
かなり凶悪なUXです。

今回は、このボタンのソースコードを**極秘入手**しましたので、以下に記載します。

# HTML

パカっと割れるようにするために、同じボタンが2つずつあります。

“`html

元記事を表示

Livewireを使っててAlpine.jsを使わないのは誠に罪深きことでございます。

# Alpine.jsはLivewireと連携できるメソッドが用意されている
Alpine.jsとLivewireは同じ開発者([Caleb Porzio氏](https://twitter.com/calebporzio))らしく、ゆえにAlpine.jsにはLivewireに適したライブラリとなっています。
あと、Livewireのドキュメントにも「Livewireを使う開発者ならAlpine.js使っとるよなぁ？(意訳)」と書いてます。
![CF106AE2-8B0A-4459-BDD6-5383CE52056C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/1cfbb5f5-adfc-5dbf-bd67-44cfe74c51c7.jpeg)
引用元：https://readouble.com/laravel/9.x/ja/frontend.html

トッピングって言い方カワイイ

## メソッド・プロパティの例
### ①$wire
![726EE4DE-

元記事を表示

221203_作業療法士がWebエンジニアを目指して学習中。

# モダンJavaScriptの基礎から始める挫折しないためのReact講座
自分のための備忘録
https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/21899180#overview

## JavaScript学習のメリット
– 開発環境の構築が不要
– Webシステムの知識をつけられるため汎用性の高い学習をすることができる

## モダンJavaScriptとは

「モダンJavaScript」と表現されている言葉に明確な定義はなく、抽象的な概念を指している。

主に下記の特徴がある技術を指していることが多い。

– 仮想DOMを用いる
– パッケージマネージャを使用している
– ES2015(ES6)以降の記法を用いている
– モジュールバンドラーを使用してる
– トランスパイラを使用してる

? 以前、開発の学習をしているときに、この辺りの知識を理解しないまま進めてしまっていたため、わからないことが蓄積してストレスになっていたかも。
?土台となる技術について学習をしない状態で学

元記事を表示

TypeScript環境構築

# Node.jsを入れる

公式サイト(https://nodejs.org) で推奨版を
ダウンロードするやり方もあるが、
node.jsはバージョンを切り替えることが割とあるので、
最初からバージョンマネージャーを入れてしまったほうが早い。

Node.jsバージョンマネージャーは色々あるが、
ここでは、nvmを使う。

公式サイト(https://github.com/nvm-sh/nvm) を見ると、
下記のコマンドでインストールできる模様。

“`:terminal
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
“`

インストールしただけだとPATHが通っていないので、
PATHも公式に従って通してみる

“`:terminal
export NVM_DIR=”$([ -z “${XDG_CONFIG_HOME-}” ] && printf %s “${HOME}/.nvm” || printf %s “${XDG_CONFIG_HOME}/nvm”)

元記事を表示

OTHERカテゴリの最新記事