‘rgb[a](R, G, B[, A])’ を正規表現で処理して、各値をメンバーとしてもつオブジェクトを返す関数。

たとえば、`’rgba(220, 20, 60, 0.5)’` を放り込めば

“`javascript
{
red : 220,
green: 20,
blue : 60,
alpha: 0.5,
}
“`

が返ってくる関数です．

## 完成コード

TypeScript

“`typescript:rgba.ts
interface RgbaValues {
red:number,
green:number,
blue:number,
alpha:number
}

const rgbaStrToValues = ( rgba:string ):RgbaValues|void => {
const realNumPattern = ‘([+-]?\\d*\\.?\\d+)’;
const rgbaPattern = `rgba?\\(` +
` *${ realNumPattern } *, *${ realNumPattern } *,` +
` *${ realNumP

JavaScriptの関数について

私たちが普段目にしているWebサイトではたくさんのJavaScriptのコードが記述されている。その中のコードの管理方法としては関数を用いるのが有効的である。今回は、そんな関数についてまとめてみた。
##今回まとめること
1. JavaScriptでの関数定義
2. 無名関数と即時関数
3. アロー関数

##1.JavaScriptでの関数定義
######基本形
“`qiita.js
function 関数名( 引数 ){
//関数内の処理
}
“`
######戻り値
戻り値とは、最終的に出力される値のことを指す。
JavaScriptでは戻り値をreturnを用いて明示する。

“`qiita.js
function calc(num1,num2){
return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
“`
※num1 * num2 の値が出力される。

######関数宣言
“`qiita.js
function 関数名( 引数 ){
//関数内の処理
}

Vue.jsのcomputedとmethodsの挙動の違い

Vue.jsをいじっていて、何気なく使っているcomputedプロパティですが、methodsでも同じようなことできるよなあと常々感じていました。今回はそのモヤモヤを解消するために、いろいろ調べてみたところ、挙動に決定的な違いがあることが分かったので、今回はこの二つの挙動について、備忘録としてまとめていきたいと思います。

computedとmethodsを用いて似たような挙動をするものを作成

下記のように、v-onディレクティブを用いて、ボタンを押すたびにカウントアップできるアプリを作成しました。それに、computedプロパティとmethodsを用いて、5以下の場合は「5以下」と、5よりも大きくなれば「5より上」と表示されるようにしてみました。

【React.js】class構文 と fanction構文

# 前書き
Reactを学習していた中で “class構文・fanction構文” を学習しましたので、こちらでアウトプットとして記録いたします。
学習されている方にお役に立てると非常に嬉しいです。

また、コードは Github で公開しているので気になるかたはダウンロードしてみてください。

## class構文 と function構文とは
Reactをコーディングする方法として “class構文” と “fanction構文” があります。
これらの表記は↓になります。

“`javascript:Class構文
import React from ‘react’;

class 関数名 extends React.Component {

これだけはおさえておきたいCypressコマンド集

# はじめに
[【初心者向けワークショップ】Cloud9＋Docker Compose＋CypressでE2Eテストを書いてみよう！](https://qiita.com/oh_rusty_nail/items/a18a72a0ec7d09be9a10)の記事でCypressを使ったE2Eのテストを書くワークショップの記事を書きました。
この記事では、こういう検証をしたい場合Cypressではどう書くのかを記していきます。
コマンド集は[公式ドキュメント](https://docs.cypress.io/api/commands/clear.html#Command-Log)にもあります。
本記事ではその中からよく使いそうな**これだけはおさえておきたい**ものをピックアップして、要素の操作と検証など実践に使いやすい形のサンプルを用意してみました。
また、CypressのテストコードだけでなくHTMLも合わせて載せておりますので参考にしていただけたらと思います。

# ページ遷移
以下、前提として baseUrlが`cypress.json`に定義されているものとします。

“`ja

1年後の自分よ、WebVRやりたいときはこれを見ろ

#1年後の自分へ
きっと君は、「うわあ一年前WebVR勉強したのに結局全然勉強してねえや最近」と嘆いていることだろう。
そんな君に、今僕がさくっと調べたWebVR関連のサイトをサクッと教えてやるぜ。

#これを見ろ
　以前作った「かくれんぼ」の3D版を作るために色々調べた結果をここに示すぜ
　「かくれんぼ」が何か思い出せないならこれを見ろ
　https://qiita.com/canonno/items/00738c7d928c3ec655d5

・WebVRを実装するライブラリ「A-frame」ドキュメント
　https://aframe.io/docs/1.0.0/introduction/

・缶から星を出しまくるもの。サクッとハンズオンできそう
　https://qiita.com/name_yy/items/9144f612a8e15d14f9ff

・A-frameの英語ドキュメントに沿って実装してくれている日本語Qiita。ハンズオン用。
　https://qiita.com/thomi40/items/dfc4175efece38ab5747

・p5jsとWebVR

ES6〜ES10のIE11使用状況

業務上IE11の使用が避けられないためES6〜ES10の使用状況を備忘録的に残していきます。

# ES2015(ES6)

|ES2015(ES6)追加仕様|実行可否|コンソールエラーメッセージ|
|—|—|—|
|クラス (class)|NG|構文エラーです。|
|テンプレート文字列 (`Hello ${name}`)|NG|文字が正しくありません。|
|モジュール (import, export)|-|（未確認）|
|アロー関数 (=>)|NG|構文エラーです。|
|デフォルト引数 (function(x=0, y=0))|NG|’)’ がありません。|
|可変長引数 (function(x, y, …arg))|NG|識別子がありません。|
|定数 (const)|OK|-|
|局所変数 (let)|OK|-|
|for of ループ (for item of items)|NG|’;’ がありません。|
|Map オブジェクト|OK|-|
|Set オブジェクト|ラーは出ないがnew Setの中身を評価できなく実行できない|-|
|配列関数 (from())|

Node.jsでナイーブベイズ分類器を使った分類を行う

#ナイーブベイズ分類器のBayesモジュールを使う
ナイーブベイズ分類器は、次のようなことができます。

* スパムメールの判定
* ニュース記事やブログ記事のカテゴリー判定

ごく簡単にいうと、学習に必要なのはカテゴリーに関連する単語をたくさん登録するだけです。カテゴリーのわかっている文章を単語に分解して登録します。判定するときには、カテゴリーに関わる単語の出現率で判定されます。

もちろん、もっと正しい理解をしたほうがいいですが、[bayesモジュール](https://www.npmjs.com/package/bayes)を使うならこの程度のイメージを持っておくだけで使えて、なかなか有益な結果を得られます。詳しく知りたい方は末尾のリンク先を参照してください。[^1]

##使い方（イメージ）

“`javascript
// 学習
classifier.learn(‘カテゴリーAに関する長文・・・・・’, ‘カテゴリーA’)
classifier.learn(‘カテゴリーBに関する長文・・・・・’, ‘カテゴリーB’)
classifier.learn(‘カテゴリーCに関す

npm install –save について

## はじめに

本投稿は `npm install` コマンドの `–save` オプションについてですが、すでに

npmでパッケージをインストールする際、ネットを検索すると `–save` というオプションをよく見かける。
ex)axios をインストールする場合

“`shell
$ npm install axios –save
“`

`-g` でグローバルにインストールする際には見ないのだが、何者なのか調べてみた。

## npm install –save オプションについて

`package.json` の `dependencies` に登録してくれるようだ。

### 何がうれしいのか

git にコミットする際、パッケージをインストールしているフォルダ `node_modules` は `.gitignore` によって除外されます。
違う開発環境を git からクローンして構築する場合、`package.json` を元に復元します。
よって、同じパッケージ環境を簡単に構築することができます。

## 結論: `–save` オプションは必要か

React Hooksで作るFlux入門

# この記事について
モダンフロントエンドにおいて、Fluxというアプリケーションアーキテクチャが存在します。
従来、Fluxの思想に従って実装を行うためには、同名ライブラリ”Flux”やReduxが採用されるケースが多かったのですが、React16.8でのReact Hooksの登場により、ライブラリに頼ることなくFluxを実現できるようになりました。
本記事では、Fluxの概念・なぜそれが必要なのかについて説明した後、React Hooksを用いたFlux実装の一例を紹介します。

## 使用する環境・バージョン
– OS: macOS Mojave 10.14.5
– Node.js: v12.13.0
– npm: 6.13.4
– React: 16.13.0

## 読者に要求する前提知識
JS, React, React Hooksが書けるだけの知識があること

# Fluxとは？
Fluxとは、UIをもつwebアプリケーションを構築するときのデザインパターン/アーキテクチャです。

アプリケーションのデザインパターンといえば、他にはMVC(Model View Cont

【JS】重複しないランダムな三桁の数字を作る

#コード

“`sample.js
// ランダムな三桁の数字
function three_random_number() {
const three_digit_number = [];

for (let i = 0; three_digit_number.length < 3; i++) { const number = Math.floor(Math.random() * 10) if(!three_digit_number.includes(number)){ three_digit_number.push(number); } } console.log(three_digit_number); } three_random_number() ``` #コードの説明 ```const three_digit_number = [];```：カラの配列の作成 ```for (let i = 0; three_digit_number.length < 3; i++) {}```：長さが3の配列が出来るまでルー

【ReactNative】SafeAreaの余白を設定する方法(Android, iOS両方)

## SafeAreaとは？

スクリーンで言うとこの部分です。



上の画像は既にSafeAreaの余白を設定したあとのスクリーンショットなのですが、`View`だけで構成すると、ステータスバーにコンテンツが重なってしまいます。

## 対策

1. SafeAreaViewを使う (iOS)
2. StatusBar.currentHeightをpaddingTopに設定する (Android)

###

ウソ穴 Ver 6 の作り方

## はじめに

個人開発`ウソ穴`の作り方を紹介します。

## ウソ穴とは

`ウソ穴`は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。

## ウソ穴 Ver 6

今回は、Android端末でも動作実績のある Ver 6 を紹介します。

## デモ映像

ウソ穴 Ver 6 Type B で顔に穴を開けてみました。

見た目の涼を演出しようと、顔に穴をあけたのですが、『涼しい』って感じにならなかった。シースルーより貫通の方が涼しく見えると思ったのですが、、#ウソ穴 TypeScript 基礎

# TypeScriptとは
TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語です。

大きな特徴として

– JavaScriptに対して、型定義などの機能を追加したもの。
– JavaScriptの最新仕様である、`ES2018`の構文仕様が使え、JavaScript言語の完全なスーパーセットになっている。(JavaScriptの構文等がそのまま使うことができる。)
– TypeScriptを書く際は、TypeScriptファイル(.ts) を 作成する必要があり、そのファイルをJavaScript ファイル(.js)にコンパイルししている。

## なぜ型を追加する必要があるのか？
型があることにより、コードを書いている時点でエラーに気づくことができます。コンパイルをするときに、型の制約のチェックを行うことにより、すぐにエラーを修正可能。型を追加することによって効率的に開発を進めることが可能となっているのがメリットとして挙げられます。

numberで定義しているものにstring型のものを入れてしまった

元記事を表示

APIリクエストを並列に捌く【Promise.all】

複数のAPIリクエストを発行して、全部の返答が来るのを待って次の処理にうつる。
そのやり方です。

※こちらの内容は、[reduceでasyncする方法はこれ！](https://qiita.com/_pipo_/items/1a6dae21188a7f81c822)で
@htsignさんにご指摘いただいたコメントをほとんどそのまま記事にさせていただいております。

# Promise.allを使え！
“`typescript
const itemCodeList = [
‘000000001’,
‘000000002’,
‘000000003’,
];

// キモはここ。
const itemList: Item[] = await Promise.all(itemCodeList.map(getItemFromCodeAPI));

// next func.. （有効なものだけに絞るとか）
const validItemList = itemList.filter(item => item.status !== 404);
“`

## 解説
`Promise.

javascriptで配列構造のデータからネスト構造のデータを作成

# やりたいこと

配列構造

“““
var datas = [
{
id: 0,
parent: null
},
{
id: 1,
parent:0
},
{
id: 2,
parent:0
},
{
id: 3,
parent:1
},
{
id: 4,
parent: 1
},
{
id: 5,
parent: 2
}
]
“““

これをネスト構造に変換する

“““
var tree = {
id: 0,
children: [
{
id: 1,
children: [
{
id: 3,
children:[]
},
{
id: 4,
children: []
}

弊学最大の課題を解決するユーザースクリプト【LiveCampusのブラウザバック】

# まえがき

## 記事について

記事中にLiveCampusと書きましたが、この記事は全く架空のシステムに関するものであり株式会社NTTデータ九州による大学に特化した[学務支援ソリューションLiveCampusシリーズ](https://www.nttdata-kyushu.co.jp/products/corporate/detail.php?type=1&class=21)とは一切無関係**(察してください)**です。

## ユーザースクリプトの導入について

ユーザースクリプトと言えば聞こえはいいですが要は人様のサイトを改変するわけであり、事務の根幹に関わるシステムでそういったことを認めている大学は無いでしょう。導入は自己責任でお願いします。

# 概要

総合ポータルシステム LiveCampusという架空のシステムでブラウザの「戻る」ボタンが使えるようにするユーザースクリプトを作りました。
[GreasyForkで公開中](https://greasyfork.org/ja/scripts/411257-fix-livecampus-browser-back)です。

A-Frameで3Dモデルを使用するときのメモ

ローカルで動かすのに苦戦したのでメモ

A-Frameで3Dモデル
gltfモデルのサンプルを落としてきた。

“`
scene.gltf
scene.bin
index.html
“`
“`index.html

存在感の薄い「凝集度」に光を当てる – LCOMでクラスを凝集度を測定しよう

## 存在感の薄い「凝集度」

品質の高いソフトウェアにするために「結合度が低く、凝集度が高い」設計がよいとされています。ソフトウェアのコンポーネント（関数、クラス、モジュール etc）をどう分割するか、またどうやって互いに関連付けるかに関する設計方針ですね。この「結合度」、「凝集度」の意味は一言で言うと以下のようになります。

– 結合度 – コンポーネント間の依存の多さ、また依存の度合い（低いほど良い）
– 凝集度 – 関連する操作が一つのコンポーネント内にまとまっている度合い（高いほど良い）

結合度と凝集度は表裏一体の概念です。コンポーネントを上手に分割できれいれば、だいたい結合度は低くなるし凝集度は高くなります。関連する操作が一つのコンポーネント内にぎゅっと押し込められていれば、関連の薄い操作は別コンポーネントにあって互いに依存しないようになっているし、逆にコンポーネント間の依存が少なければ、各コンポーネントの責務が明確で互いに関連する操作がコンポーネントで完結している、みたいな感じですね。

「結合度」はよく話題になりますし、コンポーネント間を疎結合に保つためのテクニックも

Nuxt.jsでURL直叩きの時はページが表示されるのに、nuxt-linkやブラウザバックでAn error occurredになる

# 事象


ググった時にもっと引っかかっても良いのになーと思いつつ、全然記事がヒットしなかったのでメモ。

Nuxt.jsでaxiosを使いAPIからデータを取得。
そのデータを元にページを表示している場合、URLを直接叩くと正常に表示されるが、nuxt-linkで遷移したりブラウザバックで移動すると`An error occurred`というエラーが出る。

参考：Chrome開発者ツール開いた時のエラー

# 結論

nuxt.config.jsで、axiosのproxyを設定しましょう。

#