B-Teck!

お仕事からゲームまで幅広く

JavaScript

【JavaScript/AngularJS】今更AngularJSに入門したメモ

AngularJSをサクッと覚える必要があったので勉強したメモ。 生のJSで扱おうと思うとアロー関数使うとうまく動かない箇所があったので、昔ながらの無名関数で書く。 中で呼び出すスクリプト等は学習時に利用した教材に合わせているため古い。 記事中のコード…

【GAS】SpreadSheetの表をjsonに変換し、ZIPで固めてGoogleDriveに配置する

静的なjsonを作成して配信する必要があり、メンテの楽なスプレッドシートの表から作れないかと思ってやってみたメモです。 JSONを作る Zipに圧縮する blobsをつくる ZIPをつくる Driveに配置する フォルダを取得する ファイルを作成する まとめ JSONを作る G…

【JavaScript/jQuery】We don't need jQuery?

昔書いてたメモが出てきたので、今更ですが供養。 正直今でも作り捨てとか、とりあえず作るならjQuery使ってもいいんじゃないかな?って思ってる。 jQueryとはなんだったのか ブラウザ間でJavaScriptの実装が大きく異なっていた時代に、共通の実装が行えるよ…

【JavaScript/Vue.js】Vue.jsとVuetifyを使ってTodoリストを作ってみた

ちょっと会社でVueを触る機会があったので、勉強がてらTodoリストを作ってみました。 リポジトリと動作サンプルは下記 GitHub - beatdjam/training_vue-cli-todo サンプルページ やったこと vue-cliインストール $ npm install -g @vue/cli プロジェクト作成…

【JavaScript/jQuery】後から生成されたDOMからイベントを発火させる

