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

ディスプレイに描画できるようにする

### ディスプレイに描画できるようにする
ディスプレイに文字を記述したり消したりできるようにします。

まず、body要素内にcanvas要素とbutton要素を記述します。
文字等はcanvas内に描画できるようにして、button要素をクリックすると描画したものを消去できるようにします。
canvas要素を取得できるようにcanvas要素内にid属性を設定します。
button要素をクリックしたら描画したものを消去するイベントを発火させるようにonclick属性を設定します。

“`


消去

“`

グローバル変数に「ctx」と「points」を設定します。pointsは描画した軌跡のデータを全て記録できるように配列にします。

上記のbody要素にonload属性を設定しているので、ブラウザがページが読み込んだ後に「in

javascriptを使用して、音声や音楽を流す方法

#前置き#
私は独学でプログラミング学習を始めて3か月の初学者です。
何度も壁にぶつかりながら、学習を進めていく中で、先駆者の方々の記事に助けられてきました。
私も悩んでいる方の助けになればと思い、記事を投稿することにしました。

この記事はWebアプリの制作過程で、Javascript（以後JSと略称を使用します）のイベント時や特定の処理を実施した際に、音声を再生したいという思いから調べた内容がもとになっています。
もともとHTMLにはaudio要素があり、audio要素のsrc属性にファイルの場所を指定して利用することで音声を再生できます。
しかし、Railsの環境下だとファイル場所の指定がうまくいかず、つまずいた結果、『audiojs-rails』というGemを使用することにしました。

#目的#
この記事では、『再生プレイヤーを非表示にして、HTMLのInputボタンを押した際に音声を再生する』ということを目的として記載していきます。アレンジを行えば、特定の処理が終わった後に再生をするということが可能になります。

#使用環境#
OS:Win10
Rails 5.2.4.

Handsontableのレンダラーまとめ

## レンダラーとは

表示やトリガー(クライアント側からの操作に対してのイベント発火）など、セルの出力を制御する設定。

ハンズオンテーブルにはデフォルトで10個の設定がされている。
以下は公式からの抜粋

> – autocomplete for Handsontable.renderers.AutocompleteRenderer
– base for Handsontable.renderers.BaseRenderer
– checkbox for Handsontable.renderers.CheckboxRenderer
– date for Handsontable.renderers.DateRenderer
– dropdown for Handsontable.renderers.DropdownRenderer
– html for Handsontable.renderers.HtmlRenderer
– numeric for Handsontable.renderers.NumericRenderer
– password for Handsontabl

javascriptのLocalStorage を使ってお気に入り機能を自作してみた ③実装編-組み込み-

# どうも7noteです。プラグインより多機能なお気に入り機能を作成。前回の続き

①準備編がまだの方は[こちら](https://qiita.com/7note/items/d6b7ad72fbdfab790641)
②実装編-基盤作り-がまだの方は[こちら](https://qiita.com/7note/items/b4643f752fcf1412324d)

wordpressで自作のお気に入り機能を使いたい人は[こちら](https://qiita.com/7note/items/7a314671c720df2483d0#%E3%81%8A%E3%81%BE%E3%81%91-php%E7%B7%A8-wordpress%E3%81%AE%E6%8A%95%E7%A8%BFid%E3%81%AB%E5%BF%9C%E7%94%A8)

## 実運用レベルで使ってみる（コピペで動くよ）

押したらお気に入りに追加。もう一度押したら削除されるように作ります。

**完成イメージ**

![movie.gif](https://qiita-image-store.s3.ap-nor

ボタンを押すとブラウザに画像を表示できる

### ボタンを押すとブラウザに画像を表示できるようにする
canvas要素を指定してキャンバス上に表示したい画像を表示します。（別にcanvas要素以外の要素でも問題ありません）

canvas要素にid属性を指定して後でjavascriptで取得できるようにします。
2つのbutton要素にはonclick属性を指定して、ボタンをクリックしたときにそれぞれ関数が発火するようにします。appearメソッドを発火させたときは指定した画像を表示して、disappearメソッドを発火させたときは表示した画像を消去できるようにします。
img要素にはsrc属性に表示したい画像を設定して、id属性を指定して後で取得できるようにします。style属性には「display: none;」を指定してappear関数が発火するまで表示されないようにします。

“`


表示

【JavaScript】連想配列の配列に対して、同じkeyの値を足し合わせたい

## やりたいこと

下のように、連想配列（オブジェクト）の配列があったときに同じkeyの値を足し合わせたいことがありました。(きれいなデータを想定しています。valueはすべて数値です。)

“`javascript
const objs = [
{key1: 100, key2: 200, key3: 300},
{key1: 100, key2: 150, key3: 100},
{key1: 100, key3: 200, key4: 100},
]

sumObjects(objs)
// {key1: 300, key2: 350, key3: 600, key4: 100}
“`

シンプルに書けないかと考えてはみたのですが、うまい書き方が見つかりません（Python3.9のように単純に足す(+)ことはできない）。

なので、結局
「結果を入れる空の連想配列を用意して、配列の中の連想配列を１コずつ見ていく。その中のkeyごとに値を足していく。」
という手続きをそのまま書きました。

## やったこと

“`javascript
functio

【NuxtJS×RailsAPI】折角0からプログラミングを勉強したので、推しキャラの誕生日アプリを作ってみた。

## 自己紹介
Webエンジニアをしたり、マジシャンをしたり、オンライン家庭教師をしたり、イベントを企画したり、色々なことをしております[yuki](https://twitter.com/yuki82511988)と申します。
今年の1月からプログラミングを学習し、DMMWEBCAMP入学を経てエンジニアとして勤務、約4ヶ月ほどが経過しました。

過去学習してきたことなどは、こちらの記事にまとめてありますので、良ければご覧ください。
[【卒業生】DMMWEBCAMPに通おうか迷っている人に伝えたい事](https://qiita.com/yuki82511988/items/37be28f2486e166fd48f)

# 成果物
NuxtJS/RailsAPI/AWS/Firebase
【Webアプリ】https://tokidosaya.com
【GitHub】https://github.com/yuki-snow1823/project-saya
コードはお世話になっているエンジニアの方にレビューをしていただき、現在リファクタリング中です。ご容赦くださいませ。

## この記

Vue コンポーネントを分割してpropsで値を渡す方法

#はじめに
[Vue 映画情報をTMDb APIを使って取得](https://qiita.com/kokogento/items/569d85c760c4d0316fbd)
:point_up:この記事のコードは全て上記リンクが元になってます。詳しく気になる人は、覗いてみてね〜

Vueの基礎を教えてくれた@popo62520908 さん、ありがとう:relieved:

#このファイルを分割したい
「コンポーネントを分割」と言うと、どうも難しそうだが言い換えるならば「ファイルを分割」と言った感じ。

以下のようなファイルがあった場合、``の部分だけを別のコンポーネント（別ファイル）にしたいとする。

“`vue:Home.vue