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

【Nuxt.js】グローバルなコンポーネントの設定

Nuxtでコンポーネントをグローバルに使いたい。
意外と記事が出てこない。
ファイルの指定の仕方忘れてる。

というわけで、備忘録的な感じで書きます。
最後に便利なプラグインの紹介記事も載せさせていただいてます。

#環境
@nuxt/cli v2.11.0

#事前準備

↓こいつをグローバルに使いたい…

“`components/Btn.vue

“`
　

↓このままでは、importしてないので使えません。

“`pages/index.vue

“`

#やり方
簡単です。
pagesフォルダとかと同じ

Progate無料版をやってみる【jQuery 初級編】

[前回](https://qiita.com/GodPhwng/items/dcd600a9019d6bf700d1)の続きになります。

jQueryの初級編をやっていこうと思います。
jQueryは初級編のみ無料のようです。
[レッスン一覧](https://prog-8.com/lessons/info)

このレッスンはES5(エクマスクリプト5)のようです。

#jQuery 初級編
→[公式レッスン](https://prog-8.com/jquery/study/1/1#/0)

###jQueryに触れてみよう
・jQueryはJavaScriptライブラリ。
・いろいろな便利なメソッドが使用できるが、そのメソッドの中身はすべてJavaScriptである。
・jQuery = 新しい言語　ではない。
→jQuery = 頭のいい人達が、難しい or めんどくさいJavaScript処理を隠蔽してくれて、使用者にはわかりやすい使い方で便利なメソッドを公開してくれたライブラリ。
中身は超ゴリゴリなJavaScript処理である。
また、ブラウザ間の差異も吸収してくれて、実装

#マンダラチャート の作成方法( #Localstrage 使うから入力値が保存されます)

#該当
大谷投手の目標管理にマンダラチャートを利用していたというのは有名な話かと思います。
マンダラチャートを作成できるWEBサービスを探したのですが、見当たらなかったので作成しました。

#マンダラチャートURL

[https://koji-yamamoto-github.github.io/mandala-chart/]

#概要
Web1.0時代の見た目ですが、簡易に作成しようとするとこれが限界でした。

タイトルは変更することが出来ます。

入力した値は、Localstrageに保存するので、誤ってブラウザを閉じたとしても続きから始められるようにしてあります。

localstrageも含めて全部消すには、下部の「クリア」リンクを押下して頂ければ消えます。

#作り方
マス上のものは、以下のCSSを利用するに尽きます。
display: grid;

LGTMはいやだ

#はじめに
みなさんご存知の通り、QiitaのUIの仕様がいきなり変わりました。
「いいね」ボタンから「LGTM」ボタンに。
twitterでは賛否両論ありましたが、”否”の方が多かった気がします。
そこで、これをいいねボタンに直すchrome拡張を作ります。

大急ぎで作ったので、記事も適当かつ未実装の部分もありますが、ご了承ください。

#意外と一筋縄では戻せない
twitterや他のQiitaの記事で、同じような試みをされている方がいました。
基本的には、LGTM要素を取得して`innerHTML`で**Fontawesomeのthumbs-up**に変えるだけで良いです。
しかしながら、それだけではクリック後の「✔︎」が表現できません。

今回その辺の仕様をいろいろ調べてみて考えた結果、javascriptだけではなくcssも使っていじる方が良さそうです。

#実装

“`javascript
//必須（fontawsomeのcdn）
var head = document.querySelector(“head”);
head.insertAdjacentHTML(‘bef

【6日目】JavaScript　メソッド オーバーロード(理解できず。)

#本日の学び
こんばんは。
本日も学びのアウトプット。

– Progate Javascript 学習コース4

“`js

//メソッド(クラスの中の動作情報)
class Animal {　//クラス
constructor(name, age) {　//コンストラクタ
this.name = name;
this.age = age;
}

greet(){　//メソッド
console.log(“こんにちは”);　
}
}

const animal = new Animal(“レオ”, 3); //インスタンス
animal.greet();　//メソッドの呼び出し

//継承
class Dog extends Animal{　//AnimalをDogへ継承する
getHumanAge(){ //メソッド
return this.age*7;
}
}

“`

あとオーバーロードをやりましたが、
ちんぷんかんぷんでした・・・。
明日もう一度チャレンジしてみて、分からなければ飛ばして進もうと思います。

#今日の所

SEO的に弱いTypescriptの!や?を使った演算子のまとめ

# はじめに
低級なプログラミング言語をメインで使っているのですが、たまにJavascript/Typescriptを書くことがあり、
先人の書いたコードの`??`や`！！`の意味がわからなくてググろうとするもなかなか検索に引っかからないため、
自分への備忘録としてまとめました。

キーワード：疑問符、感嘆符、ハテナ、ビックリマーク

## Null条件演算子 ?.

ex. ある変数entityがundefinedではないときにはentityのメソッドを実行し、undefinedの時は何もしないような場合

“`typescript

// 単純に書くと
let entity: Entity | undefined

if (entity != null) {
entity.Do()
}

// Null条件演算子を使うと一行で書ける
entity?.Do()

“`
Null条件演算子を使った場合にその変数がNullだったらそのままnullを返してくれます。

## Null合体演算子 ??

ex. ある変数entityがundefinedではないときにはentity

javascriptの配列関連(for, map, filter, reduce)

自分で書くときはほとんどlodashを使ってしまい、JSnativeな配列関連メソッドを使わない。
サンプルコードやらを見る時に配列周りがわからん、となるのが苦しくなってきたので、復習と備忘を兼ねて整理。

とりあえず以下について記載
– for in
– for of
– map
– filter
– reduce

### for in
for inループは「オブジェクトのキー」に対して処理を繰り返し行う。

“`
const human = {name: ‘john’, age: ’24’ , hobby: ‘shoplifting’};
for(let prop in human){
console.log(prop + ‘: ‘ + human[prop]);
};
“`

結果

“`
name: john
age: 24
hobby: shoplifting
“`

humanオブジェクトから取り出したキーが変数propに格納され、humanオブジェクトの要素を取得したい場合はpropに格納されたキーを指定することで取得できる。

ちなみにfor in は配

Async Function

Async Functionとして定義した関数は必ずPromiseインスタンスを返します。
なのでAsync Functionは”Promiseインスタンスを返す関数”を定義する構文でなければなりません。

## Async Functionの構文

関数の前に`async`を付けることで、Async Functionであることを宣言します。

“`javascript
async function asyncFunc() {
return 10
}
“`

##Async Functionが返すPromiseインスタンスの状態

– **Promise以外の値をreturnした場合**

“`javascript
async function asyncFunc() {
return 10
}

asyncFunc().then((value) => {
console.log(value) //10
})
“`

上記ではただの値をreturnしてますが、この場合返り値に10を持つFulfilledなPromiseを返します。
これは、返した

QiitaのLGTMをSushiにするユーザースクリプト

# 概要


[QiitaのいいねがLGTMに変わりました](https://blog.qiita.com/like-to-lgtm/)から、当然の流れとしてSushiにしました。
記事のLGTMボタンの他、トレンドやマイページに表示されるLGTMのアイコンもSushiに置換します。

Greasemonkey/Tampermonkeyなどで実行できるユーザースクリプトとして実装しており、[Greasy Fork](https://greasyfork.org/ja/scripts/397790-qiita-sushi)からインストール可能です。

# 実装

[偉大なる先人](https://github.com/mzyy94/like2sushi)はユーザースタイルシートで実装していましたが、筆者としてはユーザースクリプトのほうが[慣れ](h

ngコマンドの中身を覗いてみる

Disclaimer: この記事を執筆現在私はGoogleで働いています。記事内でGoogleのプロダクトについて言及するため明確に所属を記載していますが、このことは私が記事内に登場するプロダクトについて特別詳しい知識を持っていることを**意味しません。**１ユーザーが書いた記事としてお読みいただければ幸いです。

—
唐突に自作コマンドを作りたくなって、参考にngコマンドを開いてみたところ中身が気になったので読んでみました:dog2: 読んでいるファイルの全量は[こちら](https://github.com/angular/angular-cli/blob/master/packages/angular/cli/bin/ng)です。

## 第一部

“`bash:ng
#!/usr/bin/env node
‘use strict’;
“`
Shebangでインタプリタにnodeを指定して、strictモードを使う宣言をしています。

## 第二部
“`js:ng

// Provide a title to

JavaScript 　ブロックスコープ

#はじめに

varにはなく、
let,constにある、
ブロックスコープ について説明していきます。

#ブロックスコープ

簡単にいうと、
ブロック{}内で宣言した物は、内でしか使えない。
ブロック外で宣言した物は、外でしか使えない。
このような事です。

コードを見ていきましょう↓↓

###varの場合

“`js

if(true) {
var color = ‘white’;
}
console.log(color); //white　アクセス可能
“`

###let,constの場合

“`js
if (true) {
let color = ‘white’;
}
console.log(color);// ReferenceError　エラー表示

if(true) {
let color = ‘white’;
console.log(color); //white　アクセス可能
}
“`

上記コードのように、
let,constはブロック文を
外から、参照しようとすると、
ブロックスコープが働き、 アクセスできなくなります。

event.preventDefault() を最低限理解する

# 背景
**event.preventDefault()** というものをよく見かけたけど、
何をするのか。どういうものなのか。理解してなかった。

# 一言で言えば
**DOMイベントを止める**もの
Prevent : 防ぐ
Default : デフォルト
**デフォルトのイベントをさせないよ**

# 動作確認ファイル

“`index.html







Google



“`

“`app.js
const google = document.getElementById(“google”)

google.addEventListener(“click”,

【Javascript】個人用メモ【Canvas関係】

#透明度を維持したまま描画したい

“`html