ことはじめ

実験したり勉強したり。

Rubyことはじめ4

ことはじめ ruby

今日も今日とてパーフェクトRubyをやる

今日は第3章。覚えること多めなのですぐ入ってこないのは飛ばしてやった。

第3章

演算子

::の優先順位が一番高い

同値

  • ==演算子はほとんどのクラスで同値性を判断するメソッドとして定義されている
  • 同一インスタンスかどうかみたい場合はequal?メソッドを用いる
a = [1,2,3]
b = [1,2,3]

p a == b            # => true
p a.equal?(b)    # => false

unlessはifと同じ動きをする

n = 1

unless n.zero?
  p "nは0じゃない"
else
  p "0や"
end

=> "nは0じゃない"

後置if/unless

  • ifやenlessは最後に評価された値を返す
  • この戻り値を代入やメソッド呼び出しの引数として利用できる。
p '先に書くのか' if n == 1                  # => '先に書くのか'
p '先に書くのか2' unless n.zero?     # => '先に書くのか2'

パーセント記法

  • %はダブルクォートと同等
  • %qはシングルクォートと同等
  • %wは配列　式の展開はされない
  • %Wは配列　式の展開がされる
  • %i要素がシンボルの配列を作る

繰り返し

languages = %w(Perl Python Ruby)
i = 0

while i < languages.length
  p "Hello #{languages[i]}"
  i+=1
end

=> "Hello Perl"
=> "Hello Python"
=> "Hello Ruby"

例外処理

  • Exceptionを継承したクラスはたくさんあるのです・

Safe navigation operator (v.2.3以降)

  • ある値がnilでなければメソッドを呼び出したい的な
  • &.を用いる
people = %w(hoge hage huge)

person_0 = people[0]
person_9 = people[9]

p person_0&.capitalize   # => hoge
p person_9&.capitalize   # => nil

仮引数は省略可能

def hoge(text = 'Hi')
  p text
end

hoge
hoge('Yo')

ブロック

微妙な理解度

def block_sample
  p 'stand up'

  yield if block_given?

  p 'sit down'
end

# ブロックを渡さない場合
block_sample

# => "stand up"
# => "sid down"  

# ブロックを渡す
block_sample do
  p 'work'
end


# => "stand up"
# => "work"
# => "sid down"

感想

文化多すぎ、書き方多すぎ。 代表的な書き方を実戦で描いていかないと覚えらんないなあ。

Rubyことはじめ3

Ruby study ことはじめ

前回ProgateでRubyを学んで大まかに理解できたのは良かったけど、実務でのコードでは「？？？」となることが多かったのでこれは基礎を叩き込むしかないとおもい、パーフェクトRubyを購入してしまった。

改訂2版 パーフェクトRuby

改訂2版 パーフェクトRuby

2章の感想

わかったこと

ダブルクォートを用いた文字列の中には、#{...}を埋め込むことができる

name = 'foo'
p 'Hello #{name}' # => "Hello \#{name}"
p "Hello #{name}" # => "Hello foo"

グローバル変数は$からはじまる 定数は大文字からはじまる インスタンス変数は@からはじまる クラス変数は@@からはじまる

$hoge  # グローバル変数
Hoge   # 定数
@hoge  # インスタンス変数
@@hoge # クラス変数

モジュールについては要復習（namespaceなイメージしかわからなかった）

module Hoge
  class Fuga
    def poo
      p 'hoge huga'
    end
  end
end

module Hage
  class Fuga
    def poo
      p 'hage huga'
    end
  end
end

p1 = Hoge::Fuga.new
p2 = Hage::Fuga.new

p1.poo # "Hoge Fuga"
p2.poo # "Hage Fuga"

Setterメソッドは末尾にイコールをつける

def length=(val)
  @length = val
end

というか、attr_accessorをつければgetter, setterを一気に実装できる

attr_accessor :length

要復習のもの

  • Proc
  • symbol

GithubにSSH接続

github

sshフォルダに行く

$ cc ~/ssh

鍵を作成する

$ ssh-keygen -t rsa                                               
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/home/.ssh/id_rsa): hoge
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in hoge.
Your public key has been saved in hoge.pub.

