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

HTML.CSS.JavaScript.Ruby.Rails概要

#HTML
　HTML(Hyper Text Markup Language)とはWEBページを作成する際に使用されるマークアップ言語である。
　WEBページのほとんどにHTMLが使用されている。
　HTMLは**タグ**を使いコンピューターに命令を出す事により見出しを付けたり段落を付けたりと、WEBページのレイアウト、構成を形作ることができる。
#CSS
CSS(Cascading Style Sheets)は先ほどのHTMLと組み合わせて使用する言語である。
CSSは文字の色やサイズ、レイアウトを変えたり、WEBページを装飾する言語である。
HTMLでもWEBページの装飾をすることは出来るが、CSSの役割なので分けて使う必要がある。
#JavaScript
WEBサイトに動きをつけるためのプログラミング言語である。
具体的には文章や画像を拡大表示したり、フォームに文字を入力できるようにしたり、より動的なWEBサイトを作ることができる。
サーバーを介さずにブラウザ上で動かすことができる。またこのようなプログラムをクライアントサイド・スクリプトという
#Ruby
Rubyと

【Jest超基礎】導入篇

## はじめに
この記事は実務1ヶ月弱の新人エンジニアがアウトプットを目的として書いている記事になります。
携わらせていただいている案件で
「Jestを使うぞ！」と言われたので、
「Jestってなんぞや？」となり、学習を始めました！！
間違っている箇所等ございましたらご指摘ください。

