フロント技術者はコンポーネント管理をしっかりしよう [Storybook]

## Storybookとは？

Storybookはフロントエンド開発者のためのオープンソースツールであり、UIコンポーネントを独立して開発し、テストすることができます。

React、Vue、Angularなど、主要なフレームワークとの互換性があります。

Storybookを使用することで、デザイナーや他のステークホルダーと協力しやすくなり、`フロントエンドの開発プロセスがスムーズ`になります。

? ポイント: StorybookはUIコンポーネントの独立した開発とテストを可能にするツールです。

## Storybookのインストール

Storybookを使用するには、まずプロジェクトにインストールする必要があります。

これはnpmやyarnを使用して簡単に行えます。例えば、ReactプロジェクトにStorybookをインストールするには、以下のコマンドを実行します。

“`
npx sb init
“`

このコマンドは必要な依存関係をインストールし、Storybookの設定ファイルをプロジェクトに追加します。

? ポイント: Storybookを使用する前

[Vue.js] v-bindでクラス付けかえの基本

### クラスの付けかえ

v-bind:属性名（例：v-bind:src）などでVueのdataやcomputedと紐づけることができる。

以下は、isOpenの値がTrueの場合、open_class_nameが付与され、そうでなければ何も付与されない。
“`app.vue

“`

デフォルトのclassがある場合は別にした方が個人的には見やすい。

