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

[Stripe Updates] NoCodeでオンライン決済を受け付ける”Payment Links(支払いリンク)”に、管理用APIが登場しました！

「コードを一切書かずに、クレジットカードをはじめとするオンライン決済を処理するリンクを作成する仕組み」として、Payment Links(支払いリンク)は2021年に登場しました。

https://stripe.com/jp/payments/payment-links

１度商品・料金を登録し[支払いリンク]を作成すれば、後はそのリンクを顧客に踏んでもらうだけで、商品の販売や定期会員の決済を行うことができます。

# これまでの[支払いリンク]でできなかったこと

これまでは、このリンクを作成するためにDashboardにアクセスする必要がありました。
そのため、以下のようなユースケースに対応することができませんでした。

– WordPressやHubSpotといった外部サービス側で、リンク作成・埋め込み・表示を一元化したい
– アドホックに料金・商品を生成し、ユーザーに応じた支払いリンクを発行したい
– バッチ処理を利用した、「一定期間または特定時間のみ有効なリンク」を作成したい
– [Connect]　出店者が、顧客向けに支払いリンクを作成できるようにしたい

https:/

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる③〜

みなさんこんばんわ

せまる〜♪ショッカー！（締切！）という事で、どんどん実装していきます。
”18.【サービス開発3】データモデルの実装とユーザーの保存”を写経でGO！！

しかーし！今回はDB設計なので慎重に行くとこ！
データベース作成と定義を自前のやつにさしかえて作りますよと。うーさすがに緊張！

データベース名とデータ置き場（ボリューム先）名両方しっかり確認してyml書き直しーの！
docker-compose exec db bash　でデータベース用コンテナ開きーの！
psqlコマンドでデータベース作成！！渾身のポチっとな！！！

![スクリーンショット 2022-01-25 22.11.30.png](https://qiita-image-store.s3.ap-northeast

[JS](基礎)関数について

アウトプットとして

Rubyでいうところのメソッドを、JavaScriptでは関数と呼びます。
この関数ですが、いろんな記述の方法があるので整理するために記事にしたいと思いました。

##いろいろな関数定義
### 関数宣言(function)
JavaScriptでは`function 関数名(){ 処理 }`と記述することで関数を定義することができます。

“`javascript
function 関数名(引数) {
// 処理
}
“`
“`javascript:例
function calc(num1,num2){
return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2)) // => 12
“`

###無名関数
無名関数は、関数名なしで関数を定義することができます。より簡潔なコードが記述できるという点がメリット。

“`javascript
const hello = function(){
console.log(‘hello’)
}
“`
“

Nuxt.jsにGraphQLやRESTをモックする仕組みを導入する

どうも。最近はフロントエンド側のタスクが多くなったふじむーです。

仕事にて、バックエンド側ができるまでの間GraphQLサーバーをモックする仕組みを作ることになりました。
その実装の中での気づきや導入手順などをまとめていこうと思います。

GraphQLはなんぞやについては、今回割愛してます。
初のGraphQLのモック構築で、まだまだ発展途上です。

もし異なる点などありましたら、アドバイスいただけると幸いです！

# 環境
Nuxt.js(2系) / TypeScript
Apollo Client（GraphQLを使用するためのライブラリ）

# 結論
MockServiceWorker（以下MSW）を使用することにしました。
https://mswjs.io/docs/

MSWは別途ポートを開けてサーバーを立てる必要もなく、
定義したモックファイルをimportしていけばモックできるので非常に手軽でした。

モックで返す値を設定したり、返却する時間を遅らせたりと、いろいろできそうでした。

公式のチュートリアルに沿っていけば導入はできそうです。

が、Nuxt用ににちょっ

yarnのインストール(Windows)

# はじめに
　以前、自分が使っている古い方のPCで、Reactを使おうと思ってyarnをインストールしたのですが、パスが通っていないのかコマンドが認識されず、yarnが実行できない。
　思い切って新しいPC(Surface Pro8)の方でもう一度インストールしてみようと思って、再度挑戦しました。
　ちなみにyarnとは、Facebook社（現メタ社）によって開発された、npmよりも処理が早いJavaScriptのパッケージ管理システムです。よくnpmの上位互換として紹介されているので、流行に乗って使えたほうが良いかなと奮闘中です。ReactもFacebookによる開発ですよね。Facebookはこの辺りの事情に精通しているのでしょうか。

# 作業環境
PC: SurfacePro8
OS: Windows11
使用ターミナル: コマンドプロンプト
その他必要環境: node.js、npm

# 手順
　何はともあれ、まずは公式ドキュメント！ということで、yarnpkg.comのGETTING STARTED　→　Installationの手順を試してみることに。
　最初に、「ya

【アコーディオン】jQueryのslideToggleを生jsで再現してみた。Vue.jsやReactでも使用可

jQueryのslideToggleは数行で実装できるので便利でした。
今回、数行とはいきませんがそれなりにシンプルなコードでslideToggleの動きを再現してみました。

##生jsの場合

See the Pen
accrodion without jQuery by monji (読みやすいコード入門編(javascript)

## 無駄にライブラリを使わない

標準機能で実現できることにライブラリを使わないことを心がける。

## マジックナンバーには名前をつける

“`tsx
// この「100」は何？
const pages = Math.ceil(records.length / 100);

// ああ、1ページあたり100件ってことね！
const maxRecordsPerPage = 100;
const pages = Math.ceil(records.length / maxRecordsPerPage);
“`

## 識別子を短くしない

“`tsx
// この変数はどういうこと？
const cx = 5;
const cy = 10;

// 意味がはっきりした！
const centerX = 5;
const centerY = 10;

// 関数名から機能を把握しにくい！
function fetchTrk(id) {
return fetch(‘./api/tracking/’ + id);
}

// これなら多少わかりやすい
function fetc

要素の抽出・削除・書き換えなどの配列操作(JavaScript)

## 配列から重複した値を削除する

“`jsx

const fruits = [“banana”, “apple”, “apple”, “orange”, “grape”, “apple”];

// fromを使う方法
const uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits)

// …を使う方法
const uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2)

