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

[Javascript] 初心者が分かったら役に立つ関数宣言式 VS 関数式

## 関数宣言式 – Function Declarations

一般的にプログラミング言語にて関数宣言と似たような形式です。

“` javascript
function 関数名() {
ロジック・・・
}
“`
“` javascript
// 例
function funcDeclarations() {
return ‘A function declaration’;
}
funcDeclarations(); // ‘A function declaration’
“`

## 関数式 – Function Expressions

柔軟なJavascript言語の特徴を活用した宣言方式です。

“` javascript
var 関数名 = function () {
ロジック・・・
};
“`
“` javascript
// 例
var funcExpression = function () {
return ‘A function expression’;
}
funcExpression(); // ‘A function

JS 配列のN個からN個までを取り出す

##Lodashのslice関数を作成してみた

~~~javascript
const slice = (array = [], start = 0, end = array.length) => {
const newArray = []
for (let i = start; i < end; i++) { newArray.push(array[i]) } return newArray } console.log(slice([1, 2, 3, 4, 5], 1, 4)) // => [ 2, 3, 4 ]
~~~

JS 配列からN個返す

## LodashのtakeRight関数を作成してみた

~~~javascript
const take = (array = [], take = 1) => {
if (take === 0) {
return []
}

if (array.length < take) { return [...array] } const newArray = [] for (let i = 0; i < take; i++) { newArray.push(array[i]) } return newArray } console.log(take([1, 2, 3], 0)) => []

console.log(take([1, 2, 3], 2))
=> [1, 2]

console.log(take([1, 2, 3], 5))
=> [1, 2, 3]
~~~

three.jsで正四面体を展開する

## TL;DR

three.jsを使った立体図形の表示に関しては説明しているサイトが多くありましたが、その図形の展開方法についてはありませんでしたので一例としてまとめました。

HTML、JavaScript、three.jsについてある程度の知識を持っている方を対象としています。

three.jsを使って正四面体を展開するときのポイントは次の通りです。

– CylinderGeometry（三角柱）を4枚合わせる
– 各面の中心点（メッシュのposition）の「位置」を計算する
– 底面に対する各面の回転角を計算する
– 回転にQuaternionを用いる（回転軸を定義する）
– 計算には「ピタゴラスの定理」と「三角関数」を用いる
– 角度はラジアンで計算する

作成したサンプルは次のデモサイトをご確認ください。

デモサイト
※別ウインドウで開きます

## 開発環境

– OS : Microsoft Windows

React アプリ に Auth0 でシュッと認証を組み込んで Vercel に爆速デプロイする

Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。

「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。

本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。

以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装さ

うんこクロックCSSの開発に成功した

[うんこ回転CSSの開発に成功した](https://qiita.com/nurarihyong/items/4b23accdfbb65a5bcda8)という記事の続きです。

#動機
前回CSSでうんこを自由に回転させる能力を得たので、それを活かして何か作りたくなりました。
で、うんこCSSでアナログクロックっぽいものを作ってみることにした。

#実装内容
ソースコードは、長いのでgithubに上げようと思います。
→あげました[github](https://github.com/mixgrill/unkoclock)
画像で見た方がハナシが速いので貼っておきます。
[ここ](https://emptyset.sakura.ne.jp/uc/)にHTMLはアップロードしています。

#苦労した点
針が中心からちょっとずれるのを修正するのが大変

AltJS を自作したい – 字句解析

# 使用言語

– JavaScript (TypeScript)
– PowerShell

# この記事について

– 自分用の AltJS 作りたい
– 字句解析の方向性が定まったので纏めた
– 予備知識が乏しいまま作り始めたので指摘歓迎

# 実装

少ない記述で作れそうなので正規表現を使用しました。
コードは整数と四則演算の部分の抜粋です。

“`TypeScript:token_class.ts
// 字句の生成用クラス
class INTEGER {constructor (public value: string) {}}
class ADDITION {}
class SUBTRACTION {}
class MULTIPLICATION {}
class DIVISION {}
“`

“`JavaScript:lexer.js

// 各字句を表す正規表現
const integer = /0|[1-9][0-9]*/
const addition = /\+/
const subtraction

やらかしJS先生がforEachを大嫌いになった話❌

#Overview

過去にバグになってしまったものを忘れないよう書き留めておくシリーズです。
今回の題材は`Array.prototype.forEach()`です。以下は私が当時のコードを思い出しながらさらり書いたコードです。(動作未確認)
複数のサイトのHTMLを取得して、ファイル出力しています。