jQueryの場合 jQueryの場合のサンプル pure JSの場合 JavaScriptの場合のサンプル jQueryの場合 昔こういう事するときはjQueryのlive()を利用していたんだけど、1.9で死んでた。 $("p").live("click", function(){ $(this).after("<p>これもクリックできる</p>"); }…

【JavaScript】クリップボードに文字列をコピーする

document.execCommand("copy") が選択した要素の文字列のみしかコピー出来ないので、 一時的に要素を作って、選択してコピーする。 const copyToClipboard = s => { const d = document; // copy用の一時要素を作成し、文字を入れる const t = d.createEleme…

【JavaScript】アロー関数

アロー関数のthisは定義した場所のthisで固定される this.val = `global`; let obj1 = { val: 'obj1', print:function(){ console.log(this.val); }, printAllow:() => { console.log(this.val); } } // obj1のthisを参照するので // obj1が出力される obj1.…

【JavaScript】スプレッド演算子

配列の展開 const value = [2, 3, 1, 4, 5]; console.log(Math.max(...value)); シャローコピー // 配列の複製 let a = [1, 2, 3]; let b = [...a]; console.log(b); //[ 1, 2, 3 ] // シャローコピーなので多次元配列やオブジェクト等は影響を受けてしまう …

【JavaScript/jQuery】要素を切り替えるスライダー

しくみ さんぷる See the Pen VQEZwM by baetdjam (@beatdjam) on CodePen. こーど js $(window).on('load',function(){ class slider{ constructor(time, slideId, innerArea, prevBtn, nextBtn){ this.slideId = slideId; this.innerArea = innerArea; thi…

【JavaScript】JavaScriptの変数・関数の巻き上げ(ホイスティング)

ホイスティングとは 変数の巻き上げ ES2015の場合 関数の巻き上げ function文で宣言した場合 varで宣言した場合 let・constで宣言した場合 ホイスティングとは JavaScriptは、関数内でvarで宣言した全ての変数が先頭で宣言したことになる。 この、宣言が先頭…

【JavaScript】最大値と最小値を指定して範囲内の値を持った配列を作成する(ES2015対応版)

この記事は下記の記事をES2015対応機能でリライトしたものです。 beatdjam.hatenablog.com /** * range * 範囲内の整数値を持った配列を作成する * @param {number} max 範囲の最大値 * @param {number} min 範囲の最小値(デフォルト値:0) * @param {functio…

【JavaScript】thisの種類

JavaScriptのthisにはいくつかの種類があり、状況によって動作が変わる。 現在はおおまかに分けて5つ? コンストラクタ呼出し メソッド呼出し 関数呼び出し 関数呼び出しの注意点 applyまたはcallで呼び出し時 applyとcallの違い アロー関数で呼び出し時 ア…

【JavaScript】今までブログに載せたJavaScriptのスニペットをまとめた

今までぽろぽろ書いてたJavaScriptとかを、ちょっと書き直したりしてまとめた。 書いたあとで知ったこととか踏まえるともっときれいに書けたり短くかけたりして面白かった。 MyToolBox/js at master · beatdjam/MyToolBox · GitHub 自分が過去に書いたコード…

【JavaScript】文字列の空白埋め、0埋め

以前Javaで同じようなことやってるけど、JavaScriptもメモしておく。 http://beatdjam.hatenablog.com/entry/2017/07/21/225053 function padding(str,num,pad){ if(pad === void(0)) pad = 0; return (Array(num + 1).join(pad)+str).slice(num*-1); } cons…

【JavaScript】指定した文字列を繰り返した新しい文字列を生成する

ES6が使える環境ならこれでOK。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat console.log("test".repeat(3)); // testtesttest ES6が使えない環境なら、先述したMozillaのサイトのpolyfillを利用するか、…

【Javascript】連想配列の値やキーに特定の値が存在するか調べる

var Country= { "Japan": "日本", "China": "中国", "Korea": "韓国", "Vietnam": "越南" }; function getHashProperties(a){ let r = []; for(let v in a){ if(a.hasOwnProperty(v)) r.push(a[v]); } return r; } // 入力したオブジェクトのプロパティの値…

【JavaScript】ユークリッドの互除法でコードゴルフして遊んだ

以下は全てコメントを除外したバイト数 初期状態(152バイト) function euclideanAlgorithm(a,b){ // aがbで割り切れる場合、最大公約数である let c = a%b; if(c === 0){ return b; }else{ // 割り切れない場合、bと剰余を引数に再度自分自身を呼び出す retu…

【JavaScript】配列の要素の入れ替え

配列の要素の順番を入れ替えるとき、 let temp = ary[x]; ary[x] = ary[y]; ary[y] = temp; みたいにやってたけど、 なんか1行でできるらしい。 function swap(a,x,y){ a[x]=[a[y],a[y]=a[x]][0]; return a; } 最初見たとき意味わかんなかったんだけど、コメ…

【JavaScript】ArrayLikeObjectをArrayに変換する

ArrayLikeObjctとは document.querySelectorAll()とかで戻り値になっているNodeListとかの型。 通常の配列のようにlengthとかを持っていたり、添字を使って各要素にアクセスできる。 でもArrayではないので、Arrayのメソッドとかは使えない。 そのままでは扱…

【JavaScript】日付の妥当性をチェックする

正規表現でチェックして欲しい形式以外をふるいにかけた後、 Date型に突っ込んで突っ込む前と同じ年月日かを確認する。 これで欲しい形式以外は入ってこないし、変な日付が入ってきて無理やり変換されても 変換前との比較で判定できる。 別の形式も許容する…

【JavaScript】半角の文字を判定する

正規表現 半角文字列の判定として「/[^\x01-\x7E]/」を使う。 []の中に含まれる先頭のキャレット^は否定の意なので、 この場合はASCIIコードの「x01~x7Eの範囲外の文字列」という意味になる。 これだけではカナは含まれないため、同様に「/[^\uFF65-\uFF9F]/…

【JavaScript】JSの配列操作まとめ

配列の操作 配列の作成 配列の初期化 配列の要素数を取得 配列の最初と最後を取得 配列の要素を指定位置で切り出す 配列のループ 配列の先頭に要素を追加する 配列の末尾に要素を追加する 配列の値を削除する 配列の先頭の要素を取り出して元の配列から削除…

【JavaScript】指定時間後や定期的に処理を実行する。

window.setInterval(function, delay) setIntervalは、functionに与えられた関数・処理をdelay(ms)ごとに繰り返す処理。 window.setTimeout(function, delay) setTimeoutは、functionに与えられた関数・処理をdelay(ms)後に実行する処理。 setIntervalで定義…

【JavaScript】Objectタグのdata要素を変更する

HTMLElement.setAttribute("data",変更後data要素)だとIEでうまくいかなかったので、 IEも対応する場合はObject要素自体のDOMをreplaceChildで置き換えてやる必要がある。 /** * changeObjectData * objectタグの表示内容を更新する * * @param {object} ele…

【JavaScript】HTMLのテーブルをソートするsorTable.jsを作ってみました

github.com すでにあるのかもしれないけど、jQuery無しで動作するHTMLテーブルのソートのやつを作りました。 Git初心者なのでコミットログが汚い... とりあえず公開してみた状態なので、そのうち直したりしてみようかなと思ってます。 下記はデモページの埋…

【JavaScript】ウインドウを閉じたとき子ウインドウも一緒に閉じる

ウインドウにモーダルじゃない子ウインドウがある時、閉じたら一緒に消えてほしかった。 IEでのみ動作確認済み。 コードでは1対1の親子関係しか定義してないけど、childWindowを配列にして突っ込んで、 each()とかmap()とかああいうので回せばいいと思う。 (…

【JavaScript/IE】ウインドウを閉じる

window.open()で開いたウインドウじゃないとか、window.close()だとなんか閉じれない環境があったので。 IE(とChrome)は下記のコードで動いた。 window.open('about:blank','_self').close();

【JavaScript/IE】ウインドウサイズの変更に合わせて要素を拡大縮小する

onresize時に現在のウインドウサイズ変更の比率に合わせてドキュメントの拡大率を動的に変更する。 動作確認はIEのみで、他ブラウザでは正常に動作しないかも。 (function(){ window.addEventListener("resize",windowZoom, false); //ウインドウオープン時…

【JavaScript/IE】ファンクションキーを無効化する

onload時にイベントを無効化することでファンクションキーを動作しないようにできる。 押下時の処理を別で定義することで、Webアプリケーションでもファンクションキーを用いたデスクトップアプリケーションライクな処理を再現できる。 動作確認はIEのみで、…

【JavaScript】相手を追尾するAIを考える その1

はじめに この記事にこんなコメントがつきました。 beatdjam.hatenablog.com コメント失礼します。 ゲーム開発を学んでいるプログラマーの卵です。 敵AIの追尾について勉強していて、 縦横マス目移動でプレイヤーを追尾出来るような敵の処理にしたいのですが…