ケリーの姉の技術ブログ

ケリーの姉が仕事で学んだ技術に関するアウトプットを行うブログです。たまにゲームの作成秘話なんかも

オブジェクトリテラルの話

Vue.jsの入門書を読んだ話

みなさんこんにちは。久しぶりに更新するケリーの姉です。 現場が変わったり、現場が変わったり、勉強会に狂ったように参加して忙しかったのと、書くのが面倒だったのでサボっていました。よくないね。 今回は、javascript使いなら誰でも通る「オブジェクトリテラル」のお話をしようと思います。 知ってる人は読まなくていいです。

続きを読む

【黒歴史供養】ケリーの黒歴史ゲームをさらす

ケリーの話

みなさんこんにちは。ケリーの姉です。 ケリーの作品展示場からこちらに来てくれた方のなかには、「いつになったらゲームの話をするんだ？」という方もいらっしゃるかと思います。 新作ゲームですが、まぁ、仕上がっていませんね。 代わりといっちゃ何ですが、ケリーが昔作っていたゲームの話をしようと思います。 昔っから変わっていないな～という目でご覧ください。 では、以下からケリーの文章でお送りします。

続きを読む

Vue.jsの入門書を読み始めた話　その３

Vue.jsの入門書を読んだ話

こんにちは。ケリーの姉です。 今回はv-modelという仕組みについてのお話です。

v-model？

双方向データバインディングを行ってくれる指示方法です。 えっと、言葉が難しいなぁ・・・ 入力フォームに値を入れると、ページ上にそれが即反映されたりするページとか、見たことありますよね？ それを簡単に実現できるのがv-modelです。 とりあえず、コードを書いてみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>Hello! Vue.js World</title>
</head>

<body>
    <div id="app">
        <h1>Hello！{{ msg1 }}World！！</h1>
        <p>ようこそ{{ msg1 }}の世界へ。</p>
        <p>世界の名前を変えてみる？→<input type="text" name="inStr" v-model="msg1" /></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="./js/changeWorld.js"></script>
</body>

</html>

inputタグに「 v-model="msg1"」という、双方向バインディングを指定しました。 これでinputタグの入力値とmsg1プロパティがお互い同期するようになります。 そしてjsファイル

changeWorld.js

var app = new Vue({
    el: '#app',
    data: {
        msg1: 'Vue.js'
    }
});

こざっぱりとしてるぅー！

じゃあ、実行してみましょう。

f:id:kerry_no_ane:20190630170851p:plain

はい、msg1に定義された文字列がinputタグの初期値として出ていますね。 じゃあ、このinputの中身を変更してみます。

f:id:kerry_no_ane:20190630172228p:plain

お分かりいただけたでしょうか？inputの入力値によって、msg1の値が変更になる→表示内容も合わせて変わる

コレが双方向バインディングです。 これとメソッドをうまく組み合わせると、表現の幅が広がります。

回文チェッカーを作ってみよう

v-modelとメソッドを組み合わせて、入力された文字列が回文（上から読んでも下から読んでも同じ文）になっているか？を動的にチェックするページを作ってみます。

