vimよく使う操作まとめ

AtomVimバインドで最近コードを書いている。

頭の整理のため、よく使うコマンドをメモ

出来ること コマンド
単語一つ分戻る b
単語一つ分進む w
一つの行削除 dd
D 行のカーソル右側部分を削除
\dj \d行下へ
u 元に戻す
ea 単語の末尾でInsertMode
A 行末に移動し、InsertMode
I 行の先頭にテキストを挿入
R 現在選択している文字を新しい文字で上書き
x 文字の削除
X カーソル前の文字削除
zz 画面の真ん中の位置にする
i 単語の前にInsertMode
a 単語の後にInsertMode
\dG d行目に移動
( 文分を上に移動
) 文分を下に移動
>> 右にインデント
<< 左にインデント
gt 次のタブへ移動
gT 前のタブへ移動
gg 先頭行へ移動
G 最下行へ移動

React Native State

React Native (State)

前回に続き、ReactNativeの説明を行います。 今回は、Stateに焦点を当てます。

Stateとは

component内で使用出来る値となります。 値が変更(setStateを用いる)されるとrenderが走り、該当のcomponentが 再描画されます。

コード

以下にコードを記述します。

class ChildrenState で 親コンポーネント(ParentState)に 対して、propsを渡しています。 class ParentState では、内部でカウンタを持ち、setStateで1秒ごとに props(コンポーネント内部の変数)を変更しています。 propsが変更された際、renderメソッドが呼び出され、コンポーネントの再描画をしています。

