JavaScriptのプリミティブ型について

#はじめに
脱初心者にむけてアウトプットをしていこうと思って記事を書いております。
間違ったことがありましたら、ぜひコメントいただけると幸いです。

###JavaScriptでは、値の種類が２種類ある
一つはプリミティブ(primitive)、もう一つはオブジェクト(object)である。（今回はプリミティブだけの記事です）

##プリミティブは「不変(immutable)」
どういう意味かというと実は簡単で、数値の9は常に9であるということ、文字列の”world”は常に文字列の”world”であること。
文字列”hello” + “world”が連結したら”hello world”になり全く新しい文字列になるのです

##ただし、「不変(immutable)」とは変数の内容を変更できないという意味ではないことです。

“`
let str = “hello”;
str = “world”;
“`

このような文があったとして、
変数strは値”hello”で初期化され、次に新しい不変の値”world”が代入されている。ここで重要なのはhelloとworldは別の値ということ

EJSでもconsole.logが使える。デバッグに便利。

EJSでも、JavaScriptでおなじみの`console.log()`を使うことで実行環境へログを出力することができます。

“`js
<% const person = 'taro'; console.log(person); %>
“`
“`sh
taro
“`

使用しているNode.jsがv10が以上であれば`console.table()`なども使うことができます。

“`js
<% const people = [ {name: 'taro', age: 66}, {name: 'shota', age: 33}, {name: 'hiroto', age: 10}, ]; console.table(people); %>
“`
“`sh
┌─────────┬──────────┬─────┐
│ (index) │ name │ age │
├─────────┼──────────┼─────┤
│ 0 │ ‘taro’ │ 66 │
│

maphilight.jsに点滅機能を追加する方法

「[maphilight.js](https://github.com/kemayo/maphilight)」は、クリッカブルマップのエリア要素をハイライトできる便利なライブラリです。

基本的な使い方をお探しの方は、以下を参考にして下さい。
[クリッカブル・マップ（usermap）を視覚化する – りきえる’ｓ ブログ](https://blog.cror.net/jquery-maphilight.html)

## 課題
このライブラリ、残念ながらエリアやアウトラインを点滅させることまでは出来ません。
Githubのissuesでも要望は出ていますが、対応する気配は今のところありません:sob:

## 結論
点滅できました:metal:

[](https://gyazo.com/365ccf14eba5b9bdac3aa27c7987e8f8)

## 方法
・maphilightのopacityオプションの値をsetInt

Python学習 基礎編　~コメントアウトとは？~

こちらではPython学習の備忘録と、Ruby、JavaScriptとの比較も含め記載していきたいと思いましたが、Pythonの説明が意外と長くなってしまったので今回はPythonのみとします。
プログラミング初心者や他の言語にも興味、関心をお持ちの方の参考になれば幸いです。

###コメントアウトとは？
「コメントアウトした内容は実行プログラムから無視される」という特徴があります。
つまり、コードに関するメモや意味を、プログラムに影響を与えることなく残せるので便利です。
また、この特徴を活かして、コードを試行錯誤したい時にコメントアウトが役立ってくれます。
* * *

###コメントを記述するには？
###Python
– １行コメント

「#」から行末までは実行時に無視される。
「#」より前のコードは有効。
上記より範囲指定はできない。

“`py:script.py
# この行はコメントです。
a = “コメント”
print(a) # 変数aを出力
“`
– トリプルクォートによる複数行コメント

関数(defブロック)やクラスなどの先頭の文字列に説明を記述するdocst

VeturをインストールしてもEmmetが動作しない時の対処法

こんばんは
アロハな男、やすのりです！

今日は、Vue.jsでプログラミングしていく上で、必須級とも言われている`Vetur`という拡張機能の`.vueファイルでのEmmet動作`がうまくいかず、解決するまでに時間がかかったので備忘録も兼ねて書いていこうと思います。

まず、結論から述べますと…

#結論
拡張機能の設定画面で`Emmet`と検索して、下記画像のチェックボックスにチェックを入れると、TabボタンでのEmmet記法が有効化されます!!

#そもそもEmmet記法って？
Emmet記法とは、HTMLやCSSをコーディングしていく際にタグやプロパティの一部だけを入力するだけで、タグやプロパティを生成する為の記法です。

具体例をあげると、

>
>例：`div#test` Tabキ

クリックイベントが2回（複数回）動くのは、.on()の重複が原因だった

# どうも7noteです。clickイベントが重複して動くのはon()の重複のせいだった。

以前、躓いてしまったのでまとめました。

## 問題
1回押したら開く、もしくは閉じるだけしたいのに、
以下のようにクリックしたら2回（もしくは2回以上）動作してしまう。


## 原因

**`on()`を複数回指定しているのが原因でした。**
ウィンドウサイズによって切り替えつつ、クリックイベントも同時に動かそうとしたときに発生しました。

