vimよく使う操作まとめ
頭の整理のため、よく使うコマンドをメモ
| 出来ること | コマンド |
|---|---|
| 単語一つ分戻る | 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 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> ); } }
実行画面
参考
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.jsonに main: "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> ); } }
描画した画面は以下となります
スプレッド演算子
スプレッド演算子とは
スプレッド構文 - JavaScript | MDN によると、
関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します
とあります。自分なりの言葉でいうと、 iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれるものといった感じでしょうか。
プログラム
以下ではプログラムを通じてスプレッド演算子の 使い方を例示していきます。
配列の結合
// 配列をpushする。 var arrA = [0, 1, 2]; let arrB = [3, 4, 5]; // 以下は、errorとなる。引数に配列を持てないため arrA.push(arrB); # [ 0, 1, 2, [ 3, 4, 5 ] ] // スプレッド演算子(...)を用いると // iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれる var arrA = [0, 1, 2]; arrA.push(...arrB); #[ 0, 1, 2, 3, 4, 5 ] // スプレッド演算子を使わないケースは以下の通り 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
参考サイト
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
}
}
};
イベント通知
参考
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
Artist(抜粋)