class ParentState extends React.Component {
  constructor(props){
    super(props);
    this.state = {isShowingText: true};

    setInterval(() => {
      this.setState(previousState => {
      return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }
  render(){
    let display = this.state.isShowingText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class ChildrenState extends React.Component {
  render(){
    return (
      <View style={{alignItems: 'center', marginTop: 200}}>
        <ParentState text='state1' />
        <ParentState text='state2' />
        <ParentState text='state3' />
        <ParentState text='state4' />
      </View>
    );
  }
}

参考

React Native勉強メモ 〜Componentの基礎編〜

React Native Props

React Native (Props)

前回に続き、ReactNativeの説明を行います。 今回は、Propsに焦点を当てます。

Props

Componentが作成された際に異なったパラメータが作成されます。 その際に親から渡されたパラメータを Props と呼びます。

Props

以下では Helloというコンポーネントを定義しています。 メインで実行するclassはHelloChildremで、その際に Helloコンポーネントを呼び出した際に、props.nameを渡しています。

# App.js
class Hello extends React.Component {
  render(){
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class HelloChildren extends React.Component {
  render(){
    return (
      <View style={{alignItems: 'center', marginTop: 200}}>
        <Hello name='props1' />
        <Hello name='props2' />
        <Hello name='props3' />
      </View>
    );
  }
}

実行画面 f:id:jesushill:20180708202703p:plain

参考

React.js コンポーネント入門(props/state)

Props · React Native

React Native(Hello World)

はじめに

最近、React Nativeを勉強しています。 これから、ちょくちょく自分の頭の整理がてら、 色々と書き込んでいきます!

開発環境はExpoを用いました!

フォルダ構成

Expoから空のプロジェクトを作成した際、以下のフォルダ構成となります。

$ tree -L 2 --filelimit 10 | pbcopy

# 階層コピペ
.
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── node_modules [531 entries exceeds filelimit, not opening dir]
└── package.json

Expoを起動した際は、App.jsが起動(注)されるので 今回は、App.jsのみにコード記載していきます。

注) package.jsonmain: "node_modules/expo/AppEntry.js"と記載あり AppEntry.jsはApp.jsの読み込みを記載されている。

Hello World

Helloworldは以下の通りで表示できます。

この際、重要なのは以下の2点です。

  • export を用いて、module化
  • render メソッドを用いてcomponentを作成

※ component はググるといろいろと関連した記事がいっぱいできますが、 画面を描画する際のパーツを作っているといった理解でまずは良いと思います。

実際のコードは以下の通りとなります。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

export default class Test extends React.Component {
  render(){
    return (
      <View style={{alignItems: 'center', marginTop: 200}}>
       <Text>Hello World</Text>
      </View>
    );
  }
}

描画した画面は以下となります

f:id:jesushill:20180708144541p:plain

スプレッド演算子

スプレッド演算子とは

スプレッド構文 - JavaScript | MDN によると、

関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します

とあります。自分なりの言葉でいうと、 iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれるものといった感じでしょうか。

プログラム

以下ではプログラムを通じてスプレッド演算子の 使い方を例示していきます。

配列の結合

// 配列をpushする。
let arrA = [0, 1, 2];
let arrB = [3, 4, 5];

// 以下は、errorとなる。引数に配列を持てないため
arryA.push(arrB);
// スプレッド演算子(...)を用いると
// iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれる
arrA.push(...arrB);

// スプレッド演算子を使わないケースは以下の通り
arrC = Array.prototype.push(arrA, arrB)
console.log(arrC);

配列の中から最大値を取得

// 最大値
let arrD = [1, 2, 3, 4, 5];
// 配列を引数に持つことが出来る。
console.log(Math.max(...arrD));
// 通常のケースだとapplyを用いて引数を配列化
// 第一引数はthisを指定出来るが、使わないため、null
console.log(Math.max.apply(null, arrD))

分割代入

// 分割代入
// 配列やオブジェクトの要素を取り出して個別の変数に代入する
let aryE = [1, 2, 3];
let [a, b, c] = aryE;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

参考サイト

JSのスプレッド演算子を理解する

geth 起動方法、contractデプロイ

geth 起動方法

# port指定する
$ geth --datadir ./myDataDir --networkid 1114 -port 7545 --rpc console 2>> myEth.log

# ログ見るために
$ tail -f myEth.log
# アカウント作成
> personal.newAccount("<YOUR_PASSPHRASE>")
# Check your default account, type
> eth.coinbase
# To set your default account, type 
> miner.setEtherbase(web3.eth.accounts[0])
# Check your balance with 
> eth.getBalance(eth.coinbase)
# Run
> miner.start()
# end mining
> miner.stop()

command(geth上)

# 初期化 初回のみ 18000sアカウントを解除
personal.unlockAccount("0xb76be8f5914ca4ece4527ef7f065e64739aa52eb","<YOUR_PASSPHRASE>", 18000)

command(truffleディレクトリ)

# インストール 初回のみ
npm install --save truffle
# 初期化 初回のみ
$ truffle init
# contracts フォルダにcontract記述しておくことー
# contract compile
$ truffle compile
# build/contractsにファイル出来る。
# migrationファイル作成する。
$ truffle migrate --devlopment --rpc

設定ファイル

# truffle.js
# gasの量が少ないとデプロイ出来ない
module.exports = {
   networks: {
   development: {
   host: "localhost",
   port: 7545,
   network_id: 1114, // Match any network id
   gas: 2500000
  }
 }
};

イベント通知

参考

minerの方法

go ethereum - Deploy contract on private blockchain using Geth - Ethereum Stack Exchange

ポリモーフィックアソシエーション

ポリモーフィズムとは

rails でリレーション(1対多関係) を組む際に、一つのモデルに対して 複数のモデル リレーション を組む際に非常に便利です。

利点としては以下の通りです。

  • リレーション元のデータがどの モデル ID と紐付いているか、保存されている。
  • ↑により、外部キーは一元管理される。(複数の外部キー作らなくて良い!)

実行してみる

# relation
class Review < ActiveRecord::Base
  belongs_to :resource, :polymorphic => true
end

class Artist < ActiveRecord::Base
  has_many :reviews, :as => :resource
end

class Live < ActiveRecord::Base
  has_many :reviews, :as => :resource
end

class Disc < ActiveRecord::Base
  has_many :reviews, :as => :resource
end
#実行ファイル

disc = Disc.create(name: 'disc_test', info: 'disc_info')
disc.reviews.create(review_content: 'disc_review')

live = Live.create(name: 'live_test', info: 'live_info')
live.reviews.create(review_content: 'live_review')

artist = Artist.create(name: 'artist_test', info: 'artist_info')
artist.reviews.create(review_content: 'artist_review')

結果

Review f:id:jesushill:20180211142319p:plain

Artist(抜粋) f:id:jesushill:20180211142428p:plain

link

今回作成したプログラム Rails ガイド