“`demo.vue

同じ構造を省略する例

## はじめに
json構造で、同じ箇所を共通化する方法で迷ったので記載しておく。

## 同じ構造を省略する例
非同期を扱う場合でkintoneを例にとると、
あるアプリデータを追加する場合と修正する場合、id違いである。
record箇所は追加と修正で、共通のデータを再利用するようにしましょう。
・追加の場合
“`javascript
const body = {
“app”: kintone.app.getId(),
“record”: {
“文字列1行”: {
“value”: “テスト”
},
“文字列複数行”: {
“value”: “テスト\nテスト2”
},
“数値”: {
“value”: “20”
},
“日時”: {
“value”: “2014-02-16T08:57:00Z”
},
“チェックボックス”: {
“value”: [“sample1”, “sample2”]
},
“ユーザー選択”: {

画像をあるアクションでアップロードする

## 内容
javascript、今回はkintoneを使用し、画像をあるサーバからアップする方法を記載する。

## 主な関数、API
・あるURLから画像を取得したい場合fetchを使用する。

https://www.yoheim.net/blog.php?q=20180901

・kintoneでファイルをアップロードする。
https://sample.cybozu.com/k/v1/file.json

https://cybozu.dev/ja/kintone/docs/rest-api/files/upload-file/

kintoneでは以下のようになる。
プロセスのアクションボタンを押下したときに発動させる例。
“`javascript
kintone.events.on(‘app.record.detail.process.proceed’, async function(event) {
if (event.action.value === ‘画像アップロード’) { // アクションボタンの名前に合わせて変更
try {

YouTubeでスペースキーが動かない時のユーザースクリプト対処

## はじめに

YouTubeでスペースキーによる動画の一時停止/再開ができなくなりました。症状としては、ウィンドウを切り替えたときにスペースキーが効かなくなるようです。

一時しのぎですが、Tampermonkeyのユーザースクリプトを作って、スペースキーが押されたらビデオをクリックするようにしました。

## 本記事の対象者

YouTubeでスペースキーが効かなくなった方。

どうしてもスペースキーで動画の一時停止/再開をしたい方。

## ユーザースクリプト

ブラウザの拡張機能Tampermonkeyにユーザースクリプトを追加してください。

“`javascript
// ==UserScript==
// @name Youtube Fix Space Key
// @namespace http://tampermonkey.net/
// @version 1.0
// @description YouTubeでスペースキーが効かないのでスペースキーが押されたら動画をクリックする。
// @author Query K

【JavaScript】1つ1つの関数に役割を持たせる関数型プログラミング

# 初めに

最近の学習はfreeCodeCampで基礎を見直しています。そこで普段何気なく使用している関数（function, アロー関数）について1つの関数に複数の役割を持たせていることに気付いたので、関数の役割を1つの定めるようにしました。

今回のプログラムを説明すると、

「昨日お酒を何杯呑みましたか？」の質問に対して入力したお酒の杯数分「?」が描画されるプログラムです。

# ソースコード

### 修正前

“`javascript

// ビールの個数を受け取って、ビールの配列を返す
function getBeers(numOfCups) {
const beers = [];

for (let cups = 1; cups <= numOfCups; cups +=1) { beers.push(prepareBeer()); } //HTMLに描画 beers.map((beer) => {
let div = document.createElement(‘div’);

完全なるiPadでゲーム作成　#1

　今日からipadでマルチプレイゲームを作ろうと思う。何をするかは少し伏せておきたい。あと自分のための備忘録であるため、柔らかく、参考程度に見てほしい。あと、ほぼ完全なる初心者でもある。だから、初心者向けである。ちなみに、これは作ってる最中にやっているため実際に使えているかわわからない。後から訂正するつもりである。
# PlayCanvas
ipadでゲームを作ろうと思った矢先、iOSにゲームエンジンがないことに気づき、よく調べると[playcanvas](https://playcanvas.com/)というウェブで使える、ゲームエンジン、3dモデルエディタのようなものを発見した。これを使って作ろうと思う。

無料版では
* 1GB
* パブリックプロジェクト(公開)数無制限**(PlayCanvas上で無料ホスティングされる)**
* REST APIへのアクセス
* セルフホスティングのためのエクスポート
等ができる。

***プライベートプロジェクト***と***チーム管理***(共同作業は可能と思われる)ができない。

尚、Playcanvasの使い方は長くなるので(私もわか

Pleasanter Tips: メール送信をする機能を作ってみた

# コトの発端（情報漏洩の発覚）
（中身は無いので暇なら読んでください。）
とある日、Pleasanterに登録しているユーザーに情報に送りたいと思い掲示板作成しました。そのあと登録した情報をメールで送ろう！と思い付き、通知で送れば良いよね・・・登録完了。。。
仕事でメールを確認したら通知で送ったメールが届いておりフト見ると・・・
あれ？TOに全メールが入っている～～～～ま・ず・い
ここから謝罪メールの作成などなど対応に追われ、ショックで落ち込んでいました。
そもそも通知の仕様を調べて見ると、「複数の固定アドレスを指定した場合には、全ての固定アドレスをTOとして送信します」と。そうだったのか。
PleasanterでDMで使用できる方法が無いかと調べましたが見つからず。
私の希望する機能が無いので作る事にしました。

# 機能
0. 掲示板を登録するとユーザーにメールを送る。
0. ユーザーはPleasanterのユーザーとする。
0. 送信先は指定した組織に所属するユーザーとする。
0. 各メールの送り先はTOに設定し、1送り先1メールとする。

※ユーザーは

JavascriptのIntersectionObserverについて

### はじめに
この投稿は解説などではなく、忘れないためのメモ的な感覚で投稿いたします。
見て頂く方々に関しましては、私の解釈が間違っていたりベストな情報ではない可能性が高いので、そのつもりで閲覧していただければと思います。
加えて、そのようなことがあればコメントしていただけると大変助かります。

# IntersectionObserverとは
HTMLの要素とウィンドウの交差を監視している。
使い方は、newで作成したIntersectionObserverのインスタンスにコールバック関数を渡してておく。それの.observeメソッドの引数に監視対象を入れることで、交差したときにコールバック関数が発火する。
後々のためにインスタンスはconstで定義する。

“`js
//監視したいDOMを定義
const dom = docment.querySelector(‘監視したいDOM’);

//newでインスタンスを作ってio(変数名は何でもいいが略語のioにしておく)として定義する
const io = new IntersectionObserver(cb);

//コール

[Vue.js] 迷いやすいv-modelの修飾子を3行で。

## v-model.lazy
inputイベントではなくchangeイベントに反応する。
例えばinput type=“text”では、文字が入力し終わってから変化する。

## v-model.number
入力された値がNumber型になる。
inputは入力された値は常に文字列型になるため、数値型にしたい場合。
（ちなみにhtmlでinput type=“number”としてもデータ型としては文字列だから注意）

## v-model.trim
ユーザーから入力された値の両端の空白を削除する。
JSの.trim()と同じ。

Javascriptによるギターチューナー

ギターのチューニングアプリです。

Guitar Tuner

Click the “Start Tuner” button and play each string. The app will help you tune your guitar.

Start Tuner

Current Note:

Detected Note:

JavaScript Primer – 迷わないための入門書を読んで

初学者がJavaScript Primer – 迷わないための入門書を読んだ感想です。

# 良かったところ
– メソッドの解説だけでなく、どういった使い方ができるかも書かれていた。
– その機能が作られた経緯や歴史が解説されており、理解の向上につながった。

# 学んだこと
– constは再代入できない変数の宣言。letは再代入が可能な変数の宣言。varは同じ名前の変数が宣言できてしまうことから非推奨となっている。
– 等価演算子（==）は、オペランド同士が異なる型の値の際に、同じ型となるように**暗黙的な型変換**を行うので厳密等価演算子（==）を使う。
“`
// 文字列の１を数値に変換してから比較される
console.log(1 == “1”); // => true
“`
– Nullish coalescing演算子(??)は左辺の値が**nullish**(評価結果がnull,undefinedとなる値のこと)なら右辺の評価結果を返す。
値のデフォルト値を指定する場合によく利用される。
“`
const inputValue = 0;
const value =

SNSへのシェアする際のjs処理を一か所にまとめてみた。

※※動作未確認※※

snsへのシェアする際のjs処理を一か所にまとめてみた。

“`
/**
* SNSまたはカレンダーにシェアまたはイベント追加する関数
* @param {string} platform シェアするプラットフォームまたはカレンダー
* @param {Object} options シェアまたはイベント追加のオプション
* – text: シェアするテキスト
* – url: シェアするURL
* – hashtags: Twitterで使用するハッシュタグ
* – mention: Twitterでメンションするユーザー名
* – instance: MastodonやMisskeyで使用するインスタンスのURL
*/
export function shareToSNS(platform, options) {
// シェアURLを生成
const shareUrl = generateShareUrl(platform, options);

// 未対応のプラットフォームの場合はエラーを出力
if (!sha

p5.jsで伝統模様「七宝」を描く

こんにちは．ふじえもんです．

# p5.jsを学び始めた
最近，p5.jsを触れるようになりました．
その経緯や学びを備忘録として記録してみたいと思います．

実は，音声や音楽を可視化するプロダクト作成に興味を持ち，ChatGPTに相談したところ，いくつかの方法を提案されました．

Webブラウザ上で音の響きのようすをグラフィカルに表現します．
音や波の描画などが扱いやすい言語だと助かります．どうしましょうか

すると，Web Audio APIやp5.js,Three.jsなどを提案してくれました．

:computer:　
1. Web Audio API: Web Audio APIは、Web上で高度なオーディオ処理を行うための強力なAPIです．JavaScriptで簡単に扱うこ

wslでelixir その89

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。

# 練習問題
Livebookでd3.jsでforceSimulationを表示せよ。

# 写真


# サンプルコード

“`
defmodule KinoD3.Force do
use Kino.JS
def new(html) do
Kino.JS.new(__MODULE__, html)
end
asset “main.js” do
“””
import “https://d3js.org/d3.v5.min.js”;
function process_network(nodesData, linksData) {
var svg = d3.select(‘#out’).append(“

今開いているサイトでサイト内検索するためのブックマークレット

### ソースコード

これをブックマークに登録

“`javascript
javascript: (function () {
let frm = document.createElement(“form”);
frm.style.position = “fixed”;
frm.style.top = “10px”;
frm.style.left = “10px”;
frm.style.zIndex = 999999;
frm.style.width = “300px”;
frm.style.height = “20px”;
frm.action = “https://www.google.co.jp/search”;
let q = document.createElement(“input”);
q.type = “text”;
q.name = “q”;
q.style.width = “200px”;
q.onkeydown = function(e){

ソートアルゴリズムを可視化してみよう（４）

# JavaScript によるソートアルゴリズムの可視化

こちらのつづきです。

https://qiita.com/w0rc/items/43cb12a54310f75960a8

## プログラムの解説 – ソートアルゴリズム（１／２）

ようやく `algorithms.js` の部分に入ります。
ソートの仕組み自体は、世の中にいくらでも詳しい解説があるので、
このプログラムでの実装ポイントについて書きたいと思います。

今回は、平均計算量が $O(n^2)$ のシリーズを取り上げます。
このプログラムの中では以下のアルゴリズムを実装しています。

– バブルソート
– 選択ソート
– 挿入ソート

### VisualizedAlgorithm クラス

さっそく横道に逸れますが、
`main.js` からソートを順番に呼び出していくために、
各ソートアルゴリズムには共通のインターフェースを
持っていて欲しいです。

というわけで、各ソートアルゴリズムの実装に入る前に、
各クラスの基底となるクラスを作っておきます。

“`js:algorithms.js Visualiz

PreprosでNODE_ENVを使ってステージングと本番でJSの処理を切り替える

## 意外と多機能Prepros
Sassのコンパイラとしてやたら紹介されがちなPreprosですが、実はHTMLやJS、画像圧縮処理などの機能も付いています。

↑設定項目たくさん

Prepros is 何？ な方はこのへんをご覧ください。
[Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！ | Webクリエイターボックス](https://www.webcreatorbox.com/tech/dart-sass)
[SassやPugをコンパイルしてくれる便利なアプリ『Prepros』使ってますか？ – 株式会社DOL](https://dol.co.jp/archives/column/sass%E3%82%84pug%E3%82%92%E3%82%B3%E3%83%B3%E

input要素でEnterキー入力を検出する方法が、いつの間にかアップデートされていた

# フォーム入力などで、テキスト入力してEnterキー入力を検出する方法

いくつか方法があって、簡単に説明すると例えばこんなやり方でしょうか：

1. input要素にキー入力イベントリスナーを設ける方法。
1. form要素のsubmitイベントで処理する方法。

input要素を対象にした方法に絞って、以下の説明を続けます。

# よく見る例（非推奨のコードが含まれます）

“`javascript
let text_form = document.getElementById(‘text_form’);
let output = document.getElementById(‘output’);

text_form.addEventListener(‘keypress’, test_ivent);

function test_ivent(e) {
if (e.keyCode === 13) {
output.innerHTML = text_form.value;
}
return false;
}
“`
引用元：JavaScript

javascriptからクリックイベントを発生させる

# 結論

　イベントを発生させるのは一般に、`const e = new Event(～);`などと記述できます。
　しかし、”click”イベント自体は（MouseEventを継承した）**PointerEvent**型なので、正しく扱うには`const e = new PointerEvent(“click”);`のような書き方となります[^click]。

　ターゲットのhtml要素 targetElement に対して、例えば
“`javascript
targetElement.dispatchEvent(new PointerEvent(“click”));
“`
とすることで、クリックされたものとしてイベントが送り込まれます[^dispatchEvent]。

[^click]: Element: click イベント – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/click_event#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E