鍵をクリップボードにコピー

pbcopy < ~/.ssh/hoge.pub

configファイルに以下の情報を追記

Host host-name
  User git
  Port 22
  HostName github.com
  IdentityFile ~/.ssh/hoge
  TCPKeepAlive yes
  IdentitiesOnly yes

接続テスト

$ ssh -T host-name

リポジトリにアクセスするときは…

git@host-name:username/git-test.git

RailsとVue.jsを合わせて使ってみる2

rails Vue.js

やったこと

サンプルアプリを作ったので自分でアプリを作ってみたい。 （今回完結しない）

開発手順

Rubyをインスコ

* `rbenv local 2.4.2`

Railsプロジェクト作成

$ rails new scalping_tester --webpack=vue

--webpack=vueを書いておくとそれごとインストールされる

画面を作る

$ rails g controller home index

devサーバーの設定

  • Webpack関連のファイルは変更したらコンパイルする
  • コンパイルにはbin/webpackというコマンドを使用するが、毎度押すのは大変面倒

foremanのインスコ

ForemanはProcfileから複数のプロセスを管理する Gemfileにイカを記載

gem 'foreman'

変更されたらbin/webpackの実行を行う

以下を作成

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev
web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server

bin/serverのパーミッションを変更

$ chmod 777 bin/server

これでbin/serverするとlocalhost:5000にサーバーが立ち上がる。

HTMLを作る

index.html.erbにとりあえずhtmlを作る

コンポーネント化する

<div id="app">
<div class="container">
    <navbar></navbar>
<!-- 設定 -->
    <div class="row">
        <setting></setting>
        <div class="viewer col-md-9">
            <!-- 最終結果 -->
            <result></result>
            <!-- 表 -->
            <chart></chart>
            <!-- 履歴 -->
            <history></history>
        </div>
    </div>
</div>
</div>
<%= javascript_pack_tag 'scalping' %>

ここではscalping.jsを読みに行くように設定する（一番下の行）

import Vue from 'vue/dist/vue.esm.js'
import Header from './components/header.vue'
import Setting from './components/setting.vue'
import Result from './components/result.vue'
import Chart from './components/chart.vue'
import History from './components/history.vue'

var app = new Vue({
  el: '#app',
    components: {
        'navbar': Header,
        'result': Result,
        'chart': Chart,
        'history': History,
        'setting': Setting
    }
});

それぞれの.vueファイルに内容を書く

<template>
    <div class="result">
        <h2 class="text-primary">シミュレーション結果</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>取引期間</th>
                    <th>取引回数</th>
                    <th>開始資産</th>
                    <th>終了資産</th>
                    <th>総利益</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2017/11/11 ~ 2017/12/12</td>
                    <td>10000回</td>
                    <td>12345円</td>
                    <td>876543円</td>
                    <td>3000円</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

できたこと

  • webpackを使ってWebコンテンツを構成するファイルをひとまとめにする
  • htmlのガワを作成

次にやること

  • グラフ表示
  • API開発
    • 外部のAPIラッパー開発
    • カスタムのAPI開発

railsにchart.js入れて動かす

js Vue.js chart.js rails

やりたいこと

rails + vue.jsでchart.jsを動かしたい。

作ったもの

f:id:kushamiju:20171121080557p:plain

vue-chartjsを入れる

GitHub - apertureless/vue-chartjs: 📊 Vue.js wrapper for Chart.js

$ yarn add vue-chartjs chart.js

Gemfileに以下を追加してbundle install

gem 'chart-js-rails'

jsの読み込み

app/asset/javascripts/application.jsに以下を追加

//= require popper
//= require Chart.min

描画

  • js側
// 前略
import VueCharts from 'vue-chartjs'

Vue.component('chartjs-line', {
  extends: VueCharts.Bar,
  mounted () {
    this.renderChart({
      maintainAspectRatio: true,
      repsonsive: true,
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          type: 'line',
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    })
  }
});
// 後略
  • html側
<div id="app">
    <chartjs-line :width="5" :height="2"></chartjs-line>
</div>

RailsとVue.jsを合わせて使ってみる