“`javascript

import fs from “fs”;
const fsPromises = fs.promises;

const writeFile = async (filename, json) => {
const callback = err => { if (err) console.error(err); };
await fsPromises.writeFile(filename, JSON.stringify(json), callback);
}

async function crawl() {
const result = {};
[“https://www.google.co.jp/”, “https://www.yahoo.co.

JS初心者がKintoneカスタマイズ行うために その3

###こんばんは！「りょうちん」です~
####Kintoneだいぶ分かるようなってきました！

・イベント・ハンドラー：イベントはjsが発火するタイミング。ハンドラーはそのイベントで行う処理。
・return event：ハンドラーがrecordオブジェクトの値を変更。eventをreturnすることで反映。
・Kintone JavaScript API：Kintoneをjsでカスタマイズする際に便利な関数群。
・Kintone REST API：Kintoneアプリのレコード操作(CRUD処理)が行える関数群。
・Kintone JavaScript APIのKintone.api.url()でREST APIが多少容易に扱える。
・Promise：処理の順序が把握しやすくなるためレコードの操作が扱いやすい(同期的処理)、
　コールバック関数の使用と比較して簡素に記述できる。

後は[「素人が始めたkintoneカスタマイズ （ドシキンカス）〜初心者がはじめの一歩を踏み出すための虎の巻〜」](https://pj.asunote.jp/first_step_of_kintone_

クリックイベントを取り消す処理について

クリックしたらドロップダウンでメニューが出てくるのをjQueryで実装していたのですが、それを消すためのイベントについての話です。

https://gyazo.com/32762b0a4613e5b455de93f3db394050

右の▼または画像をクリックするとドロップダウンメニューが出てきて、その後どこかをクリックすると消える、という物です。

# blurではできなかった。
ドロップダウンメニューが消えずにずっと残っていた。邪魔。

“`erb:navbar.html.erb

<%= link_to '#',class: "ml-2 tip-accoount",id:'nav-bar__account' do %>
<%= image_tag 'sample-account.png',class: "navbar__profile-icon" %>

やらかしJS先生がみたMapをObject的に扱ってハマった話⭕❌

#Overview

過去にバグになってしまったものを忘れないよう書き留めておくシリーズです。
今回の題材はMapです。以下は私が最初にさらりと書いたコードです。
これを基に❌な部分を修正していきます。

“`javascript

const map = new Map();

if (!map[“1”]) {
map[“1”] = “⭕”;
}

for(const {key, value} of map) {
console.log(`key:${key}, value:${value}`);
}

“`

#Target reader

– この結果がわからない方

#Prerequisite

– JavaScriptを一通り理解している
– 今回はChromeで実行したが、Node.js等、環境によって出力結果が異なることがあることに注意。

#Body

## 少しだけ言い訳をしたい:sweat_smile:

いつもはJSONでファイル出力することが多いため、どうしてもそのまま出力できるObjectを利用することが多い。
そんな折、ファイル出力ないものがあっ

Typescript書き方の速成まとめ

個人学習目的で作成していますが、間違ったところや捕捉などありましたがご指摘ください。

## 1. 概論・セットアップ

– transpile言語 (類似コンパイル言語)
– Javascriptと交換
– Typescriptの主な役目
– コンパイル時にタイプチェックを行うこと

### Typescript setup & compile

“`bash
# 初期化
npm init -y
npm -i typescript [-g]
%init tsconfig.json
./node_modules/.bin/tsc –init

# compile
tsc {filename}

# watch & auto compile, 実用的ではない(glup推奨)
tsc -w
“`

### typescript online play

https://www.typescriptlang.org/play

## 2. tsconfig

http://json.schemastore.org/tsconfig

● Top Level Propert

textareaの文字を色分けする（しているように見せる）方法を考えてみた

codepenやGASのエディタでは、入力された文字は次々と色分けされていきます。本記事ではそんな機能を、つまり入力された文字をそれぞれ色分けする機能を、JavaScriptのライブラリを駆使して「簡単に」再現してみようと思います。…再現と書きましたが、原理は根本的に異なるものであるということはあしからず。
> 
> サンプルのスクリーンショット
> CSSを入力したら、こんな具合に色分けする。