“`js
// 不具合が起こるソースの例
$(function(){
$(window).on(‘load resize’, function(){
var w = $(window).width();
var x = 768;
if (w <= x) { $('.ta

Reactでdivdivする問題をReact.Fragmentで解決する

#JSXの記法
JSXファイルはreturnに1つのタグしか持てないというルールがあります。
そのため、以下のようにリストを２つ並べようとすると、2つのulタグをreturnが持つことになり、

“`jsx
import React, { Component } from ‘react’;

class App extends Component {
render() {
return (

• Coke
• Soda
• Orange Juice

Hamburger Fries Salad

);
}
}

export default App;
“`
以下のようにエラーになってしまいます。

“`
Adjacent JSX elements must be wrapped in an enclosing tag
“`

#余計なdivタグ

これを回避するためによく使われ

【Nuxt.js】Firebaseとの連携方法

#firebaseパッケージのインストール

“`:ターミナル
プロジェクト名$ npm install –save firebase
“`

# firebase pluginの作成

“`:ターミナル
プロジェクト名$ touch plugins/firebase.js
“`

“`javascript:plugins/firebase.js
import firebase from ‘firebase/app’
import ‘firebase/firestore’

if (!firebase.apps.length) {
firebase.initializeApp(
{
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJE

Google Chrome 開発ツールのwaring：’DevTools failed to load SourceMap’ を非表示にする

Google chromeの開発ツールのコンソール画面でこのようなワーニング出た事ありませんか？


javascriptファイルをコンパイルして生成する時に、mapファイルというのも生成されるみたいですが、そのファイルがないとwarningが出るみたいです。

デバッグ時に邪魔なので、非表示にする方法を調べました。

## 非表示の仕方

1. f12で開発ツール起動
2. 歯車マーククリック
3. Sourcesの「Enable Javascript source map」のチェックを**外す**
![スクリーンショット 2020-11-26 18.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322

Web Workerを実装してみる

## Web Workerって？

>Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

by [MDN] (https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API)

JSはシングルスレッドですので、本当の意味での並列処理が行えません。
なのでめちゃ重な処理を書いてしまうと、その他のボタンやら何やら効かなくなって、サイトが完全に固まってしまいます。
これを解消してくれるのが`Web Worker`です。
昨今ではSPAなどによりでクライアント側で重たい処理をすることが増えていますので、ぜひ使いこなしておきたいと思っています。

## 現在ブラウザ側の対応はどうなってる？
![スクリーンショット 2020-11-26 16.51.36.png](https://q

jQuery学習#01

#jQueryの基本
・jQueryまたは$でアクセス。
・基本的な使い方は、要素を選択し、選択した要素群に対して操作を行うというもの。
↓基本的な書き方
`$(‘セレクタ’).メソッド(‘パラメータ[引数]’);`

# #1. マウスクリックで処理を実行
・まず下記のようにHTMLを書く。

“`html

ボタン

[Node.js][Deno] オブジェクト合成各種 ベンチマーク比較

先ほどの [クラスのベンチマーク](https://qiita.com/Yggdrasil-Leaves/items/62ee54ad98e2d6f758c1) の続編。
オブジェクト合成でより良い(というか速い)手法ないかなと悩みつつ。

# 実験環境

同じく

– Node.js 14.15.1
– Deno 1.5.4

# 実験設定

– 10要素で構成されるオブジェクト2組を1つのオブジェクトにまとめる
– 要素のうち5つは名前が重複しており、合成元を合成先に上書きする
– 合成先はプロトタイプではなく、独立したオブジェクトとして新規に生成される

という前提で

– 合成先オブジェクトを生成するファンクションと、合成元オブジェクトを用意
– 実行時間計測
– 合成先オブジェクト生成ファンクションだけの結果
– 合成先オブジェクト生成ファンクション+各種アルゴリズムの結果
– 結果表示
– 各種アルゴリズムの結果部分を抽出表示

という手順。

# オブジェクト合成アルゴリズム ここに集う

今回調査するアルゴリズムを御紹介いたしましょう。

JavaScriptのデータ型について

##JavaScriptで扱うデータの種類について
JavaScriptでは8種類のデータ型が定義されています。
よく出てくるものの例として以下の物が挙げられます。

* Number(数値)
* 3, 5, 18, 0 etc…
* String(文字列)
* ‘Hello’, ‘Good’ etc…
* Boolean(真偽値)
* true, false
* Object(オブジェクト)

またJavaScriptにはデータ型の種類を調べる`typeof`演算子というものが用意されています。

“`javascript
console.log(typeof 5);
console.log(typeof ‘Hellow’);
console.log(typeof true);
“`

##出力結果

“`
number
string
boolean
“`

##まとめ
まだ初学者のため使い所がいまいちピンと来ていませんが（そういう人僕の他にもいますか？）いつかあ〜typeof演算子ね〜ｳﾝﾁｸｳﾝﾁｸくらいになれたらいいな、、、、

##参考

Vue-CLI + Vuexでポケモンのパーティを構築するSPAをつくる。

## 概要

ポケモンのパーティを構築して遊べるSPAです。
VueでSPAを作りたいなーと思って作り始めた。
加えて、listの高速なフィルター機能も使いたい。
実装はGitHubPagesを使ってフロントエンドのみ。

[GitHub pokemon-zukan](https://github.com/gamin27/pokemon-zukan)


## 技術・ライブラリ
* Vue-CLI
* Vuex
* lodash
* moji
* axios
* ityped
* babel-polyfill
* reset-css
* progressbar.js

## つくったもの

### パーティをつくる

ポケモンずかんからポケモンをピックアップし、パーティを構築する。

Material-UIを使ってダイアログを表示するには？

Material-UIを使ってダイアログを表示するには一筋縄ではいかずパラメータを渡す必要があります。
なので今回は「**Material-UIを使ってダイアログを表示する方法**」を紹介します。


この機能は3つのファイルで構成されています。

1. 一覧画面(index.jsx)
2. アイテムコンポーネント(item.jsx)
3. ダイアログコンポーネント(dialog.jsx)

## 1.一覧画面

“`index.jsx
import React from ‘react’;

【Nuxt.js】Vuex基礎編②stateを複数使ってみよう

? この記事はWP専用です
https://wp.me/pc9NHC-en

#前置き
今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています！
また基礎編のコードに追記するので
そちらを確認しながらやってみてください?

Vuex基礎編はこちら
https://note.com/aliz/n/n497914c981c8

#やりたいこと

基礎編のカウンターを2つに増やします！
これだけ！！！

#NGパターン
![picture_pc_18c865e53858c3abb3d3d4560c782d23.gif](https://qiita-image-store.s3.ap-northeast-1.ama

React-leafletの使い方メモ

# React-leafletとは

Open Source Mapを表示するJavaScriptライブラリであるleafletを、React.js上で使えるように拡張するライブラリです。

React Leaflet公式
https://react-leaflet.js.org/

本記事は公式のチュートリアルを順番にやっていくだけですので詳しくは公式サイトを参照してください
https://react-leaflet.js.org/docs/start-introduction

# 1. プロジェクトの作成

“`terminal:terminal
mkdir react-leaflet
cd react-leaflet
npx create-react-app my-app
“`

# 2. インストール

今回は開発版をインストールしました

“`terminal:開発版をインストールする場合
npm install leaflet react-leaflet@next –save
“`

“`terminal:安定版をインストールする場合
npm in

[javascript] switchを用いて３つ以上の条件分岐を行う。

この記事ではrails5.2.3を使用しています

概要

jsで条件分岐する際にswitchの使用方法で引っかかったので備忘録

if else との違いは？

こちらの記事で分かりやすく紹介されています。
https://qiita.com/taai/items/90cd190764f6dfcf6abd

解説

“`ruby:switch文の基本書式

switch(式){
case 条件１:
条件1に当てはまる場合の処理
break;
case　条件２:
条件2に当てはまる場合の処理
break;
default どのcaseにも当てはまらない場合:
どのcaseにも当てはまらない場合の処理
}
“`

“`ruby
switch(式){
・・・
}
“`
ここの式と条件が一致した場合に指定した処理が行われます。
条件は上から順に読み込まれ、最初にヒットした条件の処理が実行されます。

例えば

“`ruby
let a = “あ”

switch(a){

Denoでshebangを使って実行する

JavaScrptでもTypeScriptでも、これでOK！

“`js
#!/usr/bin/env -S deno run
console.log(‘hello deno!’);
“`

`deno run`で実行する仕様なので、
`#!/usr/bin/env node`と同じ感覚で
`#!/usr/bin/env deno`と書いてもダメなんですねー。

“`
error: Found argument ‘./hello.js’ which wasn’t expected, or isn’t valid in this context

USAGE:
deno [OPTIONS] [SUBCOMMAND]

For more information try –help
“`

`#!/usr/bin/env deno run`でも叱られます。
シェバンにオプションを渡すときは`-S`が必要。

“`
/usr/bin/env: ‘deno run’: No such file or directory
/usr/bin/env: use -[v]S to p

javaScriptのオブジェクトからkeyを取り出す方法

備忘録なので簡単にまとめる

### Object.keys()
* オブジェクトからkeyを取り出したい

“`
const object = { a: ‘somestring’, b: 42, c: false };

console.log(Object.keys(object));
// 出力結果: Array [“a”, “b”, “c”]

“`

という感じらしい。

おわり。