rails Vue.js ことはじめ

やったこと

以下の記事のTODOアプリを作った * Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた - Qiita

学習したこと

  • webpackerについて
  • Vue-Routerについて
  • RailsでAPI作る
  • Axiosを使ってAPI通信

→　Rails + Vue.jsでSPAっぽいものを作れそう。

webpacker

Vue-Router

Vue-Routerを使用することで、登録されたパスとコンポーネントで画面内を差し替える（SPAっぽい）

Vue.use()でプラグインの使用（今回はVue-Router） またVue-Routerの使い方を見ないといけない…

npm install vue-router --saveしてなくてハマった…w

  • VueRouterを使用すると、<router-link>と<router-view>というタグを使用できる
    • <router-link>は<a>タグとして変換するが、画面遷移でなく、VueRouterに登録されたパスからコンポーネントを探す
    • そして<router-view>の部分に表示する

その他メモ

  • インストールでハマった。webpackerのインスコとvueのインスコもれでした
    • rails webpacker:install
    • rails webpacker:install:vue
  • Node.jsの界隈では、機能ごとに分割されたJavaScriptファイルのことを一般的に「モジュール」と呼ぶ
  • webpack関連のファイルは変更したらコンパイルする必要がある

  • foreman は、Procfile を読み込み、複数のプロセスを管理できるツール。

  • RailsのAPI作成はだいぶ楽そうだけど手順がよくわかっていない。

    • これは別でやればいいと思うから飛ばす

  • document.querySelector: 与えられたCSSセレクタにマッチする文章中の最初の要素を返す

  • classList: class属性のトークンリストを返す
    • #finished-tasksを引っ張ってきて、.display_noneの追加削除を交互に行うことで表示非表示を行う

Vue.jsことはじめ2

Vue.js ことはじめ study

今日やったこと

学んだこと

結構番所に近いけどただ読むだけだと本当に覚えないなという印象

Viewインスタンスの作成

  • VueのデザインはMVVMパターンから部分的に影響を受けているので慣例としてインスタンス名がvmになっている
  • Vueアプリケーションはnew Vueで作成されたRoot Vue Instanceで構成される
  • Vueインスタンスが作成されると自身のdataオブジェクトのすべてのプロパティをリアクティブシステムにつかえる
  • dataのプロパティはインスタンスが作成された時に存在していた場合にのみリアクティブ

インスタンスライフサイクルフック

  • Vueインスタンスは生成時に一連の初期化を行う
    • データの監視のセットアップ テンプレートのコンパおる DOMへのインスタンスのマウント データが変化した時のDOMの更新
  • ライフサイクルの特定の段階でユーザーが自身のコードを追加する、いくつかのライフサイクルフックと呼ばれる関数を実行する
    • iOSでいうviewDidLoadみたいな感じかな
    • created
    • mounted
    • updated
    • destroyed

テンプレート構文

展開

テキスト

最も基本的な形は二十中括弧をりお湯したテキスト展開

<span>Message: {{ msg }}</span>

生のHTML

v-htmlディレクティブを使うことで実際のHTMLを出力することも可能

<div v-html="rawHTML"></div>

var vm = new Vue({
        el: '#app',
        data: {
            rawHtml: '<h1>hello</h1>',
        }
    });

XSS脆弱性を容易に引き起こすのでウェブサイトで動的に任意のHTMLを描画することは超危険

属性

HTMLの属性をデータバインディングするときはv-bindを使う

<img v-bind:src="image"></img>

var vm = new Vue({
    el: '#app',
    data: {
        image: 'http://img.allabout.co.jp/gm/article/7182/mainimg.jpg'
    }
});

v-bindは省略可能

<img :src="image"></img>

JavaScript式の使用

すべてのデータバインディング内部でJavaScriptを完全にサポートする

ディレクティブ

  • ディレクティブはv-から始まる特別な属性。
  • ディレクティブ属性値は単一のJavaScript式を期待する（v-forは例外）
  • ディレクティブの仕事は属性値の式が変化した時にリアクティブに副作用をDOMに適用すること

省略記法

v-bind

<a :href="url"></a>

v-on

<a @click="doSomething"></a>