Webアプリでカメラ操作したいときに見るメモ（javascript）

HTML

“`html

“`
・width：横幅
・height：縦幅
・muted：動画の音をでないように設定
・autoplay：動画を自動再生
・playsinline：インライン再生を可能にする

参考
[【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ]
(https://webliker.info/52510/)

JS

“`javascript
async function main() {
// デバイス（カメラ・マイク）からのデータ取得を試みる
// 映像や音声が使えるデバイスが確定するまで時間がかかるためawaitを使う
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
// IDが”my

【JavaScript】splice()メソッド

#プログラミング勉強日記
2020年11月16日
spliceメソッドを学習したので、記録していきます。

#spliceメソッドとは？
配列の中身を削除したり、置き換えたり、新しく値を追加できるメソッドです。

#構文
“`
num.splice(‘start’,’deleteCount’, item1, item2….);
“`
###1.start

配列を変更する開始位置を表すインデックス番号を記述します。

####2.deleteCount
startから値を取り除く数を記述します。

記述しなかった場合、start以降(startの値も含めます)の値を全て削除します。

0の場合、値は削除されませんが、itemに新しく追加する値を記述する必要があります。

###3.item1,item2….
startから配列に追加する値を記述します。

#例文

###インデックス番号3(50)から、2個(50と60)の値を削除して、新しく35を追加する。

“`script.js
const scores = [80,90,40,50,60,45];
scores.s

GoogleMapに複数のマーカーを表示する

GoogleMapに対象店舗と周辺店舗を表示させたいと思ったため調べたことを記録します。
当記事は、主にJavascriptの記述についての記載になるためGoogleMapのAPIキー取得等に関する記述は省略します。
条件としては以下のとおりです。

・地図の中心に対象店舗が表示される。（マーカーを立てる）
・対象店舗を中心として半径５km以内にある店舗にもマーカーを表示する。
・対象店舗と周辺店舗はマーカーの色を分ける。
・周辺店舗のマーカーをクリックしたときには吹き出しが表示される。
・吹き出しには店舗名が入っており、店名をクリックすると該当店舗の詳細ページに遷移する。


### 開発環境
ruby 2.6.5
Ruby on Rails 6.0.3.3
OS: macOS Catalina

### はじめに
GoogleMapApiの使い方

Apollo ClientのReactive variablesが良さげ [Local resolvers deprecated] [Local-only fields]

## 久々にドキュメント読んだらLocal resolversがdeprecatedになっていた事件

なんてこった。
Local resolversの代わりに[Local-only fields](https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/)使うといいらしい。

## [Local-only fields](https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/)

今までのようにapollo cacheに値を保存する方法と、[Reactive variables](https://www.apollographql.com/docs/react/local-state/reactive-variables/)という新しいものがあるという。
この記事ではReactive variablesのほうについて書く。

## [Reacti

ブックマークレット(JavaScript)で湯婆婆を実装してみる

書いたあとで見つけたんですが、同じjs実装で圧倒的にスマートな例が別の湯婆婆のコメント欄にありました。
https://qiita.com/TD12734/items/743e90fb867fee8c562e#comment-5abe544380a4b2d29af3
上記、@shinji709様のコードが先となりますorz

## はじめに
「[Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)」のフォロワーネタです。
[JavaScript版](https://qiita.com/hato-poppo/items/670d5186c2807a5f51b4)は既出なので、ブックマークレットにしました。

ブックマークレットは昔ゲーム・オブ・スローンズの画面が（演出上）暗くて見えにくい事にイライラして、アマプラの動画の輝度を調整するChromeExtensionを作ろうとした時にちょっと勉強した記憶があります。
（輝度調整のChrome拡張機能は既にあった）

## コード
“`javascrip

【JavaScript】CSV 書き出しの際に必要なエスケープ処理と二次元配列→文字列変換の方法

# CSV 書き出しの際に必要なエスケープ処理と二次元配列→文字列変換の方法
こんにちは、ndj です。
二次元配列から変換した `CSV`(カンマと改行コードで区切ってあるアレです)をファイルなどに書き出す際に値にエスケープ処理を施す必要があったので、そのときの方法を記録しておきます。
また、合わせて二次元配列を `CSV` 形式の文字列へ変換する方法についても記録しておきます。

## なぜエスケープ処理が必要なのか
`CSV` 形式のファイルを作成する際、なぜエスケープ処理が必要なのかといいますと、値の中に**,**(カンマ)や**\n**(改行)が含まれてしまっていると、`Excel` や他のアプリケーションなんかで `CSV` を読み込んだときに値中に含まれている**,**(カンマ)や**\n**(改行)と区切り文字である**,**(カンマ)や**\n**(改行)を区別できないわけです。
なので、値は「**””**(ダブルクォーテーション)」で囲んで値であるということを明示する必要があります。

## エスケープ処理を行う方法

“`escape.js
// エスケープ処理

Vue.jsを使って簡単なカウンターアプリを作ってみた

最近Vue.jsの勉強を本格的に始めました。ひとまず何か簡単なものを作ろう！ということで、今回はカウンターアプリを作ってみました。良ければお試し下さい→[カウンターアプリ](https://takanoriokawa.github.io/CounterApp/)

##実現したいこと
1.ボタンをカチカチして数値を変更し、計算させる。
2.計算方法は足し算、引き算、掛け算、割り算を用意する。
3.計算方法の表記は、切り替えたタイミングで上に表示させる。


#コード
“`html:index.html




Javascriptのコールバック関数でつまずいた

Javascriptを勉強中、コールバック関数を理解するのに無駄に時間がかかってしまったのでメモとして整理しておきます。私の様な初心者の方の理解の一助となれば幸いです。内容はコールバック関数の非常に初歩的な部分についてのみとなっています。

ちなみにこれがQiita初投稿でプログラミング自体も初心者なので、間違いや的外れな箇所があるかもしれません。何かあればコメントでご指摘ください。

# コールバック関数とは？
定義は「他の関数の引数として渡される関数」のことです。Javascriptだけでなく他の言語でも使われます。

この定義だけみるとシンプルで何のことはないのですが、いざプログラムに書くと見た目がかなり複雑になって何をしているのかが分かりづらくなり、勉強中の私は非常に混乱しました。

# 単純な関数との比較
コールバック関数が出てくるとカッコの数や行の数が多くなり混乱しやすいですが、数値などの引数を持つ通常の関数との比較という形で考えると理解しやすいと思います。

例えば、以下のadd関数は二つの数値を引数に取り、その和をコンソールに表示する関数です。(なお、アロー関数に関して

jqueryメモ　オブジェクトにプロパティを追加・削除する方法　

###オブジェクトにプロパティを追加する方法

“`jquery:jquery.js
let data = {} //空のオブジェクトを定義
data[‘name’] = taro ; //これでdataは{name:’taro’}になった
“`

###オブジェクトのプロパティを削除する方法

“`jquery:jquery.js
let data = {name:’太郎’,age : 20}
delete data[‘age’]; //data中のageを削除
“`

OPTICSをJavaScriptで実装した

# はじめに

「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/norimy/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の六回目です。

今回はOPTICSの実装について解説します。

デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClusteringにして、ModelのOPTICSを選択）
実際のコードは[optics.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/optics.js)にあります。

なお、可視化部分については一切触れません。

# 概説

OPTICSについては、[Wikipedia](https://en.wikipedia.org/wiki/OPTICS_algorithm)の擬似コードをそのままコードに起こしただけとなります。

ただし、内部で優先度付きキューを使用する必要があるため、その実装も行っています。

react-navigationで画面遷移をする【ReactNative+expo】

# はじめに

初めまして[Tutu](https://twitter.com/padde_cross)と申します。
最近**react-native**の勉強を始めました。
その中でreact-navigation(5系)を使う機会があったので備忘録として残しておきたいと思います。

# 準備
react-navitaionをインストール
`npm install @react-navigation/native`

react-navigation-stackをインストール
`npm install @react-navigation/stack`

依存ライブラリをインストール(expoを使用)
`expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view`

# 環境
react-navigation-native ： 5.8.9

WebGL入門（概念の話）

## はじめに
WebGL、できるようになるとかっこいいですが、なかなか理解しづらいですよね。
私もまだ初心者ですが、最初の入門としてこのような記事があればよかったなあと思いながら
備忘録も兼ねて概念の記事を書いてみることにしました。
ソースコードは出てきません。

## WebGL
### WebGLって何？
WebGLはブラウザからJavaScriptを使用してGPUに命令を出し、結果をCanvasエレメントに描画することができます。
GPUはGraphics Processing Unitの略で、画面上にグラフィックを描画する処理を行うユニットです。
GPUの持つ強い処理能力をブラウザで活用することで、ブラウザで3DCGのような高負荷のグラフィックを表示させちゃおうというのがWebGLです。

## GLSL
GLSLは”OpenGL Shader Language”の略で、シェーダと呼ばれたりします。
名前にもOpenGLとあるように、OpenGL上で使われている言語です。
OpenGLとは、
> クロノス・グループ が策定している、グラフィックスハードウェア向けの2次元

Vue.Jsのv-forディレクティブはforEachと考えればしっくりくる！

#この記事について

JavaScriptもろくに書けないにも関わらずいきなり、Vueをバリバリ使った案件にぶち込まれて、はや半年。最初に理解に苦しんだのが”v-for”。
今ではv-forにはかなりお世話になっているが、最初のうちはもの凄く苦しんだ。
何せfor文すら書けなかったのだから無理もない。

#そもそもv-for とは？？
まずVue.jsを触りはじめたときは、ディレクティブすら意味が分からなかった。
よくもまあそんな状態で初めたものである。

簡単にいうとディレティブとは、Html側でJavaScriptっぽいことができるように、
Vue.Jsで用意されている便利な部品のこと　だと私は思っている。
Vueにはいろんなディレクティブが用意されている。それらを駆使することによって、
ScriptからHtmlへのアクセス（逆もしかり）が非常に簡単になるというのがVue.Jsの
本質かと思う。

それではv-for は何かというと
公式サイトによると

>v-for で配列に要素をマッピングする
配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用

【vue.js】Vuexを学ぶ

Vuexの概念が何となく理解出来たので、ついでに使い方もまとめておく。
自社の開発においても大量のコンポーネントを扱わなければならない中でVuexが必須となっているので、勉強し直した。

## Vuex（ビューエックス）とは何か？
[Vuex とは何か？ | Vuex](https://vuex.vuejs.org/ja/)

ググったら一番最初に出てくるこれを見てもイマイチ分からない人に向け、
vue.jsの基本は一応分かっている前提で説明すると、
沢山のコンポーネントがあるそれなりの規模のプロジェクトがあったとする。
さて、この図でComponentAのデータをComponentCやComponentEに渡すにはどうしたらいいだろうか。

親コンポーネントから子コンポーネントへ、
また子コンポー

nodeList.forEachを使用してJavaScriptの同一処理をスマートに書く

## はじめに

※ JavaScriptが書ける人には不要な記事です。

ウェブサイトにおいてスライダーやモーダル、その他タブ等を実装するとき、そのページ上に複数存在する場合の記述方法の解説です。

今回はひとつのページ内で、スライダー（Swiper）を複数設置するシチュエーションがあったとします。

## ググるとよく出てくるやり方

まったく同じスライダーがページ内に3個あったとします。ググるとよく出てくる情報が以下のようなやり方です。

“`html

“`

“`javascript
const swiper1 = new Swiper(‘.js-swiper-1’, {});
const swiper2 = new Swiper(‘.js-swiper-2’, {});
const swiper3 = new Swiper(‘.js-swiper-3’, {});
“`

スライ

アツマールでコメントの個人特定をする方法

# 筆者メモ
この記事は、もともとNoteで公開していた内容と完全に同じ内容です。
元の記事：https://note.com/hadhad/n/nad8548c4943d

もともと100円で売ってたんですが、誰も買わなかったので無料にしたところ、
twitterでプチバズったのにNoteのフォロワーがまったく増えなかったので、
もうQiitaに自己転載して、もっといろんな人が見れるようにしました。

記事に記載したプラグインやソースコードはWTFPLライセンスで配布します。勝手にして、どうぞ。

# はじめに

RPGアツマールのコメント機能は、ニコニコ動画と違って投稿したIDが公開されていない。
そのため、コメントした人全員が184コメントをしているような扱いになっている。
また、ゲーム側でコメントのNG機能も用意されてはいるが、ID指定ではなく「キーワード」での指定となっている。

その為に、RPGアツマールでは、ゲームをコメントで荒らされた場合、
**ユーザー単位でNGしたいのに、できない**という仕様になっている。

Twitter等で「アツマール コメント NG」とかで検

TECH CAMP （エンジニア転職）６週目の学習内容の振り返り

火曜日から本格的に最終課題の学習にはいったのですが、火曜日から日曜日までで６割ぐらいは進めた（？）と思います。この調子ですすめて２２日までは必要な作業すべてを終わらせたいですね。それが終われば自分のポートフォリオを進めれる、、、ぐへへへ（変人感）
復習に入っていきたいところですがその前に、最終課題とはなんなのか、どんなことをやるのか少し話していきたいと思います。最終課題ではメルカリのようなフリマアプリの作成を通してサーバーサイドの実装を行っていきます。フロントサイドに関してはすでに用意されているのでやらなくても大丈夫です。この最終課題と今までの学習内容の違いはなにかというと、目標を達成（機能実装）するための手順を自分で考えないといけないところです。今までのカリキュラムだと、テキストに沿って決められたことをこなしていけばよかったのですが、最終課題においては機能実装を行うためにどのような工程が必要か自分で道筋を立てながら学習していくことになります。
例えば、ユーザー登録機能を作るならカラムの洗い出しとDB作成、必要なアクションの定義などなどがあります。最終課題以前だとカリキュラムに書かれた

配列変数　と　連想配列　初学者が初学者向けにまとめた

どうも。
今まで掲示板等々を学習がてら作成してきましたが、5ヶ月というスパンで焦り走りしてきた事で
「フワッとした理解」で「〇〇機能は〇〇で実装できるだろう」と何となく分かるものの、Google先生の力がなければこれ一つ自分で実装できない僕が、
一つ一つの細かな理解が疎かであることから、
これから基礎の基礎を深く理解するためにアウトプットの場としてQiitaに投稿していきます。

自身でGoogle先生を活用して数十サイトや書籍を参考に理解を深めながら、
１、、実際にコードを書いて
２、、ノートに自分の言葉でいつかの自分が見ても伝わるようにまとめていく
３、、最後にQiitaに他の方が見ても分かるよう伝えていく

※間違い部分、誤解している箇所が出てくる可能性もあります。

[配列とは]

複数(プロパティ)のデータをまとめて整理して１つの大きな箱にいれるイメージ。
![333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677104/701939f0-44ad-f6f9-17f6

[Rails][ jQuery]フォームの入力ならびに選択が完了するまで送信ボタンを押せないようにする。

# はじめに
今回は、jQueryを使って、フォームの入力ならびに選択が完了するまで送信ボタンが押せないように設定していきます。

# 完成イメージ

# 記事を書いた目的
情報の共有ならびに、自身の備忘録として執筆する。

# 導入した目的
誤送信を防ぎ、ユーザビリティを向上させるため。

# 環境
MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0

# 前提条件
– jQueryが導入済みであること。
– 画像の複数枚投稿機能を実装している。

#記事執筆者の状況
##テーブル
![Untitled Diagram-ページ2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/281c6

Javascript基礎知識＃7（関数）

##はじめに
この記事はJavascriptが苦手な私ために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
1. 関数 (function) とは
2. 関数 (function) の書き方
3. 関数(function) の例
4. 関数式とは
5. 関数式の例
6. アロー関数

#1. 関数 (function) とは
**複数の処理をまとめたもの。**プログラムを何度も使い回しができるかたちにしたものです。
コード量が少なくなって、見通しが良くなる！！

#2. 関数 (function) の書き方
関数の一番シンプルな基本のかたちです。

“`javascript
function 関数名( 引数 ) {
処理する内容
}

関数名(引数);//関数を呼び出す
“`

関数名は変数名を付けるときとルールは大体同じ。
最初に動詞を持ってくることが多い。
例）・add○○
　　・is○○

**・引数とは**
関数に与える情報で、**関数を呼び出すとき**に一緒に値を渡