## Jestってなに？
Jest はシンプルさを重視した、快適な JavaScript テスティングフレームワークです。
([Jestドキュメント](https://jestjs.io/ja/)引用)
つまり、テストコードを簡単にJavaScriptで書けるってことですね！

Babel, TypeScript, Node, React, Angular, Vue等、様々なフレームワークにも使用できます。

↓テストコードについてはこちら
[【初心者向け】テストコードの方針を考える（何をテストすべきか？どんなテストを書くべきか？）](https://qiita.com/jnchito/items/2a5d3e15761fd413657a)

## 導入
早速始めていきましょう！
まずはテストを取り入れ

Vue.js 表示文字列にURLが含まれていたときにリンク化する

# 目的

– Vue.jsにおいて表示する文字列の中にURLが含まれていた場合リンク化して表示する方法を簡単にまとめる

# 詳細

1. 下記のPタグの中に変数textの内容を格納する。

“`vue.js

“`
1. 変数testにURLが含まれている場合、リンクとして表示したい。下記のようなメソッドを定義する。

“`vue.js
/**
* @param {String} text
*/
autoLink(text) {
return _.isString(text) ? text.replace(/(https?:\/\/[^\s]*)/g, “$1: ”;
},
“`
1. 下記のようにPタグ部分で定義したメソッドを呼ぶ。

“`vue.js

“`

# メソッド部分の簡単な解説

– 下記にメソ

オブジェクトに何かを代入している処理を探す正規表現

訳あって、ツクールMVのプラグインの中から循環参照を探すことになった。
この場合、オブジェクトに代入処理をしているすべての処理を探り、その中から犯人を捜すことになる。
代入処理をすべて検索するには以下の記述を使う。

“`:
this\.(.*)( *)=( *)([^true|false|\d| new (.*)].+)
“`
これは最適化もしてないし、否定条件は使いながら書き換えている。
もちろん他の代入パターンも考えられるが、基本的にはこれで問題ないはずである。

テストに使用したデータは以下の通り。

“`:
this.aaa =baa
this.bbb = baa
this.ccc=ccc

this.boo()
this.xxx = true
this.yyy = false
this.zzz =19
this.nnn = new hoge()
this.nnn = new hage(xxxx)
“`

子供用の学習アプリケーションを作る(2) アニメーション編

# はじめに
以前作成したアプリの続きをしていきます。
[参考: 子供用の学習アプリケーションを作る(1)](https://qiita.com/yoshii0110/items/ba2bf4023c4a6caf3431)

今回は、コンテンツの選択画面にアニメーションを導入し、選択後の詳細画面を作成したので、その実装について記事にしていこうと思います。

# 動作
まずは、動作を見ていただければと思います。


# 実装
## 構成
構成は以下のようになっています。

“`
❯ pwd
/Users/yoshitaka.koitabashi/Desktop/iLearn/src/components

~/Desktop/iLearn/src/components
❯ tree .
.
├── a

シューティングゲームの当たり判定をQRコード読み取りでやってみた

QRコードの読み取りでFPSの当たり判定#protoout pic.twitter.com/3OoPiwgkBg

— sawa (@sawakoshi_yy) November 16, 2020

#使ってみたい人はこちらのリンクからどう

ていつに法方るべ並に逆を字文でtpircSavaj

## はじめに
### かと.emag llabesab a gnihctaw retfa tnaruatser a ot gniog eb lliw I dna nos ym ,krow retfa ,yadoT:ばえ例。ねよすでいなめ読はに単簡とるすに字文さ逆をかとトッベァフルアはとあ。すまりかかが間時にのむ読は文い長がすまけ解み読に単簡は字文さ逆い短。たしましに逆を字文うよいくにみ読とざわ。ねよすでいくにみ読に常非ていてっなにさ逆が字文は事記のこ、しかしやい。すまいざごうとがりあていだたいでん読を事記のこ !dlrow olleh

え..なに..これ..???

あっ！？　逆さから文字を読めばいいのか！！！！！
![hirameki_man.png](https://qiita-image-store.s3.ap

JavaScript 非破壊的に要素を追加した配列を生成する

#結論
`push()`を使わず、スプレッド構文を使って新たな配列を生成する。
#サンプル
“`JavaScript:sample.js
let students = [[‘sato’], [‘suzuki’], [‘takahashi’], [‘tanaka’], [‘ito’]];
//配列の各要素にインデックスの値を追加したい。e.g. [‘sato’] -> [‘sato’, 0]
“`

##`push()`

“`JavaScript:push.js
let addIndex = students.map(function(el, idx) {
el.push(idx);
return el;
});
console.log(addIndex); // [[‘sato’, 0], [‘suzuki’, 1], [‘takahashi’, 2], [‘tanaka’, 3], [‘ito’, 4]]

// 元の配列も変更されてしまう。
console.log(students); // [[‘sato’, 0], [‘suzuki’, 1], [‘takahas

WebView2 C#とJavaScriptの連携

昨日の今日ではあるんですが、WebView2を使ってJavaScriptとC#を連携させる方法がわかったので、記事に残します。
（筆者の個人的な事情なんですが、Qiitaの記事作成が今日で三日連続です(笑)
今日は仕事終わりなので、サクッと記事を書いて終わりたい…(笑))
##コーディング
とりあえず、サンプルのコードを下記に貼り付けます。
Form1.cs と JavaScriptを仕込んだ sample.htmlだけなので、察しの良い人ならサンプルのコードを見ただけで十分かもしれません。
（.htmlに関しては適当に書いたので、あまり深く突っ込まないでください(笑))

“`C#:Form1.cs
using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;
using System;
using System.Runtime.InteropServices;
using System.Windows.Forms;

namespace SampleWebView2Form
{
publ

Vue.jsでObnizを操作する基本－単純Lチカ（メモ）

Vue.jsからのObniz操作でエラーになったのでメモ。Webアプリでボタン押下でLEDを点灯。

#Consoleエラー

#原因
* **”obniz.onconnect”内で処理が必要？　※Vue.jsでは良くないらしい**
[デバイスへの接続 – obniz公式](https://obniz.com/ja/doc/reference/common/connection/)

“`javascript:
var obniz = new Obniz(‘1234-5678’);
obniz.onconnect = async function() {
// **** 実行する処理 ****
}
“`

* **Vue.js での書き方が悪かった　※Vue.jsでは以下のほうが良さそう**
[Vue.jsでobniz

Google Apps Scriptで画像データからビットマップを作成する

Google Apps Script(GAS)でPNGファイル自動生成したいと思ったところ、当然ながら<canvas>が無いので、Javascriptのようには行かないことがわかりました。
しかし、ビットマップのBlobを作ればBlob.getAs(mineTipe)メソッドでPNGに変換することは出来ます。

というわけで、画像データからビットマップのBlobを生成する関数を作りました。

#ソースコード
24bitフルカラー固定です。

“`Javascript:
/*
dataは左上から右下に向かってのピクセルの色情報を持つUint8Array。色はRGBAの4バイト。
width, heightは横縦のピクセル数。
*/
function toBMP( data, width, height ) {

const RGBA_BYTES = 4;
const BMP_BYTES_PER_DOT = 4;
const BYTES_PER_DOT = 4;

if ( data == null || width == null || he

【JavaScript】基本的なモジュール（ESM）の使い方についてまとめ

# モジュール（ESM）とは
・ソースコードを整理、分割する仕組み
・ブラウザ上で動作
・ES６から導入
・import / exportを使用
・IEでは未対応

**これを使用することにより、別ファイルで定義した変数や関数を扱うことができる**

# import
モジュールを読み込む

# export
モジュールを出力

# 主な用途

例として**moduleA.js**と**moduleB.js**のファイルを作成。
**moduleA.js**で`export`したモジュールを**moduleB.js**に`import`します。

“`
フォルダ構成
|–index.html
|–moduleA.js
|–moduleB.js
“`
***
htmlファイルの準備

“`html:index.html










`

【入門者向け】Canvas入門講座#8 円を塗りつぶそう【JavaScript】

#問題8
中心が(200, 200)、半径100の円を塗りつぶしなさい。
塗りつぶす色はマゼンタ色(#ff00ff)であること。
なお、以下のHTMLを使うこと。

“`html












“`

#答え

“`html












```

#答え

```html