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

開発ツールに頼らず 様々な言語から WebAssembly（第７回）

WebAssembly は多くのプログラム言語からライブラリの様に呼び出す事が出来る。
WebAssembly のコードを書く方法は多くの記事で書かれているが、その使い方はフレームワーク等のツールに頼っている事が多い様だ。
本記事では、そのような便利ツールに出来るだけ頼らず JavaScript, Rust, Python, Ruby から WebAssembly を実行する方法を記載する。

WebAssembly は新しい技術である。
目先の最先端ツールに飛びつくのもよいが、その基礎を学んで長く使える知識を身に着けないか？

本記事はシリーズの第６回である。シリーズ記事の一覧は [第１回] の **#シリーズ記事一覧** に載せている。シリーズの記事を追加する時は [第１回] の一覧を更新して通知を行うので興味の有る人は [第１回] をストックして欲しい。

# 本記事の概要と過去記事の復習

[第６回] では 3 種類の WebAssembly モジュール(クラスの様な物) を作成し、オブジェクト指向の「委譲の様な事を行った。」
具体的には WebAssembly インスタンス

【javascript】簡単にrssフィードをパース！ライブラリとテクニック

## ライブラリの選定と導入：簡単なrssパーサーの紹介

こんにちは。今回は、javascriptについて初心者エンジニアに向けて、簡単にrssフィードをパースする方法について解説していきます。

rssフィードは、ウェブサイトやブログの最新情報を取得するために使用されるxml形式のデータです。これをパースして、コンテンツを取得したり表示したりすることができます。

まずは、rssフィードをパースするためのライブラリを選定しましょう。javascriptでは、いくつかの優れたライブラリが存在しますが、今回は以下の2つのライブラリを紹介します。

### 1. feedparser.js
feedparser.jsは、シンプルで軽量なrssパーサーライブラリです。シンプルなapiを提供しており、初心者にも扱いやすい特徴があります。githubでの評判も高く、多くのプロジェクトで利用されています。

feedparser.jsの使い方は以下の通りです。

