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

pixi.jsからAdobe Animateで作ったコンテンツを使いたい

# はじめに

皆さんはゲームを作る際、デザイナーが作ったUI・アニメーションをどのような形で実装しているでしょうか？

Unityのようにそのあたりの実装機能を持つIDEが内蔵されていればいいんですが、
スクリプトのみでやらなければいけない場合、目コピしたりプロパティ変化を見てみたりと
わりと面倒だったりするんですよね。

私はHTML5ゲームを作るのに、主に [pixi.js](https://www.pixijs.com/) を使用しているんですが、
シンプルなゲームであればまだしも、アプリ然としたゲームになってくるにしたがって
この**アニメーション実装時間かかるよ問題**が重くのしかかってくるように。[^1]

[^1]: pixi.jsは`spine`が使えるので、そっちに行くのもありなんですが、
AnimateないしFlashに慣れ親しんだデザイナーが多いという背景もあり…

そんなこんなで

pixi.jsからAdobe Animateでパブリッシュしたコンテンツを使用できるプラグイン
[Pixim-animate-container](https://github

Microsoft Teams 開発の初心者向けガイド ? その１: Tabs

みなさんこんにちは。まだまだコロナの余波はありますが皆さんがどうですか。私の住んでいるサンフランシスコでは、アメリカ歴史上一番酷い規模の山火事も重なったこともあり、まだしばらく前のような生活に戻れません。冬眠したいところなのですが、何かみなさんが新しいことを学ぶために時間を活用しようと思います ??

さて、このチュートリアルは、**Microsoft Teams** 開発のための初心者シリーズの私の第一弾。いままで仕事などで Microsoft Teams を使用て、Teams で動くアプリを書いてみたいなと思っている方や、Slack のような他のプラットフォームでアプリを公開たことがあり次は Teams のサポートも付け、より多くのユーザーを獲得したいプロダクト開発者にとって適しています。
また、このチュートリ

JavaScript データ型

# JSデータ型
**データ型とは、データの種類のことである**
## データ型一覧

– 数値型
– 文字列型
– 真偽型
– シンボル型
– 特殊型
– 配列
– オブジェクト
– 関数

## JSはデータ型に寛容である
･ 最初文字列を格納していた変数に数値を格納しても問題ない。
･ 一方JavaやC#などは一つの変数に別のデータ型を格納できない。

JavaScriptの開発において、開発者がデータ型を強く意識しないといけない場面は多くはないが、**厳密な演算や厳密な比較を行う局面**では、データ型を念頭に置く必要がある。

## JavaScriptのデータ型は基本型と参照型の2つに分類できる
**両者の違いは、値を変数に格納する方法である**

基本型

変数に値そのものが格納される

参照型

変数に参照値を格納する(値を実際に格納するメモリ上のアドレス)

## リテラルについて
**リテラルとは、データ型に格納できる値そのもの、または値の表現方法である。**

それ

【実務未経験】初学者が0から学ぶTypeScript②

参考：[TypeScriptの型入門](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a “Qiita”),　[TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)
前回：[【実務未経験】初学者が0から学ぶTypeScript①](https://qiita.com/Kashiwaya123/items/9821070b1eab0cde3cdd)
※もし私の記事に誤りがありましたら、ご教示いただけますと幸いです。
##オブジェクト型とinterface構文
**interface**という構文を使うことで、オブジェクトとプロパティが持つ**値**にも型をつけれる。

>interface　：接合部分、接触面、接点、仲立ち、連絡（係）、橋渡し（役）

今回は、色々な生き物の、種類`(name)`体長`(size)`オスかどうか`(male)`の値をプロパティとしてもつ`CreatureData`というオブジェクト型を作ってみました。

“`ts

no such file or directory, open に対処する

fsを使用して、上のディレクトリのファイルを取得しようとするとError: ENOENT: no such file or directory, open が出て、喚いていたが解決したので残しておく。

#ファイル内容
先に記しておくが、後の説明を読みながら解釈することを勧める。
### ディレクトリ構成

“`
test(親ディレクトリ)
├── src
│ └── fileManeger.js
├── config ←(ここに出力)
│
└── main.js

“`
### main.js
“`js
const fs = require(‘fs’); //nodeモジュール読みこみ
const fileManegerClass = require(‘./src/fileManeger.js’) //クラスファイル読みこみ
const fileManeger = new fileManegerClass(fs); //インスタンス化

const content = {“name” : “taro” , “age” : 30};

こんな私でも大好きなジェイソン・ステイサムになれる。そう、Face APIならね。

Qiitaで「__ジェイソン・ステイサム__」というタグを作り、ひそかに育んでいるたわちゃんです♪

先日、なんと同じステイサムファンの方が「ジェイソン・ステイサム」タグに記事を投稿してくださいました！
CHECK▶ [Pythonでジェイソン・ステイサムライクに渡された画像をアスキーアートに変換する](https://qiita.com/genshibangou16/items/c1df676b4f7746630ec4)

嬉しくて、その日は浴びるように金宮ホッピー割を飲んじゃいました。えへ。

その勢いで、ステイサムシリーズの新作を作ってみたので、ご紹介します！

#「Be ステイサム」

今回作ったのは、誰でもステイサムになれる「__Be ステイサム__」です。

ステイサムになることに成功しました。　#pr

備忘録 Javascript callback関数

# callback関数 省略しないパターン

“`
function arrayWalk(data, f) {
//② dataにはarray fにはshowElementが格納
for(var key in data) {
//③引数で受け取ったshoElement関数を呼ぶ
f(data[key], key);
}
}

function showElement(value, key) {
//④
console.log(key + ‘:’ + value);
}

var array = [1, 2, 3, 4, 5];
//①
arrayWalk(array, showElement);

“`

# callback　匿名関数
showElementを定義しない。

“`
function arrayWalk(data, f) {
for(var key in data) {
f(data[key], key);
}
}

var array = [1, 2, 3, 4, 5];
arrayWalk(array, f

@angular/cliのインストールからAngularプロジェクト作成まで

#はじめに
今回は@angular/cliのインストールをしてから実際にAngularプロジェクトを実行するまでを書いていきます！
Node.jsがインストールされている必要があるので、
まだインストールできていない人は[Node.jsのインストール方法（Windows）](https://qiita.com/masangular/items/2046f0b91c4c8cc9ada3)を見てね！

#目次
1. @angular/cliのインストール
2. ng new コマンドでAngularプロジェクトの作成
3. 実際にブラウザで確認してみよう！

#1. @angular/cliのインストール
* 「npm install -g @angular/cli」を実行するだけです

“`
$ npm install -g @angular/cli
“`
* インストールされているかを確認するには「ng –version」を実行し、下図のように表示されていれば成功！

“`
$ ng –version
“`
![angularcli_01.png](https://qiit

Electron で macOS のダークテーマ切替機能を実装する

Electron で、macOS アプリケーションを開発するにあたって、一考するべきものとして「ダークテーマ」の切り替え実装でしょう。Electron には、macOS のシステムとしてライト／ダークのどちらが設定されているか？を知る方法、またユーザーによってリアルタイムに macOS の「外観」が変更されたときのイベント発火も用意されています。

macOS のダークモードのサポート – Electron ドキュメント

ただ、「どのようなダーク（またはライト）モードにするか？」という部分は、開発者自身で考えてデザイン、変更するコードを書かねばなりません。

具体的な実行イメージとしては、ダークモードへ変更されたとき、HTML で構成された UI は、適用された CSS ファイルを切り替える感じなのだろうかと想像しますが、複数のデザインを切り替えるならともかく、「ライトモード」と「ダークモード」の二種類なら、実際２ファイルの CSS を用意するよりも、後

Canvasを使ってユーザーが画像をトリミングできるようにする

## 動機
ユーザーのアイコン画像を投稿してもらうときに、トリミングしてから投稿できるようにしたい。

## 結果のイメージ
写真は、何も関係はないですが、自分で漬けたザワークラウトです。

## ソース
### html
“`html

“`

### JavaScript
“`javascript
class PostedImage extends Image {
constructor(src) {
super

JavaScriptの基本

#概要
初心者向けにJavaScriptの基本についての記述です。参考になれば嬉しいです。

#JavaScriptとは
Javascript(ジャバスクリプト)とは、プログラミング言語のひとつ。RubyやPHPがサーバーサイドの言語であるのに対し、JavaScriptはクライアントサイドの言語。つまりユーザーから見て目に見える部分のフロントの実装となる。
Javascriptを使用することで実際にユーザーにとっての使いやすいアプリケーションを作ることが出来る。

#デベロッパーツール
デベロッパーツールとは開発者が使うツールで、一般的なブラウザ上にあり、誰でも使用することができる。
これを使うことで下記のことができる。
Elements(エレメンツ) ：Webページに対応するHTMLやCSSの確認
Console(コンソール) ：JavaScriptのコードの実行
使い方：使いたいブラウザ上で右クリック→検証をクリック

#console.log
ブラウザのコンソール上でJavaScriptのコードを表示するメソッド。
console.log()の()に文字列や値をいれることでその値

【JavaScript】appendChildとinsertBeforeの違い

この記事では、**生成したHTMLの要素をブラウザに表示させるためのメソッド**の
appendChildとinsertBeforeの違いについて解説します。

##この記事でわかること
– appendChildとinsertBeforeの違い
– appendChildの使い方
– insertBeforeの使い方

##appendChildとinsertBeforeの違い
①appendChildと②insertBeforeは、どちらも
生成したHTML要素をブラウザに表示させるためのメソッドです。
さらに、特定の親要素の中に子要素を追加してくれます。
違いはずばり、追加される**場所**です！

#####①appendChild

追加される場所は、親要素の**末尾**です。
つまり指定した要素の閉じタグの直前ですね。

#####②insertBefore
追加される場所は、第2引数で指定した要素の前です。
なので、必ず第2引数を指定してあげる必要がありますよ〜〜

#appendChildの使い方
書き方：**親要素.appendChild(子要素)**

既存の`<

HTMLでcanvasを使うと図形を描ける

#プログラミング勉強日記
2020年10月8日
HTMLで画像に置き換えることなく図形を描くことができることを知ったのでまとめる。

#canvasタグとは
　図形を描くためにはpngやjpegなどの画像に置き換えることやFlashなどのプラグインデータを埋め込むことが一般的であったが、HTML5から2Dのグラフィックスを描く、``要素が追加された。canvasを使用することで、標準のHTMLとJavaScriptだけでグラフやゲームグラフィックスなどの図形を表示できるようになった。

#書き方
　canvasタグは以下のように書く。

“`html:書き方


“`
　しかし、図形はこれだけでは表示されない。HTMLの部分とJavaScriptをid名で関連付けて、描く図形を指定する。JavaScriptの部分では描く図形を指定する前にまずキャンパスを使うための準備が必要になる。

“`js:描画コンテキストの取得
var canvas

どれだけ数字が好きか体で示してもらおうか

#数字が好きか
皆さんは数字は好きですか？
僕は幼い時、自由帳へひたすら数字やら記号やらを書きなぐる変態少年だったらしく、
「__ああ、この子絶対理系だわ・・・__」
と親が察するぐらいには数字・数学が好きですｳｯﾋｮｫｫｵｱ

ところが、先日東京ビックサイトで催されたMaker Fair Tokyoのとある作品にインスパイアを受け、
「__いや、好きとかは口で言うのは簡単なんだよな。好きはちゃんと体で表現しないと。__」
と思ったんです。

__何を言ってるか分からない？？__
__僕も分かりません。__

ということで今回は、__全身で数字を表現するダンスゲームNumDance__を作ってみました。
アプリは公開しているので皆さんも全身全霊全身全力でやってみてくださいね。
Maker Fair Tokyoのとある作品については最後に触れようと思います。

Appは[こちらから](https://musing-minsky-34983e.netlify.app)
コード(Gist)は[こちらから](https://gist.github.com/canonno/ab8072405c1

スプレッド構文を制するものは反復可能オブジェクトを制する

#はじめに
ES2015から使えるようになり、徐々にコード内でも市民権を得てきた **スプレッド構文** 。
とても便利な構文なので備忘録もかねてまとめてみました。

#スプレッド構文とは
よく見るピリオド3つのコイツです。

`…`

組織によっては可読性等の問題から使用を控えるように教えられているところもあるかもしれません。
初めて見る方もいると思うので、リファレンスから説明を引用します。

>スプレッド構文を使うと、配列式や文字列などの反復可能オブジェクトを、 0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、 0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

###反復可能なオブジェクトとは
iterablesなオブジェクトとも言われます。
簡単にいうと `for..of` ループで動作できるものになります。

一番イメージがつきやすいのは配列ではないでしょうか。

###配列を展開？
簡単にいうと配列から中身を全部出してくれるという様なイメ

html内に記述の住所から地図を作成

＃概要
html内に記述されている住所を取得し、それに基づいて作成された地図を表示するページについて紹介します。
Google Cloud Platformに登録し、APIキーを取得する必要があります。

まだお済みで無い方は下記の記事などを参考にAPIキーを取得してください

Google Maps の APIキー を取得する

# htmlファイルの内容
“`html:addressMap.html