対戦ゲームを作る。 その6

#概要

対戦ゲームを作る。
とりあえずの動作品できました。

#写真


#成果物

https://embed.plnkr.co/plunk/YOPT0b6JCERVh4AQ

以上。

ReactでTodo App 作ってみた2

今日はチェックボックスの選択とtodoの削除！

学んだこと

Todoアプリの作成
・Todoの完了状態を変更できるようにする　チェックボックス
・全て完了にするボタンが動作できるようにする　チェックボックス
・全て完了にするボタンの一括操作をできるようにする　チェックボックス
・完了済みのTodoを削除できるようにする
　
■用語
**every**　
配列のメソッド
配列全てがtrueならtrue
配列全てがtrueじゃなければfalse

**filter**
配列のメソッド
配列に対してfilterをかける
filterの中で呼ばれた関数がtrueを返したやつだけ返す

Wiki(の募金)をぶっ壊す党

## はじめに

みなさん、Wikipediaは利用してますでしょうか？
私はよく利用させていただいています。

サイトを利用している方なら下記のような、募金を促すお知らせをみたことがありますよね？ ↓↓↓


募金の有無に関わらず、定期的に表示され邪魔に感じているのではないでしょうか？
今回はUserJSを利用してパージしてみようと思います！

## 準備

UserJSというサイト表示時にJavascriptを挿入してくれるChrome拡張機能を使用します！

– User Javascript and CSS
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmke

DenoでTerminalをアニメーションさせて遊ぶ

# はじめに

この本を参考に、ターミナルでAtomが動くバチクソかっこいいサンプルをDenoに移植しました。

http://mame.github.io/trance-book/

こんな感じで動きます。


ページをめくるたびに失神するほどかっこいいので、みんなで読んで失神しよう。
末代まで受け継いでいきたい。(お前が末代)

# 実行してみる

ソースはここに置いてます。

https://raw.githubusercontent.com/zakuroishikuro/sharin/main/asobu/atom.ts

denoはURLを渡すだけで直接実行できます。
何はともあれ実行してみてください。面倒なことは何もありません。
ファイルをダウンロードしてくる必要すらない、最高！

