カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

github dist使ってみた

github でスニペットを作成できるというdist。

ただただmarkdownで書いた勉強会用資料を、勉強会で共有したいためだけに使ってみた。

勉強会用配布資料でgithub distにたどり着くまでの流れ。

  1. markdownでスライドが作成できる！Marpで資料を作成。 発表するだけならMarp上だけで良いが、実際にみんなでプログラムを動かしながら説明したいため、コードのコピペができるようにしたい。 ->エクスポートが必要。
  2. Marpでpdfエクスポートを実行。作成途中にはエクスポートできたが、完成後は画像が重すぎるのか失敗する。
  3. npm でmarkdown-pdf(https://www.npmjs.com/package/markdown-pdf)をインストール、nodeでpdfへ変換する。 ->コード部分に全角が混じる。
  4. github distにたどり着く

第1回vue勉強会資料 · GitHub

この記事上にリンクを貼ろうとしたら、埋め込み表示が・・・！

f:id:pocchi13:20170407012455p:plain

画像をupしてリンクを貼るのはちょっとめんどくさいけれど、 プライベートにもできるので、良さそう。

アルゴリズムパズルを考えてみた

ルール

3 * 3マス。 1から9までの数字を当てはめて、縦、横、斜めの合計を全て同じにするよくあるタイプ。

まず、合計値を推測します

1 2 3 4 5 6 7 8 9

一番小さい値が 1 一番大きい値が 9 真ん中の値が 5

なので、1 + 9 + 5 で 15 なんじゃないかと。 奇数なので、合計で10になるセットを2つの数字で組むと(1+9, 2+8, 3+7 とか・・・)、5だけ(5+5)でその数自身になって、あぶれますしね。 でも、なぜ？と言われると説明できない・・

合計値(45)を出して、列数の3で割るっていうのが、一番説明としてはしっくりきそうです。(45/3 = 15)

という2つの視点から、５が真ん中になるのが一番簡単そうですよね、 セットは10が作りやすいはずなので。

| - | - | - |
| - | 5 | - |
| - | - | - |

となると、どこかの対角線上に入るであろう数字は、例えば(1,9)

ここでポイントとなってくるのが9です。 9の来るライン上には、(8,7,6)は置けません。9と足すと、15以上の合計値ができてしまうので。 以下、ライン上が×。残りは○。

| × | ○ | × |
| × | 5 | ○ |
| 9 | × | × |

○のところにしか(8,7,6)は置けないのに2箇所じゃ足りない・・・

| × | ○ | ○ |
| 9 | 5 | × |
| × | ○ | ○ |

とすると、9が角にくることはなさそうです。

| × | 9 | × |
| 9 | 5 | 9 |
| × | 9 | × |

9が置けるのはこの4パターン

| - | - | - |
| 9 | 5 | 1 |
| - | - | - |

9が決まれば、1は1箇所に決まります。

| n | ○ | ○ |
| 9 | 5 | 1 |
| m | ○ | ○ |

○のところにしか入らないのは(8, 7, 6)。 とすると、残りの(2, 3, 4)が入るのは×のところです。そちらの方が選択肢が狭いですね。

9 + n + m =15 だとすると、 (n, m)は(2, 4)もしくは(4, 2)です。パターンとしては2つですね。

| 4 | ○ | ○ |
| 9 | 5 | 1 |
| 2 | ○ | ○ |

仮に当てはめます。とすると、４の対角や2の対角が埋められそうです。パターンは１です。

| 4 | ○ | 8 |
| 9 | 5 | 1 |
| 2 | ○ | 6 |

もう全部埋まりますね。

| 4 | 3 | 8 |
| 9 | 5 | 1 |
| 2 | 7 | 6 |

9の位置は4パターン 2,4が2パターン

5が真ん中の場合は4*2の8パターン存在します。

もっと解法がありそうだなぁ

markdown-pdfを使ってmdをpdfに焼いてみた

marpを使ってプレゼン資料を作成していたのですが、 資料が重すぎるのか、ページがそこそこ増えた結果、pdfにエクスポートできなくなってしまいました。

marpが大好きなだけに辛い・・

markdownをpdfに変換するツールは他にもあるだろうということで、 npmで簡単に導入できる

GitHub - alanshaw/markdown-pdf: Markdown to PDF converter

を使用してみました。

焼いたpdfがこちら

https://pocchi.github.io/docs/vue%E5%8B%89%E5%BC%B7%E4%BC%9A.pdf

これをそのまま勉強会の資料として配布したのですが、不評でしたw コードに全角が入っていて、そのままコピペできないというトラップ！！

レイアウトもそんなに綺麗にできませんでしたし(A4前提で作成していないので仕方がないのですが・・・)

何か他に良い方法を探します。。

Vue.js勉強会資料作成中(その2)

Vue.js 開発

Vue.js勉強会資料作成中(その1) - カメ飼ってる新米エンジニアの覚書き

のその2です。

では、はじめてみましょう！

Vue.jsの始め方(初心者用)

htmlを作成し、CDN読み込んじゃう

<!-- Vue.jsの読み込み -->
<script src="https://unpkg.com/vue"></script>

jsFiddleってやつ

https://jsfiddle.net/chrisvfritz/50wL7mdz/ 今回はこれ使います。 Forkを押して、自由に書き換えましょう Runで実行されます。保存はUpdate。 保存しなくてもRunできます。 URLを覚えておけば、いつでもアクセスできます。

他にも手段があるよ

3.vue-cliってのを使う(nodeを使うよ)

4.npmでインストール(nodeを使うよ)

[参考] https://jp.vuejs.org/v2/guide/installation.html

(ここでデザイナーさんにCDNって何？って言われた)

messageを変更してみよう

new Vue({
  el: '#app',
  data: {
    message: 'ここを変更してみて'
  }
})

変更後、Runをクリック！

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/1/

こんな書き方もできる

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p v-html="message">メッセージ</p>
</div>

v-htmlという属性をつければはじめに書いておいて、 置き換えることもできる。 {{生の文字列}}だが、v-htmlはHTMLとして扱える。

[参考]https://jp.vuejs.org/v2/guide/syntax.html#生の-HTML

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/2/

v-ifで出し分け

<div id="app">
  <p v-if="message">メッセージ</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: true
  }
})

