ACDLを提唱します。その8

# 概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
素晴らしいアプリ見つけたので、plunkerに上げてみた。

# 参考にしたページ

https://qiita.com/camino37/items/39f46adbc575f9c90763

# 写真


# 成果物

https://embed.plnkr.co/plunk/90xpJjouEqIZGyEE

以上。

【JavaScript】reverseメソッドについて

# Reverseメソッドとは
配列の要素を逆順に並び替えるメソッド。

“`JavaScript:使い方
配列名.reverse()
“`

配列そのものの要素が逆順になり、戻り値としても並び替え後の配列が戻される。

# 具体例
“`JavaScript:例
let items = [“A”, “B”, “C”];
items.reverse();

console.log(items);
“`
“`JavaScript:実行結果
[‘C’, ‘B’, ‘A’];
“`

# 注意点
　元々の配列を破壊することになるので、仮に他の場所で配列を参照している場合があれば影響することになる。

# reverseメソッドを使うことになった経緯
　VueでEChartsを使用して積み上げ棒グラフを描画していた。バックエンドから渡されたデータを元に、データベースで定義した表示順に積み上げるよう設定していたが、凡例が表示順で上から下に1から表示されているのに対してグラフは下から上に積みあがっていた。これを凡例の並びと合わせるべく、グラフの配列をreverseメソッドを使用して要素

【DAY25】投稿画面における文字数の表示(2)