###必要なもの
– [highlight.js](https://highlightjs.org/) (JavaScriptライブラリ)
– JavaScript/CSSについての最低限の知識

#0. はじめに知っておくべきこと
ご存知の方もいらっしゃるかもしれませんが、textarea内の文字をそれぞれ別の色に変えることは**できません**（tex

【スクレイピングまとめ】| Python Node.js PHP Ruby Go VBA | 6種類の言語でヤフートップをスクレイピング

## Python

### 動画
[](http://www.youtube.com/watch?v=f7g302P0Ins)

### リポジトリ
https://github.com/yuzuru-program/scraping-python-yahoo

### ソース
“`index.py
import urllib.request as request
from bs4 import BeautifulSoup

req = request.Request(
“https://www.yahoo.co.jp”,
None,
{}
)

instance = request.urlopen(req)
soup = BeautifulSoup(instance, “html.parser”)

li = soup.select(‘main article section ul’)[0].select(‘li’)

fo

４連休だったからmarkdownに時間を追加してプレビューするvscode extension作った

## 感謝
https://github.com/showdownjs/showdown
上記repositoryをcloneして中身を編集して使いました
テストは高速、buildもタスクで一発だった。
素晴らしいリポジトリだった

https://github.com/kajirikajiri/showdown
オプションとか、正規表現とか追加したバージョン

## 概要

## extension
https://marketplace.visualstudio.com/items?itemName=kajiri.kajiri

## 使い方
h1~5タグに{{number}}を追加します
numberは時間です

あとはextensionを実行するとプレビューが見れます(kajiri start)

##

【JavaScript】厳密等価演算子と等価演算子

# 厳密等価演算子（===）

比較対象が**同じ型で同じ値である時**に`true`を返す。

“`js
console.log(1 === 1); // true
console.log(“test” === “test”); // true
“`

#　等価演算子（==）

**暗黙的な型変換をした後**に比較される

“`js
console.log(1 == “1”); // true
“`

# 等価演算子（==）の使いどき

“`js
console.log(null == undefined); // => true
“`

上記のように、nullとundefinedを比較した時はtrueを返すので、その比較が必要な場合は便利かもしれない。

【JavaScript】非同期処理を操作する【ES6】

#　失敗例

“`js
const TakeRest = (ms) => {
setTimeout(() => {
console.log(“休憩終わり”);
}, ms);
};

const active = () => {
console.log(“休憩開始”);
TakeRest(2000);
console.log(“勉強する”);
};

active();
“`

変数名がお粗末なのはスルーしてください。?‍♂️

上記のコードを実行すると「休憩開始」→「勉強する」→「休憩終わり」の順番で`console`に吐き出されます。これは非同期処理によるものです。これを理想どうり（「休憩開始」→「休憩終わり」→「勉強する」）にしたい。

#　非同期処理のプロセスを待機させる「Promise構文」

“`js
const TakeRest = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const active = () => {
console.log(“休憩開始”

作って理解JavaScript：JOKE開発記その7 – オブジェクトとクラス

# 今回のスコープ

前回から一か月近く経ってる。
今回の実装内容自体が手間のかかるものであったという理由もありますが主な理由はゲームなど他のことをしていたためです（ぉぃ

さて、[前回のあとがき](https://qiita.com/junjis0203/items/d9e0e8c82cd811df4caa#%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D)でも書いたように制御構造も一通りできて次は配列かと思ったのですが、配列はオブジェクトとクラスの仕組みを作ってからの方が作りやすいだろうと思ったため、今回の内容はオブジェクトとクラスです。具体的には以下の内容です。

– ステップ9：オブジェクト
– まずは連想配列的な意味でのオブジェクト
– Shorthand property namesやスプレッドもサポート
– 次にメソッド。というかthisの扱い
– ステップ10：クラス
– 昔ながらのprototype。合わせてnew
– 今どきのclass
– JOKE実装で使っちゃったから継承もサポート
– Array

Mildomのチャット取得

コメントビューア用。
OAuthが要るようなAPIは使わず、未登録で取得できるコメントを取得。
あくまで執筆時点の情報です。仕様が変わる可能性もあるのであしからず。

## ユーザのチャンネルURL

– `https://www.mildom.com/{ユーザID}`
– 例: `https://www.mildom.com/10946091`

## 手順

1. 以下にWebSocket接続
– `wss://jp-room1.mildom.com/?roomId={ユーザID}`

2. メッセージ送受信

“`typescript:send
{
/** ユーザID。 */
“userId”: 0,
/** ユーザレベル。 */
“level”: 1,
/** ユニークなID。guest766863みたいな。 */
“userName”: string,
/** ユニークなID */
“guestId”: string,
/** リファラ */
“nonopara”: string,

2020年の11の必見のフロントエンドトレンド

> こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。

# 2020年の11の必見のフロントエンドトレンド
ランチ中のフロントエンドトークでスマートに見られる方法！


チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。

だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソース