JavaScript関連のことを調べてみた2019年11月29日

04. 元素記号

## 04. 元素記号
“Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can.”という文を単語に分解し，1, 5, 6, 7, 8, 9, 15, 16, 19番目の単語は先頭の1文字，それ以外の単語は先頭に2文字を取り出し，取り出した文字列から単語の位置（先頭から何番目の単語か）への連想配列（辞書型もしくはマップ型）を作成せよ．

###Go
“`go
package main

import (
“fmt”
“strings”
)

func main() {
var src = “Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can.”;
var dw = map[int]bool{1: true, 5

Laravel Mixでwebpackを簡単に利用する」ってどういうこと？

#はじめに

業務上活用しているLaravel　Mixにてコンパイル関連で色々と模索していおり、
今更ですがLaravel　Mixについて整理したことを備忘録としてまとめました。

まず、Laravel　Mix公式を見てみると

以下公式サイトhttps://readouble.com/laravel/5.5/ja/mix.htmlより引用
~
Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。

mix.js(‘resources/assets/js/app.js’, ‘public/js’)
.sass(‘resources/assets/sass/app.scss’, ‘public/css’);

Webpackやアセットのコンパイルを始めようとして、混乱と圧倒を感じているならLaravel Mixを気に入ってもらえるで

JavaScriptで例えば勤務時間を計算する場合

勤務時間を計算したい場合ってあると思います。
勤務時間計算用プログラムを過去に作ったので、Qiitaにも掲載したいと思います。

## 退勤、出勤時間を数値にして、それ同士を計算させる

一旦両者を数値の型にして計算します。
数値の型にする計算式は

“`
ミリ秒/3600000 = 時間
(ミリ秒-h*3600000)/6000 = 分
“`

これを出勤と退勤で計算して、その差を取ります。

## 退勤と、出勤時間が合計何時間、何分か計算する

1. 退勤と出勤の差を計算する
2. 差はミリ秒で取れてくるので、時、分へ変換する
3. 時、分の和を計算する

“`js
var from = “08:00”
var to = “24:00″

var Y = new Date().getFullYear()
var M = new Date().getMonth()+1
var D = new Date().getDate()

var ymd = Y+”/”+M+”/”+D+”/”