この記事は以下の記事の続きとなります。
[【DAY24】投稿画面における文字数の表示(1)](https://qiita.com/Nautilus1256/items/27ce3f27baa75d70b01e)

## 関数を使い回したい
前回は、質問タイトルの入力に対してJSを記述して機能を実装しました。しかし、同じページの質問詳細の入力に対しても同じ機能を付けたいです。今の状態では関数の使い回しができないので、ビューとJSの記述を以下のように変更します。
“`html

0/50文字

“`
↑inputタグのクラスに

JavaScriptの復習④

# はじめに
今回は、[前回](https://qiita.com/u_kasuzuki/items/6d954ce89f446e50164d)に引き続き、Chapter4のCSSとJavaScriptを組み合わせた、要素の非表示と切り替えについて復習していきます。

# チェックしたらクリックできるボタン

See the Pen 30秒で読める｜JavaScriptのオブジェクトデータ型とは何か

## JavaScriptのオブジェクトデータ型とは
オブジェクトデータ型とは、キーと値のペアを格納するためのデータ構造を指す。

関数とデータを保持しておくコンテナのようなものだ。

オブジェクトは、プロパティ（キー）とその値を持つことで、さまざまなデータ型を格納できる。

…と言ってもいまいち掴めないので例をひとつ。

### オブジェクトの例

このように記述するものがオブジェクトデータ型だ。

“`// personという名前のオブジェクトを作成
const person = {
name: “太郎”, // nameというプロパティに”太郎”という値を設定
age: 30, // ageというプロパティに30という値を設定
job: “エンジニア” // jobというプロパティに”エンジニア”という値を設定
};
“`
オブジェクトは、中括弧 {} を使って作成する。

### プロパティへのアクセス
もちろん、オブジェクト内の値を取り出すこともできる。

それにはまず、プロパティ（キー）にアクセスことが必要で、そのためにはドット記法もしくはブラケット

Reactで覚えとくべきポイント

## コンポーネントの定義
コンポーネントはjavaScriptの関数として定義する

“`jsx
function Hello(){
return

hello

;
// コンポーネントはJSXを返す
}
“`
コンポーネントの実行
“`jsx

“`
アロー関数でも定義できる
“`jsx
const Hello = () => {
return

hello

;
}
// const Hello = () =>

hello

; も可
“`

複数行になるときは丸括弧で囲む
“`jsx
const Hello = () => {
return (

hello

);
}
“`
“`jsx
const Hello = () => (

hello

);
“`

## JSX内のJSの書き方
{ }を使用する
“`jsx
function Hello(){

バイキュービック補間で、画像をアップサンプリングするゲーム。


### スペースキーを押すと、現在のマウス位置を中心に画像をアップサンプリングします。

バイキュービック補間（Bicubic Interpolation）は、画像処理で用いられる技術で、画像の拡大や縮小時にピクセル値を滑らかに補完します。バイキュービック補間は、周囲の16ピクセル（4×4のピクセルブロック）を使用して新しいピクセルの値を計算します。

バイキュービック補間は、距離に応じて各点に重みを付け、その重み付きの平均値を計算する手法です。そして、この重みの変化は、三次多項式によって滑らかに変化するように設計されています。

具体的には、補間する対象点に対して、最も近い4つのデータポイント（1次元の場合）や16個のデータポイント（2次元の場合）を選び、それぞれの点の距離に基づいた重みを三次多項式で計算します。これにより、隣接

Webカメラ映像の中に入りこんでしまったかのようなパノラマビューを実現したゲーム。



### カーソルキー上下左右でパノラマを操作します。

#### 説明：
Webカメラ映像の取得とテクスチャ化:

Webカメラの映像を取得し、VideoTextureオブジェクトを使ってテクスチャに変換します。これを後で円筒に貼り付けます。

円筒の作成:

CylinderGeometryで円筒形状を作成し、その上にWebカメラの映像をテクスチャとして貼り付けます。テクスチャは内側から見えるように

知名度低そうなシェルピンスキーのギャスケットの作り方

## 1. 真っ黒！

## 2. 右下を白にする

## 3. 各黒い区間の右下を白にする

## 4. 繰り返す

「Sticky Note Map」地図上でチャットができるＷｅｂ地図

【Sticky Note Map】
（Office-Shirado）
https://github.com/office-shirado/sticky_note_map

（amx-project）
https://amx-project.github.io/note/

【リミット１２】
https://chosashi-data.org/shirado/limit12/

このたび、クチコミＷｅｂ地図のリミット１２の世界版を作ろうということで、ＡＭＸプロジェクトのメンバーで始めました。（現在、ラスボスと裏ボスで進めています。）


「Sticky Note」、つまり付箋を地図につけていくイメージから、「Sticky Note Map」と名付けました。

Ｗｅｂ地図の機能としては、
　・任意の場所に

Angularを学ぶときにわからなかった単語集

# 個人的なメモ
新しく始めるインターンの関係でAngularを勉強したときにぶつかったわからなかった単語の個人的なメモです。普段の開発はバックエンドがほとんどであるため、javascriptに関する用語が多めです。

## イテレーター
イテレーターとジェネレーターは、コア言語の内部に反復処理が直接的に取り入れられており、for…of ループの動作を簡単にカスタマイズできる仕組みをもたらします。
### イテレーター
next()メソッドを持つ。
value：反復シーケンスの次の値
done：シーケンスの最後の値が既に消費されている場合に true となります。
done と並んで value が存在する場合、それがイテレーターの戻り値となります。
例；
“`javascript
const arrIterator = [1, 2, 3].values();
for (const value of arrIterator) {
console.log(value);
}
// Logs: 1, 2, 3
“`
イテレータはざっくりいうと、一連の複数のデータからなるもの。f

Javascript応用文法

今回はJavascriptの中でも応用的な文法を記事にしたいと思います。

1. 関数式とアロー関数
JavaScriptでは、関数という特定の動作をまとめたものを作れます。通常の関数のほかに、「関数式」や「アロー関数」という書き方があります。

普通の関数：
“`javascript
function sayHello(name) {
return “Hello, ” + name;
}
console.log(sayHello(“Alice”)); // “Hello, Alice”
“`
関数式：
関数を変数に代入する形で作ることができます。普通の関数と同じように使えますが、関数の書き方が少し違います。
“`javascript
let sayHello = function(name) {
return “Hello, ” + name;
};
“`
console.log(sayHello(“Bob”)); // “Hello, Bob”
アロー関数：
アロー関数は、もっと短く書ける方法です。
“`javascript
let sayHello = (n

[ChatGPT] 読みづらいスプレッドシートをChatGPT様に見やすくしていただいた

# はじめに

業務の中で、あまりにも視認性の悪いスプレッドシートに遭遇しました。
詳細は伏せますが、とあるアンケートの結果を集計したシートなのですが、自由記述欄のあるアンケートですので1つのセルに入力される文字数が膨大でした。
そのように膨大な文字が入力されたセルが縦横無尽に並んでおりまして、まぁ視認性の悪い悪い。
困り果てた私は、救いの神 ChatGPT様に救いを求めたのでした。

# やりとり

私の方からChatGPT様にお送りしたプロンプトは以下のような感じです。

– csvを読み込んで良い感じに見やすくするJS
– 読み込んだcsvに対して、GUI上で特定の列だけを選択して表示するようなwebアプリは作れないだろうか？
– 読み込むcsvが実はアンケートの結果で、1つのセルに格納されている文章量が多い。なので表形式だと見づらいので、選択した列に対して以下の操作をしたい
– 1行目(ヘッダ部分)を項目名として表示
– 2行目以降を、項目名の下に箇条書きで表示
– 箇条書きについて。空白の場合はスキップするように

たったこれだけです。
私の送ったプロンプトと

テーブルにoverflowがあってもちゃんと表示されるツールチップ

“`html