// 共に [“banana”, “apple”, “orange”, “grape”]

// 従来の方法(おすすめしない)
const result = fruits.filter((x, i, self) => {
return self.indexOf(x) === i;
});
console.log(result);
“`

[Array.from詳細](https://developer.mozilla.org/ja/docs

JavaScriptのコンストラクタとプロトタイプの違いについて

## コンストラクタ

“`jsx
function Dog(name, cry) {
this.name = name;
this.bark = function() {
console.log(cry);
};
}
var dog = new Dog(‘きなこ’, ‘わんわん’);
console.log(dog.name); // きなこ
dog.bark(); // わんわん
“`

上記のコードでnewを取り除くとエラーが発生する。この違いは何か？実は暗黙のルールで二行加わっています。

“`jsx
function Dog(name, cry) {
// var this = {};
this.name = name;
this.bark = function() {
console.log(cry);
};
// return this;
}
“`

newをつけない場合はself等を用意しなくてはならない

“`jsx
function Dog(name, cry) {
var self = {};
se

Vue.js(javascript)でulid

#背景
自分が作業する環境でULIDをJavascript(Vue.js)で使用する機会が出てきたため、調べたところ記事もそんなに出てないし、投稿しようと思いました。

#環境
ulidx 0.3.0
vue 2.6.14

#実装方法

##関連するライブラリをインストール
### ulidx
今回使用するライブラリは`ulidx`です。npmには`ulid`というライブラリがあるんですが、長くメンテナンスがされていないようです。その`ulid`を元にしつつ、機能を拡張させたものが`ulidx`になります。今回はこの`ulidx`の使い方を紹介していきます。

https://www.npmjs.com/package/ulidx

###　インストール
“`
npm install ulidx
“`

##使い方

###ulidの作成
ulidxをインポートします。以下のコードはulidの作成をしています。

“`javascript
import { ulid } from “ulidx”;

createULID(){
let ulidCreated

Agora SDK x Next.js

##はじめに
Next.jsの人気が高まっているということで、Agora SDKでも動作するかサンプルコードを書いてみました。
Next.jsについての詳しい知見はあまり持っていませんので、お見苦しい書き方があるかもしれませんがご了承ください。

##サンプルコード
サンプルコードはこちら[AgoraIO-NextJS](https://github.com/fu-jimoto/AgoraIO-NextJS)に公開しております。
機能としては、単純に自映像を表示してパブリッシュするだけのものとなっています。

##構成
構成はいたってシンプルで、実装はすべてVideoComponents.jsにまとまっています。

##実装内容

“`javascript:index.js
import dyna

タイピングゲームを作ろう＃１〜環境設定〜

####こんにちは！
今回からパート３ぐらいに分けてタイピングゲームを作っていきたいと思います
＃１→環境設定
＃２→プログラム
＃３→装飾等
このようにやっていこうと思います

####環境設定
では、いつもの環境設定からやっていきます
まず、HTMLをこのようにしてください

“`index.html




“`
これで、canvasが完成しました
次にjavascriptを作っていきます
index.jsというファイルを作成して、こちらでメインループを作成してください

“`index.js
//メインループ
function main() {
setTimeout(main,0);

Jamstackセミナー(2/10)開催のお知らせ

今回はBejamas社のブログ記事のご紹介ではなく
無料のJamstack_Webセミナーについてお知らせいたします:loudspeaker:

**2022年2月10日（木）15時00分〜16時00分で
Jamstackのデモを見ていただきつつ、
「Webサイト改善」をテーマにお話しさせていただくセミナーを開催したします。**
※本セミナーは、2021年7月6日（火）に開催したWebセミナーと同じ内容です。

:warning:詳細はConnpassでの告知をご確認ください:warning:

最新のWeb開発事情にご興味のある方は、良ければご参加ください:bow_tone2:

AngularJS ってどんなもの

## はじめに
WEB開発をするにあたり、必要とされるのはWEBフレームワークです。
フレームワークなしでもWEB開発は進められますが、フレームワークを利用すると効率よく開発ができるようになります。

フレームワークは便利ですが、WEB開発に対応しているものが多く存在し選ぶのが難しい状況です。
今回はフレームワークの中でもAngularJSについてご調べてみました。
良ければ今後の社内開発ツールのひとつにしようかと思います！

## AngularJSとは…
AngularJSはGoogle社が中心となって開発されたJavaScriptで作られたWEBフレームワークです。
オープンソースのソフトウェアとなっています。

WEBフレームワークらしく、MVCモデルに対応しています。
マスターメンテナンスのようなCRUD系のアプリケーション、業務系アプリケーションのような各機能が独立した画面として存在し、フォーム（form）を使ってデータの送受信を行うようなアプリケーションに向いているといわれています。

## メリット／デメリット
### 【メリット】
**・フルスタックフレームワ

[jest]localStorageをjestでテストしたい

## やりたいこと
localStorageのテストをjestでしたかったのですが、
jest初心者で忘れそうなのでメモ的に残しておこうと思います。

## コード
### js(react)
実際のコードを書いていきます。(簡単に)
雑に書いてるのでミスがあったらすみません。

“`.jsx
export const sample = () => {
const ini = {};
const [sampleData, setSampleData] = useState(ini);
useEffect(() => {
const getItem = localStorage.getItem(‘item’);

if (!getItem) {
const sampleText = “sampleです”;
localStorage.setItem(‘item’, sampleText);
setSampleData(sampleText);
} else {
setSampleData(getItem)

jsxとvueの条件によってタグを表示させる方法

## 概要
最近react,vueを触る機会が多いので、メモするほどのことでもないのですが、
初心者やreact,vueってどんな感じなの？って人用に書かせてもらいます。
(シリーズ化して、小出しに記事にしていくかも？)

### vueでの条件によって表示させる方法
vueでは表示したい要素のタグの属性にv-ifを追加することで
要素を表示するか、しないかを表現できます。

“`.vue

“`

vueでの出しわけ方法は分かりやすく、
タグにv-if=”~~”というディレクティブ(※)を追加することで、簡単に出しわけができます。
もちろん、v-else-ifも使えます。

※ DOM要素に対

【Rails】ページ遷移せずにいいねをしたい/取り消したい

みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください?

https://geek-salon.com/?utm_source=Direct&utm_medium=attract&utm_campaign=3Q&utm_content=Fukuoka_B1_3Q

さっそく今回の本題に入っていきます！
今回は投稿に対するいいねを、ページ遷移せずともできる/取り消せるようにしていきたいと思います。

なお、いいね機能は実装済みという前提で話を進めていくため、いいね機能をまだ実装していない人は先にそちらの実装をお願いします。

また今回の実装では部分テンプレートを用いています。部分テンプレートについての理解が怪しい方は、[参考となる記事](https://qiita.com/okamoto_ryo/items/026b43e965a1180113ba)を載せておきますので、そちらも参照してください！

##実装環境
ruby 2.7.4p191 (2021-07-07

React + TypeScript: Facebookの状態管理ライブラリRecoilを使ってみる

[Recoil](https://recoiljs.org/)はReactの状態を管理するライブラリで、Facebook改めMetaが実験的に開発しています。本稿執筆時の[最新バージョン](https://github.com/facebookexperimental/Recoil/releases)は0.5.2です。状態をひとまとめにするのではなく、ひとつひとつ細かく分けて管理します。ざっくりとお伝えするなら、`useState`の状態をコンポーネントツリー内にまたがって共有するイメージです。

本稿は公式サイトの「[Getting Started](https://recoiljs.org/docs/introduction/getting-started)」で紹介されたコードサンプルを、モジュールに分けた作例に書き替えて解説します(サンプル001)。また、TypeScriptによる型づけも加えました。

#### サンプル001■React + TypeScript: Recoil example
[![2201001_001.png](https://qiita-image-s

WebCrypto APIがundefinedになることがあるのは仕様でした

WebCrypto API (window.crypto.subtle)が’undefined’になって悩んで色々調べたら
WebCrypto APIは「Secure Contexts」でないと使えないとのことだった。

##

#詳細
MDN:

https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts

WebCrypto APIが非安全なコンテキストで使用できないことを問題にする話は、
chromiumやらFireFoxのIssueに出てくるが
既にW3Cで決めていることらしいのでそこを変えない限りは各ブラウザは仕様通りということなので正常な動作。

このコメントみたいに社内システムで使おうとして、引っ掛かりました。

https://github.com/w3c/webcrypto/issues/28#issuecomment-622006127

MDNには上記の通り「安全なコンテキストに制限されている機能」のページはあるの

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる②〜

みなさんこんばんわ。
昨日つくった”covidリスク確認くん（開発用）”のアプリ設計書にしたがって、ぐいぐいコードを描いて行きます。
”4ｰ17.【サービス開発2】プロジェクトの作成と認証の実装”のテキストの通りに何も考えずに手を動かす。そーれ、ワン・ツー・写経！！

さすがにdocker-compose.ymlだけは書き換えなきゃでしょ。
—quote—
version: ‘3’
services:
app:
build: .
tty: true
ports:
– 8000:8000
volumes:
– .:/app
depends_on:
– db
db:
build:
context: “.”
dockerfile: “db.Dockerfile”
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: covid