Help us understand the problem. What is going on with this article?

クソカードゲームを作るクソアプリを作った(React)

More than 1 year has passed since last update.

作ったモノ

実際に印刷したもの

ここで実際にクソゲーを作れます
アナログゲームプロトタイプメーカー
github

何故作ったのか

ちょうどreactを勉強したいが、せっかくなので何か作りたい。
同人活動でアナログゲームを作っているが、プロトタイプを作るのが毎回大変だった。
海外産の遊戯王ジェネレータ等を使っても日本語だと文字化けしたり、改行がズレたりといまいち。
そういうわけで、作った。
あと、当時正式版が公開されたばかりのbootstrap4も使ってみたかった。

工夫した点

印刷して使う事が前提だったので、
切り離しやすいよう1枚目の紙と2枚目の紙でカードの位置がズレないようにした。

技術的な点

・印刷時は9枚単位で改ページする
CSSに'page-break-after: always'なるものがいる、便利なものは使う。

・カード3つ毎にdivで囲む。カード9つ毎にまたdivで囲む。
3つで次の行、9つで前述のpage-break-afterをするため、divで階層化したかった。
今思えばCSS疑似クラスでいけそうだけど気にしない。
こういう感じにしたかった。

for(var i=0;i < カードの枚数;i++){
    if(i%9 === 0) {
        <div className="page-break"> //9枚ごとに次の紙に印刷
            if(i%3 === 0) {
                <div className="row">//3枚ごとに改行
            }
            <Card>
            if(i%3 === 0) {
                </div>
            }
        </div>
    }
}

JSXの中ではforが使えず、上記のコードは上手くいかない。困った。
というわけでこうなった。

{
    //this.card_row_limitは3
    Object.keys(this.cardlist).filter(key => key%this.card_row_limit === 0).map(
        (carddata,i) => { 
            return React.createElement('div',{className:'row'},((row_data,num) =>
                Object.keys(this.cardlist).filter(key => ((key >= num*this.card_row_limit) && (key <= num*this.card_row_limit+(this.card_row_limit-1)))).map(
                    (row_card_data,in_row_number) =>  {
                        var card_num = num*this.card_row_limit+in_row_number
                        return React.createElement(CardBox, {data:this.cardlist[card_num], index:card_num, ref:"card"+(card_num)})
                    }
                )
            )(this.cardlist,i))
        }
    )
 }

皆さんはそれぞれのネストが何しているか分かりますか?
マジな話、オレは分からない

半年前の俺によると
this.cardlistがカードのデータ。3枚目のカードならthis.cardlist[3]
cardlistからキーを取得して、filterで3の倍数だけ取得、それを1回目のmapでループ。
return React.createElement('div'divを作る。
第三引数で今度はカードリストのうち、123 や 456 など3つを返すようにしてあげるためまたfiltermap

らしい。へーすごいね。

JSXの中でforは使えず、ループはmapで行う
mapの返り値としてReact.createElementオブジェクトを返す事で,タグとかコンポーネントが生成できる

という感じ。
このときちょうどlaravelも学習しており、JSXもbladeみたいなテンプレートエンジン族だと思っていた。
実際にはjavascriptの拡張記法。
margin-leftmarginLeftだったりclassclassNameな事にキレ散らかしていたが、classはjavascriptの予約語だし当然である。

あと、bootstrap4普通にいい感じだった。

今後なんとかしたい点

・バグ潰し(xの調整がうまくいってない)

・canvasにして画像として保存できるようにする

頑張って作ったので使ってね。

クソアプリその2

「React完全に理解したし次いこう」
となってディープラーニングに手を出した。

エロゲの立ち絵っぽいか判定するマン
めっちゃ頑張って正解率96%まで伸ばしたが、
あんまりイイネがつかなくて悲しかったので誰か使ってほしい
何に使うかわからないが、せめて学習済みモデルだけでも。

ちなみに、冒頭で作ったカードゲームはつまらなかった。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away