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

JS初心者道場_ オブジェクトについて①

JavaScriptの`オブジェクト`を案件で使用することはあるのですが「つまりどういう物だ」ということを答えろと言われると困ってしまうし、使ってはいるけれどどのような場面で利用するのが適切なのかが曖昧なので、しっかり利用できるように細部まで調べてみます。

## オブジェクトを理解するとできるようになる(らしい)こと
– グローバルオブジェクトの意味が理解できるようになる
– メソッドを利用しているということがわかる

## まず、オブジェクトとは

オブジェクトとは
「関連のあるデータと機能の集合です」
オブジェクトを使うことによって、データをまとめて扱えるようになります。

宣言方法は以下の通り、中括弧{}を使用します。

“`javascript
// 宣言方法
{}

// 型の確認
typeof {} // “object”

// Objectは変数に格納できる
const obj = {} // 例1
const person = {} // 例２

“`

## プロパティとメソッド
「関連のあるデータと機能の集合です」の機能とは大抵は変数と関数のことです。

耳年齢判定ボットを改良（LINEで音声ファイルを再生）

##概要

普段は耳鼻科の開業医をしています。
以前obnizeのスピーカーからモスキート音を出し加齢性難聴をチェックするLINE Botを作成しました。
[耳年齢を判定するLINE Bot×Iotの作成](https://qiita.com/doikatsuyuki/items/1101ff4ba54cb4b471c0)

今回、モスキート音をファイルに入れ、LINEで音声ファイルを再生できるようにしました。

##作成方法
**1.モスキート音を用意する**

こちらを利用しました
[Sine Tone Generator](https://www.audiocheck.net/audiofrequencysignalgenerator_sinetone.php)

『File Generator』の
『Hz』をモスキート音の周波数に設定、『duration』は3秒とし『DOWNROAD.WAV FILE』をクリックするとダウンロードできます。
各周波数分用意します。

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

Discord.jsでBotを作る【いろんな機能編その1】

この記事は、前回、前々回の記事の内容に準する記事になっています

前回、前々回の記事でBotの作り方、起動方法などを紹介しました。
今回は前々回の記事にもあった通り、Botにいろんな機能を作る方法、コードなどについて紹介します

まずは…
–
今度いろんなことに役立つjsonファイルについて紹介します。

#####jsonとは…
様々な言語で使える、テキストデータ保存に使えるファイルです(筆者何となくのイメージです。詳しくはググって())
まーつまり簡単なものの情報を保存しておけるもの、的な感じで覚えておけばいいと思います。
これはMySQLなどのデータベースを使ったデータ保存などの超絶初歩的な感じにもなるので、初心者にはお勧めです。

はい。話長いですね。じゃあさっそく使っていこー

Botにプレフィックスを追加する
–
プレフィックスがわからない人へ
Botで機能を実行する際、基本的に特定のメッセージを送信するという感じになりますが、たとえばただpingだけだと、他のBotなど被ってしまったり、日常会話などをしている最中に実行してしまったりと、いろいろと不便が生じます。

誰でもわかるJavascript – bind編

Javascriptのbindの記事を読んでも、さっぱりわからないという人(自分)のために解説してみる。

#bindの基本

以下のオブジェクトが定義されているとする。

“`javascript:
const person = {
age: 20,
displayAge: function() { console.log(this.age); }
};
“`
`person`オブジェクトを通して`displayAge`関数を実行すると「20」が表示される。

“`javascript:
person.displayAge(); // 20
“`

`displayAge`関数を変数に代入して、実行すると何故か「undefined」が表示されてしまう。

“`javascript:
const newDisplayAge = person.displayAge;
newDisplayAge(); // undefined
“`

`newDisplayAge`の中身を見てみると当然`displayAge`関数が代入されている。
しかし、`this`が何であるかわか

お絵かきできるSNSを作りたい！7

線の太さを実装していきたいと思います。

↓この部分

前回同様、今度は[type=”range”]の値を取得し、lineWidthに入れるだけです。

“`html:

1

pixel
“`

“`javascript:
//線の太さ用変数（デフォルトは1px）
var strLineWidth=”1″;

function LineWidth(obj){
document.getElementById(‘LineWidthValue’).value=obj.value;
strLineWidt

お絵かきできるSNSを作りたい！6

カラーパレッドを実装していきたいと思います。

↓この部分

このままでも良いのですが、好きな色を追加出来る用にもした方がいい気がしてきたのでその他というパレットも用意します。

“`html:
その他：
“`

onchageイベントを付与しました。
JavaScriptやjQueryでバインドしても良いのですが、それだと後からどの要素にイベントが入っていたか分かりにくいので直接書く派です。

↓ということで、１番下にその他を追加。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10

ページ遷移はどうするの？

# ページ遷移ってどうするの？
## あれ？ルーターがなくない？
今までReactを書いていてそろそろサーバーサイドレンダリングに手を出した私、よしポートフォリオサイトを作ってやろ！と考えたわけですよ！ここである問題が発生！あれ、Reactのときはページ切り替えはruterを使ってたけど…Nextって**Ruterないやんけ**どうするんや〜！
いや安心してくださいませ〜
別にないわけではないです。
NextではRuterを使わなくてもページ繊維なんてちょちょいのちょいで行えるのです！
（あ！ReactでRuterを使うときは `npm install ruter`でルーターが使えるようにしてimportしてからでないと 使えませんので〜）npmとかのコマンドはまたどこかで説明するとして、話が逸れてしまったので本題に行ってみましょう！
## じゃあ実際にどうすればいいの？
話は意外と簡単です！
Nextのアプリケーションは基本的にpageディレクトリ内に様々なファイルを記述しますが、そこにある.jsファイル、つまりページコンポーネントに `import Link form ‘nex

Google maps APIでピンにドラゴンボールの情報を埋め込んでみよう！

# はじめに
– 複数のピンの立て方のおさらい
– 情報を付け加える方法１
– 情報を付け加える方法２
– 最後に

## 複数のピンの立て方のおさらい
私の一個前の記事に複数のピンの立て方が掲載されていますので、そちらを参照してください。
[Google maps APIで複数のドラゴンボールの場所にピンを立てよう！ – Qiita](https://qiita.com/Ryunosuke-watanabe/items/77b05ec6cab162b3fe62)

今回は立てたピンに情報を付け加えていきたいと思います。前回同様、複数のピンを目標としますのでfor文をうまく活用していきたいと思います。

Htmlは前回のままです。

~~~maps.html