日付変わりまして2019年2月6日、サポーターズCoLab勉強会【超初心者向け】Vue.jsに触れてみように参加させていただきました。
覚書と簡易レポです

サポーターズについて

まずサポーターズについての説明がありました supporterz.jp

サポーターズは大まかには学生の方や社会人の特に20代を中心に対象にしたキャリア支援を行ってます。
特に地方から都内に就職する際の支援を行なっています。

交通費支給制度

なんと新幹線や飛行機代といった交通費を支給する制度があるようです。
私も地方から東京に転職した身なので、新幹線代は多いときは月15万ほど飛んだ記憶があります。
特に学生さんや社会人経験1〜3年の方には非常にありがたい制度だと思います

勉強会開催

また今回のハッカソンのように、あまり開発経験がない方や若手エンジニアに向けた勉強会もほぼ毎日行われてます。
サポーターズColabに登録すると勉強会やキャリア相談の案内がメールにてほぼ毎日届きますので
エンジニア志向の方は登録するといいかなと思います。

発表者について

今回の発表者は@tkt様

本日登壇させて頂きました。
改善点もたくさん見つけられたので、次の登壇に活かします…！└( 'Д')┘
#spzcolab https://t.co/pUDRwgUKR7
— tkt (@mfisndk) 2019年2月6日

現在はインターン中でRailsで開発されている方のようです
今回が初登壇ということのようですが、初めてのVue.jsということで、自分のような本当に初めてVue.jsに触れる方でも非常にわかりやすい説明で無事着いていけました。
周りも手が止まっている方が少なかったように見えます

Vue.js

以下、Vue.jsに関する覚書です

Vue.jsとは

Vue.js(viewと同じ発音だそうです)はGoogleにおいてAngularJSを使用した開発に携わったエヴァン・ヨーによって開発されている、クライアントサイド Javascirptフレームワークです。
まあ非常におおっぴらにいうとJS使うWebページの場合、使ってて損はないですよってことらしいです。

使うには、公式からvue.jsにアクセスできるコードを引っ張ってきて、htmlのheaderに貼り付けるのが良さそうです

<head>
    <title>あああ</title>
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>

</head>

jp.vuejs.org

Vue.js概要

ハンズオンではV-model、V-on、V-bindの紹介がありましたのでそれぞれの使用方法についてご説明がありました

V-model

公式ドキュメントを見ると

input 要素や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成する

うーんよくわからん。
簡単にいうと、jsで設定した値をhtmlに出力することができまっせ
ってことのようです。

以下のようにすると、textareaの初期値をjs内で設定した値を出力したり
jsで定義した値がhtmlに渡してあげることができます

この例ではjsで定義したsample:"いいいいい"が
htmlのtextareaの<v-model="sample">と
pタグ内の{{sample}}に渡されることで
"いいいいい"が表示されます

<body>
    <h1>hello,world</h1>
    <div id="app">
        <textarea v-model="sample"></textarea>
        <p>{{sample}}</p>
     </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            sample: "いいいいい",
        }
    })
</script>

V-on

V-onはこれは生のjsで言う所のonclickですね。
buttonを押すとbuttonに定義していたメソッドがjs内の同メソッドを発火させるやつです

下記のように設定することでリセットボタンを押すことで
methodsのreset: function () が動き、
この例ではsampleに定義してある値が消えます

<body>
    <h1>hello,world</h1>
    <div id="app">
        <textarea v-model="sample"></textarea>
        <p>{{sample}}</p>

        <button v-on:click="reset">リセット</button>
    </div>


</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            sample: "いいいいい",
        },
        methods: {
            reset: function () {
                console.log("reset")
                this.sample = ""
            }
        }
    })
</script>

f:id:onthebacksoftheflyer:20190208014234g:plain:w300

V-bind

V-bindはhtmlのクラスを動的に扱うときに使用します。

例えば下記のようにすることで、チェックボックスのチェックの有無により
真偽値を変更することができます
以下の例ですと、チェックボックスにチェックを入れることでisActiveの真偽値が代わり
その度にpタグのshowクラスが変化し、"あああ"が表示したり消えたりします

<body>
    <h1>hello,world</h1>
    <div id="app">

        <input type="checkbox" v-model="isActive">
        <p v-bind:class="{ show: isActive}">あああ</p>
    </div>
</body>
<style type="text/css">
    p {
        display: none;
    }

    .show {
        display: block !important;
        /* Background-color: black; */
        Position: fixed;
    }
</style>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            sample: "いいいいい",
            isActive: false
        },
        methods: {
            reset: function () {
                console.log("reset")
                this.sample = ""
        }
    })
</script>

f:id:onthebacksoftheflyer:20190208020012g:plain:w300

感想

周りが手が止まっていなく、ちょうどいい粒度でご説明であり、一日たってもある程度覚えているので
すごくわかりやすかったですね

あと、こういう勉強会の懇親会は参加して損はないと聞いていたが、
いろんなエンジニアやエンジニア志向の方の現状や
今自分が転職を視野に入れているが、似たような方を見つけることができましたので
懇親会も参加したほうがいいなと思いました
あとは自分自身が何者なのかを説明できるようになったほうがいいなと

On The Backs Of The Flyer

雑記

【勉強会参加】20190206サポーターズCoLab勉強会【超初心者向け】Vue.jsに触れてみよう参加レポ