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

とにかくカメがかわいい

CasperJSで非同期部分をテストしたい

firefoxの仕様か何かで、iframeのadがうまく表示されないということがありました。 実装を非同期のものに変えたのですが、 非同期実装した広告が出ているかどうか、テストがしんどいと思い、CasperJSでE2Eテストを実装しました。

デフォルトで要素を待って実行できるなんて、Casperさんは偉い。 .hogehoge要素を待って、要素を取得します。

casper.waitForSelector(".hogehoge", function _then() {
          //要素取得
          this.test.assertExists(".hogehoge");
        },function _onTimeout(){
          //タイムアウト時
          this.echo("hogehoge not found", "WARNING");
          this.test.assertExists(".hogehoge");
        });

jsのObjectで.mapしたらはまった 

//オブジェクトを作成
var tagNameArray = ["name1", "name2"];
 
 var pushObjs = {};
    tagNameArray.map(function (tagName, index){
      pushObjs[index] = {
        "tagname": tagName,
        "size": "3",
        "id": index
      };
    });

//勘違い実装
pushObjs.map(function (pushObj){
    consoel.log(pushObj);
});

ってやると死にます。死にました。 配列の時だけ.mapしましょう。。

for (var i in pushObjs) {
   pushObjs[i].map(function (pushObj){
    consoel.log(pushObj);
   });
}

これもダメです。

for (var i in pushObjs) {
    console.log(pushObjs[i]);
}

大人しくこうしておきますか・・・

ていねいにvue-cliを使った環境構築手順を書いてみる

Vue.js 開発

Vue-cli環境構築

vue-cliで簡単にvue.jsの環境構築ができます。

前提条件

以下がインストールされていること

  • node.js
  • npm

ver

node -v npm -vでインストールされているバージョンが確認できます。

インストールしていない方はしてください。 nodeはnodebrewなどを使用して、バージョンを管理しておきましょう。

1.ターミナルを開きます。

spotlight(command+space)で ターミナルって入れると候補で出してくれます。
ターミナルを開くよ

vue-cliをインストールします

npm install -g vue-cli

vue-cliインストール

インストールが始まります。
ちょっと長いかも・・・

インストール

終わりました。

プロジェクトを作成します

vue init webpack my-project

init

webpackをボイラーテンプレートとしてプロジェクトを作成します。

色々聞いてきます。

projectname

EnterでOK

description

EnterでOK

author

EnterでOK

runtime

EnterでOK

install

yを入力

lint
lintの設定ですね。慣れないうちは、ここはnにしておきましょう

unit

テストの環境を構築するかどうか？にします

e2e
こちらはe2eテストの環境ですね。nにします

project作成終了
project作成終了です

まだ終わっていません！

cd my-projectでディレクトリを移動します。

cdするよ

これで、現在地はmy-projectです

npm installします。
ちょっと長いです。 package.jsonに記載してある依存モジュールをインストールしています。

npminstall

終わりました
終わりました。

起動します

環境構築は完了です。
立ち上げてみましょう！
npm run devでローカルのnodeサーバーが起動します。

npmrundev

npmrundev
URLを教えてくれるので、アクセスしてみましょう。
この場合はhttp://localhost:8080です

vue

開きました！

起動したサーバーはctrl+cで終了することができます。

便利ツールを導入しておきましょう！

vue.js devtoolsというchromeのアドオンがあります。

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

vue

先ほど立ち上げたhttp://localhost:8080で、このように使うことができます。

導入後

環境構築は以上です！！

参考

jp.vuejs.org

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/

動きましたか？