var fromTime = new Date(ymd+” “+from).getTime(

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる８（ピンの物理的形状の中心）

A-Frameをつかって物理演算ができるようにしてみます。
A-Frame側の設定で、ピンの物理的形状とレンダリングされる形状の中心ずれを調整できるか検証します。

### 例１）複合シェイプのcylinderを利用してoffsetで位置を調整する
設定しました。
[demo](https://k38.github.io/aframe/physics-system/pin_shape_compound_1.html)
位置調整はできました。
ボールを転がしてみましょう。
[demo](https://k38.g

【React入門】コンポーネントの条件付きRender (Conditional Rendering)

# はじめに

Reactの公式ドキュメントの条件付きレンダー(**Conditional Rendering**)にトライ。

条件付きレンダー-React
https://ja.reactjs.org/docs/conditional-rendering.html

# 開発環境

* Ubuntu18.04
* yarn 1.17.3
* create-react-app 3.1.2

# create-react-appで準備

“`
$ create-react-app try-conditional-rendering
$ cd try-conditional-rendering
“`

で、`./public/index.html`と`./src/App.js`を編集。

“`html:./public/index.html



【忘年会に向け】オールスター感謝祭的な四択クイズウェブシステムをNuxt.js+Socket.IOで実装してみた

# 経緯

1. 我がチームが忘年会の幹事に任命される
1. まじろう「出し物、、、なんかします？」
1. 先輩「オールスター感謝祭・・・」
1. 一同「は？」
1. 先輩「オールスター感謝祭！！」

ということで、即興でnuxtによる四択クイズウェブシステムを作ったお話です。

ソースはgithubに設置しました。
https://github.com/majirou/allstar

また、開発にあたり以下の記事とソースを参考にさせていただきました。
[オール◯ター感謝祭もどきアプリで社内イベントを乗り切る](https://sota1235.hatenablog.com/entry/2015/12/24/130906)
私自身はVue派なので、Reactソースを眺めながら勉強になりました。

#基盤となる技術

## websocket

Slackなどのチャット系サービスなどに使われている技術とのことで、
nodejsでは、[socketio](https://socket.io/)というライブラリを用います。
[wiki](https://ja.wikipedia.org/w

JavaScriptのCookie操作を簡略化したライブラリ、pocket-cookieを作成しました

# pocket-cookie

– `pocket-cookie`はJavaScriptのCookie操作を簡略化したライブラリです。
– リポジトリは[こちら](https://github.com/aclearworld/pocket-cookie)
– ぶっちゃけ著者による[js-cookie](https://github.com/js-cookie/js-cookie)の再実装
– でもあっちにない機能もあるよ！([getWithAutoCast](#getwithautocast))
– tsで書いてるので、当然`d.ts`もパッケージに含まれています

## なぜ作ったか
[js-cookie](https://github.com/js-cookie/js-cookie)がes5で書かれており、babelとか使っていなかったので、なんとなくbabel/typescriptで書き直しました

## インストール

npm

“`bash
$ npm install -S pocket-cookie
“`

or yarn

“`bash

エンジニアにオススメしたいyoutuber

# Able Programming
機械学習に必要なpythonのライブラリや、機械学習の手法について解説しています。初心者でも機械学習に触れられるようになっています。
[Able Programming](https://www.youtube.com/channel/UCh5M2YUAPW7HnpfTUv7XHmA/videos)

# シリエン戦隊JUN TV

シリコンバレーの現役エンジニアで、シリコンバレーで働いているエンジニアならではの情報を載せています。
将来シリコンバレーで働きたい人や起業したい人にオススメです。
[シリエン戦隊JUN TV](https://www.youtube.com/channel/UCqRPKFts1P

Githubでスターが多いWYSIWYGエディタ（2019年11月）

# はじめに
2019/11時点でGithubにある[WYSIWYG](https://github.com/topics/wysiwyg?o=desc&s=stars)タグでスターが多いライブラリを調べてみます。

# Quill
## 概要
**Github**
https://github.com/quilljs/quill

**Demo**
https://quilljs.com/

・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある）
・クリップボードを経由して画像のアップロードが可能です。
・[highlight.jsを使用してコードブロックのハイライトが可能のようです](https://quilljs.com/docs/modules/syntax/)

**対象ブラウザ**
![image.png]

nuxt generate したときに JavaScript ファイルを minify しない設定

確認バージョン: @nuxt/cli v2.10.2

`nuxt generate` コマンドで `./dist/_nuxt` の下に出力される JavaScript は、デフォルトで minify されています。

これをやっているのは webpack です。 nuxt.config.js で minify しないように設定すれば、この設定が webpack まで渡るようになっています。

[公式リファレンス](https://ja.nuxtjs.org/api/configuration-build/#optimization)

“`nuxt.config.js

export default {
mode: ‘universal’,

//…

build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
},
optimization: {
minimize: false
}
}
}
“`

よく見

条件によって特定のプロパティがあったりなかったりするオブジェクトを簡単に書きたいなあと思った場合

例えば、`is_flag` が `true` の時だけ、`id` というプロパティがあり、それ以外の場合は `id` プロパティが存在してはいけないオブジェクトをワンライナーで書きたいなあと思った場合。

“`javascript

const obj = {
…(is_flag ? { id:1111 } : {}),
hoge: `hogehoge`,
fuga: {
fugafuga: `fugafuga`
}
}
“`

三項演算子とは-基礎＋応用（変数を活用した記法）

三項演算子について、学習したので、備忘録もかねてまとめます。
今回は基本となる記法だけでなく、変数を活用した記法も以下に記載します。
（変数を活用した記法は自分が実装した時に非常に苦戦しました。今回の記事を書くきっかけです。。）

#三項演算子とは
if文を簡易的に記述するときに使用します。
三項演算子は３つの項目に分かれており、これが三項演算子における三項の意味する部分となってます。
その三項とは条件と２つの可能性のことを指しており、これを使用することでIf文を簡易化します。
それでは早速使い方を記載していきます！

#使い方
まず、三項演算子の記載法について、以下に記載いたします。

“`:三項演算子の書き方
条件式 ? trueの時の値 : falseの時の値
“`

続いて具体例を用いて、if文から三項演算子に変換してみます。

“`:if文
if apple_stock > 1
:eat_apple
else
:buy_apple
end
“`

上記例の場合、三項は以下のようになります。
-条件式　if apple_stock
-trueの時の値　:eat_

React初心者だけどUbuntu18.04上でcreate-react-appとReact Hooksを使ってサクッとカウンタを作る

初投稿です。私もReactの勉強を最近始めたばかりなので備忘録的に。
色々すっ飛ばしてます。

# まずはUbuntuのバージョン確認

Ubuntu上で作ります。

“`
% cat /etc/os-release
NAME=”Ubuntu”
VERSION=”18.04.3 LTS (Bionic Beaver)”
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME=”Ubuntu 18.04.3 LTS”
VERSION_ID=”18.04″
HOME_URL=”https://www.ubuntu.com/”
SUPPORT_URL=”https://help.ubuntu.com/”
BUG_REPORT_URL=”https://bugs.launchpad.net/ubuntu/”
PRIVACY_POLICY_URL=”https://www.ubuntu.com/legal/terms-and-policies/privacy-policy”
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
“`

javascript　基本その1

今日は忘れてきた、javascriptについて書きます。

# JavaScriptとは
ウェブサイトで操作をして表示を変化させたい時に使用する言語です。

例1、ある箇所にマウスを乗せると、プルダウンが展開
　　(カテゴリにカーソルを載せたらカテゴリ一覧が出てくる)

例2,facebookのいいねボタン

といった風に、カーソルやクリック、時間経過で変わる動的な挙動を扱います。

## javaとは違う
Javaという有名なプログラミング言語があります。JavaとJavaScriptは全くの別言語です。

JavaとJavaScriptではメインで使用される分野が異なります。

Javaは業務システムなどのサーバーサイド側で使用されます。
つまり、データの保管や複雑な処理を行う「裏側」がメインです。
Rubyもサーバーサイドに分類されます。

一方、JavaScriptは前述の通り、主にフロントエンド、つまり「見た目」の部分で
活躍することが多いプログラミング言語です。

## ECMA
JavaScriptが開発されてからしばらくは、異なるブラウザで互換性が無いことが問題となって

javascriptのonclickとaddEventlistnerの違い

###まずonclickとaddEventlistnerを書いてみる！！

(js)のonclick
========

“`html

btn

“`

これでconsole.log();でうまく表示させることができました。

しかし、下記のように書いてみると,,,,,,,,

“`html

btn

“`

だと、

「ざっくり」iteratorとgeneratorを理解する

## iterator（イテレータ）とは

iterableなオブジェクトの中で動作する仕組みのこと。
iterableなオブジェクトが連続して順番に値を返すための機能のこと。

## iterable（イテラブル）とは

iteratorを内蔵しているということ。
`変数名[Symbol.iterator]`の中に`iterator`があるかどうか確認すれば、そのオブジェクトがiterableかを判別できます。

“`javascript
const arr = [0, 1, 2];
const str = ‘hoge’;
const obj = {a: 1, b: 2, c: 3};

console.log(‘Is iterable? => ‘ + !!arr[Symbol.iterator]);
console.log(‘Is iterable? => ‘ + !!str[Symbol.iterator]);
console.log(‘Is iterable? => ‘ + !!obj[Symbol.iterator]);
“`

他にもざっくりとしたイメージだと

– 連

アクティブなタブを切り替える度にそのタイトルを取得しGoogleスプレッドシートに書き込むfirefoxアドオンを作った話

#概要と、うだうだした話
サークルで一時流行したSlackBot開発も下火になる中、未だに密かにBotに機能を追加しようと開発を続けている者がいた……
この前サークルでの「SlackBot開発によって得られた知見共有会」にて「大学生はプライベートをネタにしてなんぼ」とか息巻いて今後の展望として「今何見てる機能（他の人からメンションを受けると現在見ているサイトをSlackに晒す）」とかを実装すると言いましたそれを実装した際に作った「アクティブなタブを切り替える度にそのURLを取得するfirefoxアドオン」について書きたいと思います。
　そもそも、firefoxのアドオンの作り方について解説してくれてる日本語のサイトが少ないんですよね。Chromeの拡張機能の作り方サイトはかなり充実しているのにfirefoxアドオンでググっても出てくるのは「firefoxアドオン使えなくなる」とかばっかり。firefoxユーザーってそんな少ない訳でも無いでしょうに。というわけでアドオンを作成したい人が参考に出来るようにかなり丁寧に説明しようと思います。

#実装の概説
まずGASでGETを受けたら受け取

Vue.js でマインスイーパっぽいものを作ってみた

# ?初めに

コーディングの練習のために、個人的に慣れ親しんでいる Vue.js で単純な実装のゲームとされるマインスイーパを作ってみました。

マインスイーパの仕様をきちんと調べたわけではないため、動きに若干不安がありますが、そのあたりは漸次改善していく予定です。

# ?本題

## 環境

||バージョン|
|:–|:–|
|Node|v12.11.1|
|npm|6.11.3|
|vue-cli|4.0.5

## 成果物

それっぽい動きしています。


[ソースコード（github）](https://github.com/qianer-fengtian/vue-minesweeper)

## 実装のポイント

### マインスイーパーの各マスを作る

“`html