[参考]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ https://jp.vuejs.org/v2/guide/#条件分岐とループ [こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/3/

message: falseに変更してみましょう

[変更後はこれ] https://jsfiddle.net/pocchi/rtec7eyh/4/

ところでv-ってなに

v- から始まる特別な属性をディレクティブと言います。

単一の JavaScript 式を期待します。 ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を ※DOM に適用すること。

さっきの例だと、 trueで挿入、falseで削除できるってこと ※DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。このDOMを操作することによって、要素の値をダイレクトに操作できます。

[参考・引用]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ http://piyo-js.com/05/dom.html

Vue.js側で値を変化させれば、 それにつられてHTMLも勝手に変わる

つまり、状態を管理しやすい ！

v-forでリストを表示する

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>

new Vue({
  el: '#app',
  data: {
     todos: [
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
    ]
  }
})

[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/5/

何をやっているのか

f:id:pocchi13:20170403233322p:plain todosの中身をtodoの中に上から1つずつ移し替えている

TODOリストを作ってみましょう！

TODOリストのTODOリスト

  • やることを入力する
  • やることリストを見る

    - やることが終わったら消す

TODOリストのTODOリスト

  • やることを入力する
  • やることリストを見る–>すでにできている！
  • やることが終わったら消す [以後の参考・引用] http://notsleeeping.com/archives/131

やることを入力できるようにしよう

<div id="app"><!-- この下から追記 -->
  <input v-model="inputText" type="text" />
  {{inputText}}<!-- この上まで追記 -->
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>

new Vue({
  el: '#app',
  data: {/* この下から追記 */
     inputText: null,
     todos: [/* この上まで追記 */
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
//以下省略

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/1/

フォームに入力すると値が取得できることは確認できた！

次は保存ボタンをつけたい！

<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>

new Vue({
  el: '#app',
  data: {
     /* --inputTextとtodosは中略-- */
  },/* この下から追記 */
  methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    }
  }
})/* この上まで追記 */

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/6/

どうなっているのか

f:id:pocchi13:20170403233414p:plain

どうなっているのか

f:id:pocchi13:20170403233440p:plain

これで、保存ができる！

後は削除するにはどうしたらいいのか！

<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}<!-- この下から変更！ -->
      <input type="submit"
      value="削除" 
      v-on:click="remove(todo.index)" />
    </li><!-- この上まで変更！ -->
  </ol>
</div>

 methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    },/* <-コンマをつけて、この下から追記 */
    remove: function(index){
        this.todos.splice(index, 1);
    } /* ここまで追記 */
  }

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/10/

何が起こっている？

f:id:pocchi13:20170403233459p:plain

コンポーネント化してみましょう！

f:id:pocchi13:20170403233515p:plain Sketchでいうシンボルに近い

<div id="app">
  <!-- 中略 -->
  <ol>
      <list-component 
      v-for="todo in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:text="todo.index"
      ></list-component>
  </ol>
</div>