まずはhtml

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>それは回文ですか？</title>
    </head>

    <body>
        <div id="app">
            <h1>回分チェック</h1>
            <p>文字列を入力→<input type="text" name="inStr" v-model.trim="inStr" /></p>
            
            <p>入力された文字は「{{inStr}}」これは・・・</p>
            <p>{{ kaibun() }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script src="./js/inputEvent.js"></script>
    </body>
</html>

inputのv-modelが「v-model.trim="inStr"」となっていますね。inStrプロパティをバインドしています。 v-modelにtrimをつけると、前後の空白を自動消去した上でjs側に値を渡してくれますまあ便利。

んで、「kaibun()」というメソッド呼び出し部分で、inStrに入力された文字が回文か否かの結果を表示してくれます。 「kaibun()」が定義されているinputEvent.jsの中身はこんな感じです。

var app = new Vue({
    el: '#app',
    data: {
        inStr: ''
    },
    methods: {
        kaibun: function() {
            if (this.inStr.length == 0) return;
            var rStr = this.inStr.split('').reverse().join('');
            if (this.inStr == rStr) {
                return '回文です!';
            } else {
                return '回文ではありません';
            }
        }
    }
});

methodsにkaibunという処理が書かれています。 inStrの入力値の長さを見ており、0なら処理を行いません。 入力値が1以上の場合、split関数で文字を配列にします。「こんにちは」なら['こ', 'ん', 'に', 'ち', 'は']といった配列になります。 reverse関数は、その名のとおり「逆転」させます。['こ', 'ん', 'に', 'ち', 'は']の配列を['は', 'ち', 'に', 'ん', 'こ']に変化させます。 最後にjoin関数で配列を連結し、ひとつの文字列にします。['は', 'ち', 'に', 'ん', 'こ']を「はちにんこ」にして、rStr変数に代入します。

回文なら、最初に入力された文字列と逆転した文字列が一致するはずなので、一致したら「回文です！」しなかったら「回文ではありません」の文字を返します。 こうして返された文字が、html側のkaibun()とかかれたところに出力されるわけですね。 なるほど簡単だ。

ちなみに、実行するとこんな感じになります。

○初回起動時

f:id:kerry_no_ane:20190630172715p:plain

○Not 回文

f:id:kerry_no_ane:20190630172737p:plain

○回文

f:id:kerry_no_ane:20190630172808p:plain

このように、v-modelは入力値を動的に処理させたい場合に向いています。 私の現場では、v-modelでバインドした値をTypeScriptで処理してC#に送信、非同期で帰ってきた値を戻してv-modelでバインドされた値を変える・・・という処理を多様していますね。

次回は文字列以外のバインドについて書いていこうと思います。ではまた！

Vue.jsの入門書を読み始めた話　その２

Vue.jsの入門書を読んだ話

こんにちは。ケリーの姉です。 さて、前回は第一歩となる「Hello！World！」を出すことができました。

今回はそれをベースに「入力」「クリック」といった、簡単なイベント処理を行っていきます。

続きを読む

Vue.jsの入門書を読み始めた話　その１

Vue.jsの入門書を読んだ話

こんにちは。ケリーの姉です。 Vue.jsの入門書を読み始めたので、その学習のアウトプットを行っていきます。 ※学んだことをつらつらと書いているだけなので、読みにくいところもあると思います。あらかじめ、ご了承ください。

続きを読む

C言語のポインタを理解した話

C言語の話

こんにちは。ケリーの姉です。 家の片づけをしていたら、入社したてでフレッシュだった時代に仕事内容を一生懸命メモしていたノートを発見しました。

そのノートには、当時「Javaの知識を生かせる現場だよ」とだまされて「C言語開発」の現場に飛ばされた私が、C言語を理解するために一生懸命メモした内容が書かれていました。

今回は、そのメモから「ポインタ」のお話を書いていこうと思います。

続きを読む

はじめまして

ご挨拶

はじめまして。ケリーの姉と申します。

かつて、へんたいサーガというゲームを筆頭とした変なゲームをリリースしたケリーの「姉」でございます。

 

実は私、本業はプログラマーでして、今の会社にかれこれ15年ほど在籍。(ブラックに近い企業だが、転職が面倒だった)

現在はフロントエンドエンジニアとして、働いています。


いろいろあって転職を考えた時、一つの壁にぶつかりました。

 

「私、ポートフォリオがない！」

 

フロントエンドエンジニアの求人はポートフォリオの提出を求める企業も多く、スタートアップ企業が有名ベンチャーなんかは、ポートフォリオなしだと面接してくれません。

今まで沢山のサイトやシステムを構築してきましたが、会社の仕事で作ったものは会社のモノになるので、私のポートフォリオとしては使えないのです。

 

困り果てていたら、とても優秀な人から「ポートフォリオも大事だけど、ブログで技術発信するだけでも違うよ」とのアドバイスをもらったので、今回実践しようと思い、ブログを立ち上げてみました。

前置きが長くなりましたが、
そんなこんなで自分の技術アピールのための記事をメインに、ケリーとのゲーム制作小話や社会人の苦労話なんかも書いて行く予定です。
まったりと応援してもらえるとうれしいです！

ブログに登場する主な登場人物

ケリーの姉

このブログを書いている人。ケリーが作ったゲームを世に送り出す能力がある。

新卒からSES企業に入社し、いろいろな現場をまわって15年。

現在はフロントエンドエンジニアとして落ち着き、やっぱりSESとして現場で働いています。 

経験言語

使用経験のあるソフト

資格 (覚えているもの)

  • 基本情報＆応用情報
  • 色彩検定2級
  • ウェブデザイン技能検定3級

超簡単な経歴

いろいろあってSES企業に就職

→Cの現場

→Cの現場その２

→議事録を延々と取り続ける現場（鬱になりかける）

→テストを延々とする現場

→リーマンショックで仕事が激減。自社で統計情報の添削という内職をする

→駄目元で受けたSESの面談に合格。パチンコ屋のシステムのテストをする現場

→パチ屋の現場からの紹介で洋服の通販のシステムのテストをする現場

→テストばかりの仕事に嫌気が差し、自社に退職を願い出たら自社開発に移動（自社開発部署ができていた）

→自社でWebデザインと構築をやり続ける。

→いろいろあって、ほかの会社の開発スタイルも見たくなり、SESで外の現場に行きたいと願い出る。

→現在、スーパーホワイトな現場でVue.jsとTypeScriptとC#で開発のお仕事中。

※ここで3年目の社員さんの給料（ボーナス抜き）と私の給料（年棒なのでボーナス込み）の手取りが一緒という事実をしる。

また、社長が「頑張らないとAIと外国人労働者に仕事とられるぞ」という旨の話を全社員ミーティングで連呼するようになり、転職を強く意識するようになる。

 

その他、補足事項

得意なのは「デザイナーが創造したデザインを、そのままwebページにする」事です。どんな無茶振りなレスポンシブデザインでも、フレームワークを使わずに手で組んでいます。（最近はフレームワークを使用する企業のほうが多いので、逆にそっちを学ばないとなぁと思っています）

1年ほどWebデザインをやっていたこともあり、サイトの構成やデザインもできます。（得意なのはLP）

 更新をほとんどしていないノリで作ったケリーの作品展示場のデザイン＆構築も私です。

 駆け出しの頃に作ったので、今見ると雑な作りだなぁと思います。

ケリー

いわずもがな、へんたいサーガをはじめとする残念すぎるゲームの生みの親。

最初の開発の勢いはすごかったが、作っては途中で破棄、作っては途中で破棄・・・という、こだわりの強い開発のせいで全然新作が作れていません。

ちなみにケリーは姉とは全く異なる職業についています。なんでゲーム開発会社に行かなかったのか不思議でたまりません。