“`sh
deno run –allow-run=s

[Rails]JavaScript(jQuery)でサーっとページトップに戻るボタン(FontAwesome)

ページトップ機能はいろんな実装方法があると思いますが、今回はJavaScript（jQuery)とFontAwesomeを使ったページトップへ戻るボタンの実装をしていきます。

スクロールが多いページだとページトップボタンは必須かなと考えます。

ただスマホの場合は指でスクロールが簡単にできるので、スマホのみのサービスの場合は必須とまではいかないかなと。（スマホではあまりページトップボタンクリックされてないみたいなデータがあったような、、、）

完成イメージはこちらです。(右下のボタン)


実際の動作を確認したい方は、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/answers)を確認してみてください。
ある程度スクロールしたら右下に出てくるので、クリック

対戦ゲームを作る。 その5

#概要

対戦ゲームを作る。
盤を描画して、クリックイベントを取るUIの実装。

#考え方

ライブラリーは、jqueryとtatenoを使う。
盤は、８マス×８マス。
石は、画像から切り出す。
６４個のスプライトに、クリックイベントリステナーを設置する。

#画像


#サンプルコード

“`
var coma = ‘koma.png’;
var pl0 = ‘anta’;
var pl1 = ‘ore’;
var ban = [];
var flg = 1;
var game = new Game();
game.fps(5);
game.preload([coma]);
game.start();
var aLabel = new Label(“a”, 50, 330);
aLabel.size(20);
aLabel.label(‘白:

herokuでrails + nodejsでnodeのバージョン指定する方法

# 前置き

railsアプリを構築し、webpacker用にnodejsを入れたアプリを作った際、
nodeのバージョンが12系なのが気になった。
現時点でのLTSは14系なので開発環境と差異が発生しており環境差異でハマるのが嫌なのでheroku側のnodeバージョンを上げる方法を追求してみた。

軽く検索するとよく引っかかるのが `heroku Buildpacks` を使うというもの。

## 公式ドキュメント
https://devcenter.heroku.com/ja/articles/buildpacks

だがしかし、上記を見てもバージョンを指定する具体的な方法自体は記載がない。

ググって見た感じ、 `package.json` にバージョンを追記するとバージョンが指定できるとある。

“`json
“engines”: {
“node”: “14.17.2”,
“npm”: “6.14.13”
}
“`

ただし、railsアプリでこれをやってpushしても

“`
remote: error app@1.0.0: Th

これから学習する言語についてまとめた

はじめに
—
これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。
（間違いがありましたら、ご指摘を頂けますと幸いです）

HTML
—

言語の正式名称　
　ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略
　
ハイパーテキスト
　文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み
　
マークアップ
　サイト内の文書に意味づけをしていく作業。
　HTMLでは文書をタグで囲むことで意味をつけていくことで、
　コンピューターが正しく認識できるようにする。
　
ランゲージ
　言語

開発された経緯　
　WEBページを作成するために開発された言語である

主にどのように利用されているのか
　ほとんどのWEBページにおける基本的な骨組みはHTMLで構成されている

メモ
　SEO「検索エンジン最適化（Search Engine Optimization）」を意識しタグを使うことで、
　検索エンジンが、より正確に文書の中身を理解できるようになる。
　
　
CSS　
—

言語

async / await / Promise / then とかがよくわからんので自分なりの感覚的な理解のメモ

# 前置き

JavaScript の async / await / Promise / then（もっというと try, catch とかも）あたり、書けないことはないけど、イメージが掴みづらく自分が何書いてるかよくわからなくなるので、感覚的な・どういう気持ちで書いていけばいいのか、というところを自分なりにメモするものです。

よくわかっていないものを現在進行系で紐解いていくメモなので「〜じゃないですか？」「〜は間違いです」みたいな指摘のされ方をされても、「正直分からないです」「そうですか・・・」とならざるを得ないので、こちらのほうが正しいですとか編集リクエストベースとか、そういう感じでご指摘いただけると大変嬉しいです。

# 何がわからないか

– 非同期な処理がしたいんじゃなくて、仕方なく非同期で返ってくる値をうまくこなしたいだけなんだ
– 別に同期的な処理をしたくて openFileSync を使ってるんじゃなくて、非同期がわからないから openFileSync を使っている、を解決したい
– Promise がわからん
– とりあえず async / await だと

JavaScriptの基礎 Part1

#文字の出力

console.log();を使って出力します。
文末にセミコロンを付けるのを忘れないようにして下さい。

#変数の定義

ES6でJavaScriptの変数を定義するためにはletを使います。
let 変数名 = 値;

変数の更新の時にはletは使いません。

変数は後々変わるかもしれない値を代入する時に使います。
しかし、後々に変わらない値を代入する時はconstを使います。

#テンプレートリテラル

テンプレートリテラルを使うことによって、＋を使わなくても変数や定数を
代入することができます。

${}を使います。
ただし、テンプレートリテラルを使う時は全体を“（バッククォーテーション)を使います。

“`JavaScript
const name = “たけし”;
console.log(`こんにちは、${name}です`);
“`

#比較演算子

JavaScriptの時の比較演算子で、等しいかどうかを調べる時は
A === Bを使い、違う時はA !== Bを使う。

#最後に
初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き

セットで学ぶ！Firestoreのクエリとルール

# 背景
Firebaseを使うと、バックエンドを構築する手間が省けて楽ちん。
しかし楽ちんだからといって、大切なことを怠るとと大きな危険が待っている。
大切なデータが保存されているDBにアクセスするAPIがどこからでもコールできる、ということは非常に危ないこと。
そのセキュリティの穴を塞いでいるのが、Firestoreの「ルール」である。
楽をするからには、徹底的にセキュリティに穴を塞がなければならないが、このルールの記述が簡単ではない。
特に、こういうクエリを投げるときにはこういうルールを記載しなければならない、というようにクエリとルールが分かりやすく結びついているドキュメントがほとんどない。
Vue.js + Firebaseでの開発も非常に苦労したので、私が調べて学んだことをメモしておこうと思った。
万が一、誰かの役に立つことができればとても幸いである。

# データの取得
## ケース①　自分のユーザIDに紐づくデータを取得する
1つ目なので、少し詳細に記載する。
![image.png](https://qiita-image-store.s3.ap-northeast-1

SQLのwhere的な条件指定によってテーブルから行を抽出【Javascript】【構文解析】

#目的
SQLのwhere構文のように、列名と値をandやorでつなげて指定した条件によって、テーブルから行を抽出する機能を作ることを目指します。例えば、ポケモンの一覧表から`”type1=でんき and type2=ひこう”`みたいに指定したら、でんき・ひこうタイプのポケモンだけを抽出できるようにしたいです。
#ステップ０（下準備)
テスト用の関数を作っておきます。
あとでリスト同士の比較をしたくなることがあるので、それを考慮した関数にしておきます。

“`Javascript
function typeOf(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
function isSameObject(object1, object2){
const type1 = typeOf(object1);
const type2 = typeOf(object2);
if(type1 != type2)return false;
if([“

JavaScriptでアプリを作成しました【2】【TodoList】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【要件】
####1. タスク追加機能
– 追加ボタン押下時にタスクを登録できる
– タスクには、「ID、コメント、状態」が含まれる
– IDは連番にする
– コメントはフォームで入力された値が表示される
– 状態には、「作業中」と表示される
– 削除ボタンが表示されている（ここでは押下時の動作はつけなくてよい

####2. タスク削除機能
– 削除ボタン押下時にそのタスクを削除できる
– タスク削除時はIDが振り直される
– 削除後、新たにタスクを追加するとIDが連番となっている

####3. タスク状態変更機能
– タスクの状態を変更できる
– 作業中の状態でボタンをクリックすると完了へ変更される
– 完了の状態で

対戦ゲームを作る。 その4

#概要

対戦ゲームを作る。
そこに、石が置けるか評価する関数の実装。

#考え方

前後左右、９方向に、違う石があって、同じ石があるのか、探索する。

#サンプルコード

“`
function check(put, d) {
var x = put % 8;
var y = Math.floor(put / 8);
var res = 0;
if (x == 0 && (d == -9 || d == -1 || d == 7)) res = 1;
if (x == 7 && (d == -7 || d == 1 || d == 9)) res = 1;
if (y == 0 && (d == -9 || d == -8 || d == -7)) res = 1;
if (y == 7 && (d == 7 || d == 8 || d == 9)) res = 1;
return res;
}
function oku(put, iro, ban) {
var res = 0;
var turn = 0;
if

JavaScriptの基礎の基礎

# はじめに
JavaScriptの学習から長く離れていたため、復習として投稿します。

# デベロッパーツール
JavaScriptをテキストエディタでファイルを用意して基本文法を試すのはけっこう手間です。
コードを実行したらすぐに結果が表示されるツールがあると便利です。
デベロッパーツールによって、それが実現でき、以下のようなことができます。

– 表示しているサイトのHTMLの要素の確認・編集
– 表示しているサイトのCSSの確認・編集
– JavaScriptの実行

HTMLやCSSの確認・編集はElements（エレメンツ）パネルで操作することができますが、
JavaScriptの実行はConsole（コンソール）パネルにて行うことができます。

# デベロッパーツールの使い方
デベロッパーツールはブラウザに用意されています。
まずは新しいブラウザの画面を立ち上げます。
新しいブラウザの画面を立ち上げたら、次に以下のように操作をします。

– ブラウザ上で二本指クリックする
– 「検証」を選択する

もしくは`⌘ + option + C`のショートカットキーを用いて

対戦ゲームを作る。 その3

#概要

対戦ゲームを作る。
送信データの説明。

#送信データ

“`
{
id: 17aa4b810dc1,
state: 0,
iro: 0,
ban: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
te: 0
}
“`

#id

ユニークなIDです。

#state

現在の状態です。

#iro

白か黒です。

#ban

８×８の盤を表現してます。
０は黒
２は白

1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 0, 2, 1, 1, 1,
1, 1, 1, 2, 0, 1, 1, 1,
1, 1, 1,

対戦ゲームを作る。 その2

#概要

対戦ゲームを作る。
通信サーバーをテストする。
２つ、開いて、送信データが両方に送られれば成功。
chatとしても、利用可能なのです。
テスト中に、知らない人、来るかも。

#サンプルコード

“`

function getUniq() {
var strong = 3;
return new Date().getTime().toString(16) + Math.floor(strong * Math.random()).toString(16)
}
var id0 = getUniq();
var out = document.getElementById(“out”);
var src = document.getElementById(“src”);
src.value = “{\n”;
src.value += “id: ” + id0 + “,\n”;
src.value += “state: 0,\n”;
src.value += “iro: 0,\n”;
src.value += “ban: [1, 1, 1, 1, 1, 1, 1, 1, 1,

JavaScriptの存在チェック（〜を含む）まとめてみた

JavaScriptで存在チェック（〜を含む）を書く機会があったので、メモ。

## 変数

変数宣言

“`javascript
const string = “abcdefg”;
“`

### match

“`javascript
/* match
文字列が含まれれば配列、文字列が含まれなければnullが返る
console.log(string.match(/abc/)) => (1) [“abc”]
console.log(string.match(/hoge/)) => null
*/

console.log(string.match(/abc/));
// => true
“`

`match(//)` の部分は、変数ではなくて`string`として認識されるので、変数を使いたい場合は、「正規表現オブジェクト」を使う。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

#### RegExpオブジェクト

“`javascript

JavaScriptを基本からまとめてみた【DOM】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##DOMとは
JavaScriptでhtmlの要素を操作するための仕組みのこと。
「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」。

##DOMの特徴
① ツリー構造とも呼ばれる階層構造を取る。
② それぞれノードという言葉で説明される。
③ WEBページとJavaScriptなどのプログラミング言語とを繋ぐ。

##参考サイト
[JavaScript初心者でもすぐわかる！DOMとは何か？]
(https://eng-entrance.com/what-is-dom)

JavaScriptでアプリを作成しました【1】【FizzBuzz問題】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【要件】
– 入力された整数値でFizzBuzz問題を実行できる
– fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
– 各々倍数と一緒にfizz、buzzと表示させる
– 両方の倍数である時にはfizzBuzzと表示させる
– 表示させるのは二桁の値まで

– 整数値が入力されずに実行ボタン押下された際にはエラーを表示させる
– 文字列が入力された時
– 少数が入力された時
– 空欄だった時

##【作成にあたり学習した事】
– if文
– ループ処理
– DOM
– getElementById()
– a