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

JavaScript初歩知識3 アラート確認&flag

# アラート確認&flag
– 今回はアラート確認とflagを使った処理をまとめました。
## ポップアップウィンドウの表示

– アラート表示

“`js
alert(表示するもの);
“文字列” ex) alert(“おはよう”);//ダイレクトに入力した時
“変数名” ex) alert(cnt);//変数の中の値が表示される
“文字列”+変数名 ex) alert(“cnt=”+cnt)//jsで+は文字列を連結するときに使う
“`
– JavaScriptの間違えやすいところ

“`js
a=1;
b=4;
c=a+b//本来ならば(5)だが、+が連結とみなし、(14)となってしまう
___
alert(“a+b=”+a+b);
a+b=14
alert(“a+b=”+(a+b));
a+b=5

“`
___
## flagを立ててボタンを制御する

“`js
// グローバル変数定義
// html文書がロードさ

移動距離と移動時間を比例させる！(timeclock DAY2))

#移動距離と移動時間
昨日説明したクリックした場所に要素を移動させる[https://qiita.com/toga364/items/bbbdcad49258a5f3540f]
のつづきとして紹介していく…
初心者が初心者のために作ったものなので無駄に長くてまとまってないかも…
あんま参考にしないでね！

##どういうこと？？
タイトルだけじゃよくわからないと思うので、どんな機能をつけるかまとめる
1.要素を移動させる
2.要素の移動距離を取得
3.要素の移動距離に応じて移動にかける時間を設定
こんな感じです…まぁ詳しくはコードみてね！

##実際のコード
“`javascript
/*ここまでは前回で触れたよ！
(リンクは上にあります)
contents.addEventListener(“click”,function(){
var x = event.x;
var y = event.y;
*/
var left = ball.style.left;
var top = ball.style.top;　
var leftNum = left.slice(

visual studio code で、babel-node(@babel/node)をデバッグ

# 確認した環境
visual studio code: 1.39.2
babel-node: 7.2.2

# launch.jsonを開く
画面右端からデバッグアイコンをクリックし、デバッグの設定アイコンをクリック、プルダウンリストから「Node.js」を選択すると、デフォルトのlaunch.jsonが表示されます。
デフォルトのlaunch.json

“`
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
“version”: “0.2.0”,
“configurations”: [

node.jsからAmazonS3へファイルアップロード

# 確認した環境
node.js: 10.17.0
s3-client: 4.4.2

# s3-clientのインストール
s3-clientをインストールします。

“`
npm i s3-client
“`

# s3クライアントのインスタンスを作成

“`Javascript
import s3 from “s3-client”;

const client = s3.createClient({
s3Options: {
accessKeyId: ここにS3のアクセスキーID,
secretAccessKey: ここにs3のシークレットキー,
}
})
“`

# s3へアップロード
s3-clientのreadmeによるアップロードのサンプルは以下です。

“`Javascript
var params = {
localFile: “some/local/file”,

s3Params: {
Bucket: “s3 bucket name”,
Key: “some/remote/file”,
//

cradle で CouchDB にDBを作成しても save ができなかった(ように見えた)件

## だめな例

“`javascript
var conn = new(cradle.Connection)(
constants.DB_URL,
constants.DB_PORT
);
var db_master = conn.database(‘ddntj’);
db_master.create();
db_master.save(‘hoge’, { data:huga } , callback(){…});
“`
……とベタ書きするとこいつは **saveしてくれません** 。
原因は create() でDB作るのに(CouchDB側で)少しだけ時間がかかるのにその前にsaveが走るからです。
まぁ、当たり前っちゃ当たり前なのですがこれエラーも何も吐かないのでちょっと原因を探るのに時間かかりました。
create()でcallback関数が設定できればいいんですがどうやらそんな引数は無い模様。

## 動いた例

……で、どうしたかっていうと

“`javascript
var conn = new(cradle.Connection)(
consta

TypeScript 3.7のOptinal Chainig とNullish Coalescingを使ってみた

#概要

昨日、11月8日に待望のTypeScript3.7.2がリリースされましたね！！
何が待望かというと注目されているのは

* Optional Chaining
* Nullish Coalescing

だと思います。

勿論、ほかにも追加された機能はありますので公式のリンクを張っておきます。
是非一度読んでみてください！！
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

**注意：深夜テンション & 酔っているので誤字脱字、日本語が変も知れません。**
**添削や過不足あれば、ご指摘していただける修正させていただきます。**

# Optional Chaining

Interfaceを定義する際によくoptionalのプロパティを作成する時は往々に存在します。
プリミティブな型にoptionalならまだ良いのですが、
optionalがnestしまくっていると、各階層で検査が必要になりIf文や三項演算子まみれになります。

しかし、Optional Cha

JavaScriptで五目並べゲームをつくりました。

JavaScriptとHTML5で、コンピュータと対戦できる五目並べゲームを作ったので、概要を説明します。
※この記事はまだまだ修正すると思います。

## 五目並べというゲームについて
[wikipedia](https://ja.wikipedia.org/wiki/%E4%BA%94%E7%9B%AE%E4%B8%A6%E3%81%B9 “五目並べ-Wikipedia”)にも書いてありますが、囲碁の道具を用いて行うボードゲームの一種で、囲碁盤に白と黒の石を交互に置いていって、先に直線上に5個並べたほうが勝ちとなります。禁手なしの五目並べは明治時代に先手必勝が証明されているらしいです。
今回作ったのは禁手なしの五目並べですが、着手できる場所は他の石の周りの8箇所に制限しています。盤面の大きさも13×13にしました。

## 開発の経過
この記事を書く3週間ぐらい前にJavaScriptの腕試しというか、練習として 絶対に勝てない3目並べ(○×ゲーム)というのを作ってみて、五目並べもできそうな気がしました。五目並べは必勝手順があるらしいので、その辺にも興味がありました。また、以前に

年末まで毎日webサイトを作り続ける大学生 〜21日目 段組みレイアウトでタロットカードを配置してみた〜

##はじめに
こんにちは！最近週末は温泉に通っている@70days_jsです！
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
今日はMDNでcssの段組みレイアウトを学びました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は21日目。(2019/11/8)
よろしくお願いします。

##サイトURL
– https://sin2cos21.github.io/day21.html

##やったこと
まず段組みレイアウトってなんぞやという話なんですが、見たらすぐにわかると思います。

これが段組みレイアウトです。新聞記事風に配置できる感じですかね。
flexboxやgridレイアウトでできそう・・・とか思いましたが、ま

YYTypeScript#8「セミコロンは省略すべき？」「Vueと一緒にTSも導入すべき？」「Vueテンプレートの型、みんなどうやってる？」「TSの罠にハマった体験談と対策」「Composition APIについて聞きたい」「default exportは避けるべき？」「TypeScriptのバージョンアップのタイミングはいつ？」「TS+Vue+Electronって大丈夫？」「TSX+Vueなら、Reactで良くない？」

これは2019年11月8日に開催したTypeScriptイベント[YYTypeScript#8]のイベントレポートです。

[YYTypeScript#8]: https://yyts.connpass.com/event/151561/
[YYTypeScript]: https://yyts.connpass.com/

[YYTypeScript]は一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

__今回の配信動画__

YYTypeScript #8 の配信の収録画像をアップしました！https://t.co

『自分用』テンプレートエンジンを使って簡単なアンケートをつくってみた

##免責事項
この記事は初心者視点でザックリとした説明をしています。正確性に欠ける可能性がございますが、ご了承ください。「明らかに違うよ」ということがありましたら、ご指摘くださると幸いです。

##環境
OS：最新版ではないMacOS
VirtualBox：5.2.26
Vagrant：2.2.6
Ubuntu：ubuntu/bionic64 v20181129.0.0

##目次
1. テンプレートエンジンとは
2. アンケートをつくる

#1. テンプレートエンジンとは
テンプレートエンジンはテンプレートと呼ばれる雛形とデータを合成し、HTML等の成果ドキュメントを出力するライブラリです。

Wikipediaにわかりやすい画像があったのでお借りしました。
（画像 by Dreftymac at Engl

連想配列(辞書オブジェクト)n個の共通配列を上書きなしで結合マージする

同じ構造を持ったカテゴリごとに分割したオブジェクトを利用時には結合してひとつのオブジェクトとして扱いたい。
`Object.assign`は同プロパティは上書きなので、これを結合に変えたい。
各値は配列として持っていて、これを結合した配列にしたい。

結局泥臭く2重ループで、どちらかといえば配列処理。
やりたかったことの割りに何の変哲もない初歩処理になってしまった…

# コード

“`js
const template = [‘dog’, ‘cat’, ‘human’]

const hira = {
‘dog’: [‘いぬ’],
‘cat’: [‘ねこ’],
‘human’: [‘ひと’],
}

const kana = {
‘dog’: [‘イヌ’],
‘cat’: [‘ネコ’, ‘ニャンコ’],
}

const kan = {
‘dog’: [],
‘cat’: [‘猫’],
‘human’: [‘人’],
‘car’ : [‘車’],
}
“`

`hira kana kan`を指定したプロパティのみで結合したオブジェクトにしたい。

クリックした場所に要素を移動させる！(timeclock DAY1)

#今回はjavascriptを用いて要素をクリックした場所に移動させる

というのをやっていきます。
*初心者*が自分で考えて作ったものなので多分最適化したら3行ぐらいで終わるかもしれません…**自身がない方**に採用してほしい…( ;´･ω･`)

##クリックした場所移動
“`javascript
window.onload = function(){
//まず動かす対象を取得
var ball = document.getElementById(“ball”);
//対象が動くフィールドとなる部分を取得
var contents = document.getElementById(“contents”);

//フィールドが押されたときにイベント発生
varcontentsaddEventListener(“click”,function(){
//押された場所を取得
var x = event.x;
var y = event.y;　
//押された場所に移動
ball.style.left = x + “px”;
ball.style.top

【chrome extension】ダウンロードが”完了したとき”にアクションを行う方法

# この記事は？

`chrome.downloads.onCreated.addListener()`を使うと「ダウンロードシーケンスを開始した時」になってしまいますね。
ダウンロード先を決めるウィンドウが開いている時すでにリスナーは発火しているわけです。
そうではなく「ダウンロードし終わった時」にアクションを起こしたい場合はどうすればいいのかを解説します。

# コード紹介

まずは結論から、ということでコードをそのまま紹介します。

“` JavaScript
let myDownloadItem = undefined

chrome.downloads.onCreated.addListener((downloadItem) => {
// 後で使用する。必要なければonCreated()の部分は不要
myDownloadItem = downloadItem
})

chrome.downloads.onChanged.addListener((downloadDelta) => {
let nowState = downloadDelta.state
i

MinecraftBEでscriptingAPI！part2.自作uiを表示する

#はじめに
今回は棒でブロックを叩くと3つのボタンが現れ、3つ目のボタンを押すと消える、というscriptを解説したいと思います。ファイル構成がやや複雑なのでページ下のサンプルパックをダウンロードすることをおすすめします。
#準備
今回はuiを追加するにあたって前回と違いいくつかのファイルを使用します。
client.js, server.jsに加えて button.html, button.css, hud_screen.jsonが必要になります。(今回はbuttonという名前をつけていますが、名前はなんでも大丈夫です)

リソースパック、ビヘイビアーパックのファイル構成は以下の通りになります。
your_resource
├ manifest.json
├ ui
│ └ hud_screen.json
└ experimental_ui
     └ button.html
     └ button.css

your_behavior
├ manifest.json
└ scri

ローグライクゲームを作ってみるその4 ダンジョンのランダム生成

### 過去記事一覧

* [その1 タイトル画面](https://qiita.com/pizyumi/items/3526fddd4f18a462e1ae)
* [その2 ダンジョン・プレイヤーの生成と描画](https://qiita.com/pizyumi/items/2562a159f497a608615b)
* [その3 プレイヤーの移動](https://qiita.com/pizyumi/items/07447c9a1a52b0d9a228)

現在のコードについては前回の記事の最後の項を参照してください。

### 複数のフロア

今回はダンジョンのランダム生成をやってみようと思いますが、その前に複数のフロアを移動できるようにしようと思います。

現在は1つのフロアしか生成されず、そのフロアを移動することしかできません。

これを下のように変更します。

* 全てのフロアには1つの下り階段が設置され、その階段から1つ下のフロア（階）に移動することができる。
* とりあえず上り階段は設置しない（一度下のフロアに移動してしまうと、上のフロアに戻ることはできない）。

まず

【低意識】開発中cssとかjsとか読みなおすのめんどくさーーい

#なにもかもがめんどくさい

PCのChromeとかはさ、開発者ツールだしたうえで更新ボタン左クリックで長押し→「キャッシュのクリアとハード再読み込み」でまあなんとかなる（でもそれすらもめんどい）

あとは特にスマホでキャッシュクリアすんのがめんどくさい（結構時間かかる）

##王道Pragma

“`PHP
header(“Pragma: no-chache”);
“`

だと全部キャッシュされない、これはキモイ

##Apacheは高性能

http://note.mokuzine.net/apache-cache/

“`Apache

FileETag None
Header unset ETag
Header set Cache-Control “max-age=0, no-cache, no-store, must-revalidate”
Header set Pragma “no-cache”
Header set Expires “Thu, 01 Dec 1994

HTMLで複数のidを指定した場合

htmlに同一名のidを指定してそれらを一括して適用させる関数をJavaScriptで書いたのだが、htmlに複数の同一名idは文法違反らしく、getElementById　で指定したものは複数あるうちの初めの一つにしか適用されていなかった。
ぱっと見エラーが表示されるわけではないので初心者には要注意のミスだと思う

Node.jsでキー入力を検知する

# 概要
Node.jsアプリケーションを単体で動かしている時に、押されたキー情報を取得する方法

# 背景
Node.jsアプリケーションを単体で動かしている場合(コンソールから制御)において、キーの押下をトリガーにキーの状態そのものを取得する方法として, `readline`がFirebaseと一緒に使えなかったり、`ffi`パッケージが入らなかったため。

# 実装手順
## 1.`npm install keypress` でパッケージを導入
今回は [keypress – npm](https://www.npmjs.com/package/keypress)を利用します。
ターミナルで下記コマンドを入力してください。
“`
npm install keypress
“`

## 2. 使ってみる

以外、殆どが公式npmページからのコピペですが、少し補足をしています。

“` JavaScript
var keypress = require(‘keypress’);

// make `process.stdin` begin emitting “keypres

JavaScript：演算子「!」(否定) を用いて、各型／値の boolean 型への変換について

## 検証

演算子「!」(否定) にて各型の値を boolean 型(真偽値) へ変換を行う

### 確認

“` JavaScript:true_or_false.js
class TestClass {
constructor(in_value01, in_value02) {
this.in_value01 = in_value01;
this.in_value02 = in_value02;
}

get property01() {
return this.add_method01();
}

add_method() {
return this.in_value01 + this.in_value02;
}
}
// ———-
console.log(‘!true = ‘ + !true);
console.log(‘!false = ‘ +

ベジェ曲線をCanvasで描画して背景をブロークングリッドする

#はじめに
**ブロークングリッド**とは言いすぎかもしれませんが
マウスに追従した背景デザインを今回書いてみました。
生のJavaScriptで書いてますので実装は簡単かと

今回の完成イメージはこちらです！

#Canvasについて
[MDN web docs Canvas API](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API “”)
>Canvas API は JavaScript と HTML の 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

“`h