“`javascript
// ライブラリのインポート
const feedparser = require(‘feedparser

【javascript】rssフィードを読み込む方法と実装ガイド

## rssフィードとは？基本知識と仕組みの解説

rssフィードは、webサイトやブログなどで更新情報を配信するための仕組みです。rss（rich site summaryまたはreally simple syndication）とは、xml形式で配信されるwebコンテンツの要約や更新情報をまとめたものを指します。

rssフィードは、定期的に更新されるwebコンテンツの変更をユーザーに通知するために使用されます。ユーザーは、rssリーダーアプリケーションを使用して、複数のwebサイトやブログの更新情報を一括管理・閲覧することができます。rssフィードは、xml形式で提供され、タイトルや概要、更新日時などの情報が含まれます。

rssフィードの仕組みは、webサイトやブログの所有者が新しいコンテンツが追加されるたびに、その情報をxml形式で提供することにあります。ユーザーは、自分のrssリーダーにフィードのurlを登録し、定期的にフィードを取得して更新情報を確認することができます。

rssフィードは、webサイトやブログの所有者が定期的に新しいコンテンツを追加する場合に特に便利です

Stripe Billingでサブスクリプション請求を始める時は、テストクロックを設定しよう

サブスクリプションシステムの構築では、運用が始まってから発覚する運用フローやオペレーションが少なくありません。

例えば、「クレジットカードの有効期限が切れたにも関わらず、カード情報を更新していない」ケース。このケースでは、有効期限が切れた後に行われたサブスクリプションの請求が失敗します。

そのため、システムの要件として次のような機能が必要となります。

– 有効期限切れが迫っているクレジットカードを利用している場合、ユーザーにカード更新を促す通知を送信する
– 年間契約などの長期契約では、更新月が迫っていることと、カードの有効期限を確認することをユーザーに通知する
– サブスクリプションの請求が失敗したことを、ユーザーと社内の顧客サポートチームに通知する
– 発行された請求書の決済が失敗している間、有料版機能の利用を制限する
– アプリケーションUIで、カードの更新が必要であることを強調表示する
– 支払い情報が更新された際、請求に失敗しているサブスクリプション請求書への再決済を行う
– 一定期間を過ぎてもカード情報が更新されない場合、利用停止や解約処理を行う

また、支払いが

plunkerでopenjscad その11

# 概要
plunkerでopenjscadやってみる。
練習問題やってみた。

# 練習問題
OBJをパースして、描画せよ。

# 写真


# サンプルコード

“`
function main() {
var obj0 =
“g cube\n” +
“v 0 0 0\n” +
“v 10 0 0\n” +
“v 0 10 0\n” +
“v 10 10 0\n” +
“v 0 0 10\n” +
“v 10 0 10\n” +
“v 0 10 10\n” +
“v 10 10 10\n” +
“vt 0 0\n” +
“vt 0 1\n” +
“vt 1 0\n” +
“vt 1 1\n” +
“vn 0 0 -1\n” +
“vn -1 0 0\n” +
“vn 1 0 0\n” +
“vn 0 -1 0\n” +
“vn 0 1 0

Javascriptによるカラーピッカー

Javascriptによるカラーピッカーを使用するためのソースコードを紹介させていただこうと思います。
各構文に以下のコードを追加していただくと使用可能になるかと思います。

React公式チュートリアルの三目並べに追加機能を実装してみた #1（現在のターンを示せ！編）

## はじめに
都内某所で（一応）フルスタックエンジニアとして働いているRyuと申します。
エンジニア歴としては4年目になりますが、まだまだ何もかも足りない雑魚エンジニアです。涙

しかし、雑魚エンジニアのままではいけない！と思い立ち、自身のスキルアップやアウトプット習慣づけのためにQiitaに記事を投稿してみることにしました。
今回は僕が業務で扱っている技術であるReactに焦点を当て、記事を書いていこうと思います。

## 本記事の目的
皆さんは新しい技術に触れる時、公式ドキュメントは読んでいますでしょうか？
英語読めないし、日本語の技術記事呼んだほうが早い…などと思い、僕はあまり読んでいませんでした。
そんな自身を戒めるべく[Reactの公式チュートリアル](https://react.dev/learn/tutorial-tic-tac-toe)を読み進めていると、Tic-Tac-Toe（日本語だと三目並べと呼ぶらしい。いわゆる〇×ゲーム）作成する章の終わりにこんな一文がありました。

![image.png](https://qiita-image-store.s3.ap-n

PlayCanvasのFPVでpointerLockを制御する（暫定）

# 備忘録
FPVでここは一旦ポインタロックされたくないなって時は、first-person-view.jsのmouseDown()に以下のような条件を追加してやる。
“`javascript
var mouseDown = function (e) {
if (document.pointerLockElement !== canvas && canvas.requestPointerLock) {
if(container.classList.contains(“is-open”)){
return;
}
canvas.requestPointerLock();
}
};
“`
2つ目のif文でis-openというclassが付与されているかどうかをチェックし、付いているタグがあればポインタロックせず、関数を抜ける。
classにis-openが付与されていなければ、ポインタロックする。

どういう時に使いたかったと言うと、FPVで歩き

【JavaScript・学習ログ2】条件分岐・繰り返し処理

# 目次
[1. if文](#1-if文)
[2. switch文](#2-switch文)
[3. while文](#3-while文)
[4. for文](#4-for文)

参考：侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters
## 1. if文
条件を提起して処理を分岐させる記述。
“`javascript
const num = 50;
if (num > 10) {
console.log(‘定数numは10より大きい’);
“`
#### 戻り値について
“`javascript
console.log(45 + 18); // 算術演算子
console.log(45 > 18); // 比較演算子
“`
【実行】![スクリーンショット 2023-10-15 143231.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35203

JavaScriptのブラウザ互換性をESLintでチェックする

Webサイト制作でトランスパイル環境のない生のJavaScriptを書く機会があり、そこそこ古いバージョンのブラウザでも動くようにLintでコードチェックできたらなーと思って調べてみました。導入手順とかんたんな使い方を紹介します。

# 環境

– Node.js v20
– VS Code v1.82

# TL;DR

国内シェア1％以上、かつES6サポートのブラウザをターゲットとした例：

“`json:package.json
{
“scripts”: {
“lint”: “eslint .; exit 0”
},
“devDependencies”: {
“eslint”: “^8.51.0”,
“eslint-plugin-compat”: “^4.2.0”
},
“browserslist”: [
“>= 1% in JP and not dead”
]
}
“`

“`js:.eslintrc.js
module.exports = {
env: {
browser: true,
},
e

命名規則あれこれ

## 目的
毎回命名規則なんだったっか…となるのでまとめます

## ケース
|ケース|例|
|–|–|
|スネークケース|snake_case|
|パスカルケース|PascalCase|
|キャメルケース|camelCase|
|チェインケース|chain-case|
|アッパースネークケース|UPPER_SNAKE_CASE|

## Python
|項目|ケース|
|–|–|
|変数|全て英小文字 or snake_case|
|定数|UPPER_SNAKE_CASE|
|関数|全て英小文字 or snake_case|
|クラス|PascalCase|
|モジュール|全て英小文字 or snake_case|
|パッケージ|全て英小文字|
|ファイル名|全て英小文字 or snake_case|

https://atmarkit.itmedia.co.jp/ait/articles/2308/08/news020.html

## JavaScript
|項目|ケース|
|–|–|
|変数|camelCase|
|定数|UPPER_SNAKE_CASE|
|関

plunkerでopenjscad その10

# 概要

plunkerでopenjscadやってみる。
練習問題やってみた。

# 練習問題
STLをパースして、描画せよ。

# 写真


# サンプルコード

“`
function main() {
var stl =
” solid square-ascii.SLDPRT\n” +
” facet normal 0.000000e+00 0.000000e+00 -1.000000e+00\n” +
” outer loop\n” +
” vertex 0.000000e+00 2.500000e+01 0.000000e+00\n” +
” vertex 2.500000e+01 2.500000e+01 0.000000e+00\n” +
” vertex 0.000000e+00 0.000000e+0

plunkerでopenjscad その9

# 概要
plunkerでopenjscadやってみる。
polyhedron使ってみた。

# 写真


# サンプルコード

“`

function graphFunction(x, y) {
return (x / (y));
}
function findPoint(x, y) {
return parseInt(parseInt((x – xMin) / xStep) * yLen + parseInt((y – yMin) / yStep));
}
var xMin = 1;
var yMin = 1;
var xMax = 9;
var yMax = 9;
var xStep = 0.125;
var yStep = 0.125;
var xLen = ((xMax – xMin) / xStep) + 1;
var yL

focus、blurイベント

`input`タグや`textarea`タグにフォーカスしたとき、なにかのエフェクトを追加したいときは、一般的にCSSで制御するのが基本であるしかし、それだけでは表現できない演出や処理を入れたい場合は、JavaScriptで制御する。

“`html

“`

“`js
let textArea = document.getElementById(‘textarea’);

textArea.addEventListener(`focus`, () => {
textArea.style.background = ‘#b0b4df47’
});

textArea.addEventListener(`blur`, () => {
textArea.style.background = ‘#ffffff’
if (textArea.value == ”) {
alert(‘値を入力してください’);
}
});
“`

#### 参考
h

【JavaScript・学習ログ1】JavaScriptの基本操作

# 目次
[1. 記述方法](#1-記述方法)
[2. データの種類](#2-データの種類)
[3. 出力方法](#3-出力方法)
[4. 四則演算](#4-四則演算)
[5. 変数について](#5-変数について)
[6. 定数について](#6-定数について)
[7. よくあるエラーの種類](#7-よくあるエラーの種類)

参考：侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters
## 1. 記述方法
JavaScriptを実行するには下記のような記述方法がある。

#### ①HTMLファイルの中に記述する
短いコード向け。
“`html

元記事を表示

Imgur APIで画像をアップロードしてみた

See the Pen
Imgur API Upload by John Doe (@04)
on CodePen.