new Vue({の上に追加

Vue.component('list-component', {
  template: '<li>{{text}}
             <input 
              type="submit" 
              value="削除" 
              v-on:click="remove(index)" />
             </li>',
  props:['text','index']
});

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/12/

削除が動かない！

f:id:pocchi13:20170403233532p:plain メソッドも渡してあげよう！ [参考]https://jp.vuejs.org/v2/guide/components.html#カスタムイベントとの-v-on-の使用

<list-component 
      v-for="todo in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:index="todo.index"
      v-on:remove="remove(todo.index)"
      ></list-component>

Vue.component('list-component', {
  template: `<li>{{text}}
             <input type="submit"
             value="削除"
             v-on:click="$emit('remove')"/></li>`,
  props:['text','index']
});

template: `` で囲まれていることに注意！ [こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/15/

動きましたか？

vue.jsのindexについて

Vue.js 開発

vue.jsでこの書き方できるんだと思ったら、そうでもなかったのでメモ。

<li v-for="todo in todos">
      {{todo.text}}
      <input type="submit" value="削除" v-on:click="remove(todo.index)" />
</li>

これで動いた気がしたから、いけるんだ！って思ったら、挙動がおかしかった。。

todo.indexのリストの値を削除するっていうclickのメソッドなんだけど、 一番最後のliを削除しようとすると、一番上のliが消える・・

んん？

値がうまく取れていないみたいでした。

<li v-for="todo, index in todos">
      {{todo.text}}
      <input type="submit" value="削除" v-on:click="remove(index)" />
</li>

やっぱり、横着せずにちゃんと書かないとね・・

iQuery セレクタ指定 eq(index)

jQuery普段あまり使わないんですが、セレクタの指定方法で初めて知ったものがあったのでメモ。

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

.active {
  background: #f00;
}

 $("li").eq(0).addClass("active");

eq(index)indexは0スタート。 0を指定したら

<ul>
  <li class="active">0</li>
  <li>1</li>
  <li>2</li>
</ul>

Vue.js勉強会資料作成中(その1)

Vue.js 開発

不肖ながら会社でVue.jsの勉強会を開くことになったので、 作成途中の資料をそれとなく載せておきます。(第1回前編)

Vue.js勉強会 vol.1

Hello Worldから始めるVue.js

対象者

Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやってみます。

JavaScriptってなに

f:id:pocchi13:20170328005020p:plain

PHP と JavaScript の ちがい

項目 JavaScript PHP
実行環境 ブラウザで動くので、ファイルを作成するだけでOK。 サーバーが必要。ファイルだけでは動かない。
実行タイミング 必ずイベントを指定する。ページロード時・クリック時、など ページ表示のタイミングのみ。
HTMLの変更部分 ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK。(非同期) 1箇所を書き換えるだけでも、１ページ丸々再度描画しないといけない。(同期)

ページ全部を変えたい時はPHP。 ちょっとだけ変えたい時はJavaScript。

何が違うんですか？

f:id:pocchi13:20170328005046p:plain

[ 参考 ] http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9

ライブラリとフレームワークのちがい

jQueryっていうライブラリ

よく使うものを集めたものがライブラリ。 もちろんjQuery以外もたくさんある。

jQureyは、JavaScriptをより扱いやすく、簡単に書けるようにしたもの。

そのライブラリの決まった記述で呼び出して扱う。

[参考コード] https://jsfiddle.net/pocchi/udhacmdo/8/

簡単なhoverの処理ですが、 jQueryで4行、JavaScriptで8行になってます。

[引用] https://webkikaku.co.jp/blog/webdesign/jquery_start/
[参考] http://semooh.jp/jquery/

Vue.jsというかフレームワーク

すでに決まっている設計に基づき、開発者は基本的には、そのひな形に沿ってコードを書いて行く。

[参考コード] https://jsfiddle.net/chrisvfritz/50wL7mdz/

ライブラリが部品なら、フレームワークはひな形 なので、一緒に使うことも可能。

[参考・引用] http://itpro.nikkeibp.co.jp/article/lecture/20070205/260697/?rt=nocnt http://pikurusux.hatenablog.com/entry/2015/05/28/123326

Vue.jsと他のJSフレームワーク

他にももちろんいっぱいJSフレームワークはあります。

f:id:pocchi13:20170328005137p:plain

などなどなど・・・いっぱいあるので、 開発に合わせて選択すること、 流行り廃れをなんとなく知っておくが必要。

Vue.jsの良きところ

  • 学習コストが比較的低め
  • 小中規模のシステムに向いている
  • 他フレームワークの良いところをあわせもち、現在も吸収していっている
  • 日本語リファレンスが充実していてわかりやすい。

なので、JSフレームワークこと初めには良いんじゃないでしょうか。