neovimをインストールしてdein, deniteの導入まで

環境

mac os 10.13.2

python3のインストール

# install
brew install python3

# PATH_setting (bashやらzshの設定ファイルに記述してください)
export PYTHONPATH=python3:pip3

neovimのインストール

pip3 install neovim

deinのインストール

# get installer.sh
curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > ./installer.sh

# run installer.sh
sh ./installer.sh ~/.cache/dein/. ; rm ./installer.sh

以下のようなことを~/.config/nvim/init.vimに書きます

"dein Scripts-----------------------------
if &compatible
  set nocompatible               " Be iMproved
endif

" Required:
set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim

" Required:
if dein#load_state('~/.cache/dein')
  call dein#begin('~/.cache/dein')

  " Let dein manage dein
  " Required:
  call dein#add('~/.cache/dein/repos/github.com/Shougo/dein.vim')

  " Add or remove your plugins here:
  call dein#add('Shougo/neosnippet.vim')
  call dein#add('Shougo/neosnippet-snippets')
  call dein#load_toml('~/dein.toml')
  if !has('nvim')
    call dein#add('roxma/nvim-yarp')
        call dein#add('roxma/vim-hug-neovim-rpc')
  endif

  " You can specify revision/branch/tag.
  call dein#add('Shougo/deol.nvim', { 'rev': 'a1b5108fd' })

  " Required:
  call dein#end()
  call dein#save_state()
endif

" Required:
filetype plugin indent on
syntax enable

" If you want to install not installed plugins on startup.
"if dein#check_install()
"  call dein#install()
"endif

"End dein Scripts-------------------------

package管理用dein.tomlを~/直下に置いています dein.tomlは以下のような感じです.

[[plugins]]
repo = 'Shougo/dein.vim'

deniteのインストール

dein.tomlに以下のように追加します

[[plugins]]
repo = 'Shougo/denite.nvim'

vimを起動して,:call dein#update()やら:UpdateRemotePluginsを打ってインストールしてあげます

:Denite grepなどと打ってDeniteが起動したら完了です

感想

ぼちぼち楽

neovimにminpacを導入してみた

こんにちは,ミツバです. 今回はneovimに切り替えた時に,package managerどうしようかなぁと考えつつminpacを導入してみた時の備忘録です.

github.com

neovimのinstall

brewでinstallできました.

brew install neovim

minpacの導入

install

以下のコマンドでinstallします.

git clone https://github.com/k-takata/minpac.git ~/.config/nvim/pack/minpac/opt/minpac

config

neovimの設定ファイルは~/.config/nvim/init.vimに置くので,なければ作ります. そして以下の内容を追加しました.

set packpath^=~/.config/nvim/pack/minpac/opt/minpac
packadd minpac

call minpac#init()

" minpac must have {'type': 'opt'} so that it can be loaded with `packadd`.
call minpac#add('k-takata/minpac', {'type': 'opt'})

" Add other plugins here.
call minpac#add('vim-jp/syntax-vim-ex')
" ...

" Load the plugins right now. (optional)
"packloadall

これでcall minpac#init()コマンドなどをneovim上で打つと動くと思います.

以上です.

P.S. dein.vimに乗り換えました

reduxについての自分的なメモ

reduxについての自分的なメモ

先日reduxについていろいろ学んだので、自分なりにまとめてみました.多少間違っている箇所あるかもしれませんが,温かい目で指摘してもらえると助かります.

reduxは以下の記事が参考にしつつ頑張りました.

hello world

今回はcreate-react-appを利用して書いていきました.

npm install -g create-react-app
create-react-app my-app

以上のコマンドでmy-appというディレクトリができると思います. cdでそのディレクトリに移動して中身を確認します.

~/my-app >>  ls
README.md         node_modules      package-lock.json package.json      public            src
~/my-app >>  tree src/
src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

以下のコマンドを実行することでlocalhost:3000にアクセスするとWelcome to Reactと表示されると思います.

npm install
npm start

reduxアーキテクチャの導入

今のままだとただのReactなので,少しずつReact + Reduxの形にしていきます. 今回は以下のサンプルを参考にコードを書いていきます.

とりあえずいらないファイルを削除します.

rm src/App.js
rm src/App.css
rm src/App.test.js
rm src/index.css
rm src/logo.svg
rm src/registerServiceWorker.js

reduxをinstallします.

npm install redux
npm install react-redux  

src/index.jsの内容を変更します.

  • src/index.js
import React from 'react';
- import ReactDOM from 'react-dom';
- import './index.css';
- import App from './App';
- import registerServiceWorker from './registerServiceWorker';
+ import { createStore } from 'redux';
+ import { Provider } from 'react-redux';
+ import App from './components/App';
+ import reducer from './reducers';
+ import { render } from 'react-dom';

- ReactDOM.render(<App />, document.getElementById('root'));
- registerServiceWorker();

+ const store = createStore(reducer)
+ render(
+   <Provider store={store}>
+     <App />
+   </Provider>,
+   document.getElementById('root')
+ )

必要なディレクトリを作成していきます.

mkdir reducers
mkdir containers
mkdir components
mkdir actions

とりあえずcomponentにApp.jsを作成します. このApp.jsがindex.jsに呼ばれて,こいつがいろいろ呼んでいきます.

  • components/App.js
import React, { Component } from 'react';
import AddUser from '../containers/AddUser'

class App extends Component {
    render() {
        return (
            <div className="App">
                <AddUser />
            </div>
        );
    }
}

export default App;

container

とりあえずAddUserというcontainerを呼びます. このcontainerとはcomponentを呼んだりactionを呼んだりする発火点的な役割の場所です.

  • containers/AddUser.js
import React from 'react'
import { connect } from 'react-redux'
import { addUser } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addUser(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add User
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

これはpreventDefault()を呼ぶことによって本来のsubmitを止めて,dispatchを呼んだ後inputを空にする処理を記述しています. 試しにe.preventDefault()を消すとページが更新されてしまいます.ページが更新されてしまうとフロント側で保持していた状態が消えてしまうのでとりあえずページ更新を行わないようにする感じです.

ここでAddUser.jsでは,dispatchが呼ばれています.この関数はactionの関数を引数として呼び出します.そしてactionreducerを呼んで,その後reducerが状態を更新するという処理が実行されます.詳しくは後述します.

action

actionを作成します.このactionは,dispatch関数で呼ばれる関数を記述する場所です.

  • actions/index.js
let nextTodoId = 0
export const addUser = (text) => ({
    type: 'ADD_USER',
    id: nextTodoId++,
    text
})

ここではaddUserという関数を定義しており,これはtextをもらってきて,type, id, status, textを入れたオブジェクトを返します.

reducer

reducerはactionの返したオブジェクトを受け取り,action.typeによって処理をいろいろと変えられる場所です.

  • reducers/index.js
import { combineReducers } from 'redux'
import users from './users'

const App = combineReducers({
  users
})

export default App
  • reducers/users.js
const users = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [
        ...state,
          {
              id: action.id,
              name: action.text
          }
      ]
    default:
      return state
  }
}

export default users

index.jscombineReducersを呼んでいることがわかると思います.これは複数のreducerをまとめることができる凄いやつです. 肝心のreducerは別ファイルのusers.jsに書いておき,index.jsで呼び出します. これで複数ファイルにreducerを分けられます.(便利)

reducerでやっていることは,action.typeでswitch caseを書いて,変更した状態をreturnする感じです.今回のstateはArrayですが,Objectなども返せます.

これで一通りの登録処理が終わったので,ここから追加したuserを表示するcomponentを作成していきます.

UserListの作成

追加されたUserを表示するためのcontainerとcomponentを作成していきます. まずcontainerから.

  • UserList.js
import { connect } from 'react-redux'
import UserTable from '../components/UserTable'

const mapStateToProps = (state) => ({
  users: state.users
})

const UserList = connect(
  mapStateToProps
)(UserTable)

export default UserList

connectというものが呼ばれているのがわかります.これはstateやらactionやらを渡してcomponentを作成できる便利なやつです. 渡されたstateやcomponentはcomponentがそのまま使用できます.

次にcomponentです.

  • UserTables.js
import React from 'react';

const UserTables = (users) => (
    <table>
        {users.users.map(user =>
            <tr><td>{user.id}</td><td>{user.name}</td></tr>
        )}
    </table>
);

export default UserTables;

これでnpm startすると以下のようなページになっていると成功です.

f:id:MitubaEX:20171215000115p:plain

記事を追加するとこんな感じです.

f:id:MitubaEX:20171215000147p:plain

所感

reduxはexample見ても頭がぶっ飛んでいたので,一から自分で作りました. 他にも使っていない機能(middlewareなど)があるので,それもまた触っていきたい.

macにmongodbをinstallして起動するまで

brewでmongodbを入れて起動するまでを行ったので,そのメモです.

install

brew update
brew install mongodb

run

mongod

ここで以下のようなエラーが出ました.

2017-11-23T00:15:39.775+0900 I STORAGE  [initandlisten] exception in initAndListen: 29 Data directory /data/db not found., terminating

どうやら/data/dbが見つからないらしい

fix

sudo mkdir -p /data/db

mongodコマンドで起動することができました.

run mongo client

mongo

これでmongodbにアクセスできました.

以上.

Xcodeでボタンを押すとラベルが変化するHello World的なものを作ってみた

やること

  1. Xcode開く
  2. Projectを作成する
  3. storyboardにLabelとButtonを置く
  4. LabelとButtonのリンクをViewControllerに貼る
  5. コード書いて終わり

Project作成まで

Xcodeを開き,Create a new Xcode Projectを選択する

f:id:MitubaEX:20171031005216p:plain

そのままNextを押す

f:id:MitubaEX:20171031005353p:plain

プロジェクト名などは適当に書く

f:id:MitubaEX:20171031005421p:plain

storyboard作成まで

Main.storyboardを選択し,Labelやボタンを配置する

f:id:MitubaEX:20171031005546p:plain

こんな感じ

f:id:MitubaEX:20171031005606p:plain

右上の円みたいなやつを押す

f:id:MitubaEX:20171031005847p:plain

storyboardとソースコードが並びます.

LabelやButtonを選択した状態で,Ctrlを押しながらコードの方までカーソルを持っていってリンクさせる
  • labelという名前で作成

f:id:MitubaEX:20171031010034p:plain

  • buttonという名前で作成

f:id:MitubaEX:20171031010220p:plain

buttonはconnectionをactionに変更する.

ソースコード変更

button関数の中身を以下のように変更する
@IBAction func button(_ sender: Any) {
        label.text = "hello"
}

完成

左上の再生ボタンのようなものを押して,実行してみる.

before

f:id:MitubaEX:20171031010519p:plain

after

f:id:MitubaEX:20171031010550p:plain

PythonでPOSTリクエストをrequestsを使って送信する

install

pip install requests

使い方

以下のようにして使用できました.

import requests

url = 'url'
json_data = json.dumps({'name', 'mituba'})

result = requests.post(url, json_data, headers={'Content-Type': 'application/json'})

print result.text

GOで書いたCLIツールをbrew installでinstallできるようにする

homebrew-<CLIツールのリポジトリ名>の設定

homebrew-<CLIツールのリポジトリ名>を作成してください.

そのリポジトリに以下の<CLIツールのリポジトリ名>.rbを追加してください

require 'formula'

HOMEBREW_<CLIツールのリポジトリ名(アッパーケース)>_VERSION='1.0'
class Filesmv < Formula
  homepage '<CLIツールのgithubのリポジトリURL(web)>'
  url '<CLIツールのgithubのリポジトリURL(clone時に使用する方)>', :tag => "master"
  version HOMEBREW_<CLIツールのリポジトリ名(アッパーケース)>_VERSION
  head '<CLIツールのgithubのリポジトリURL(clone時に使用する方)>', :branch => 'master'

  depends_on 'go' => :build

  def install
    ENV['GOPATH'] = buildpath
    system 'go', 'build', '-o', '<CLIツールのリポジトリ名>'
    bin.install '<CLIツールのリポジトリ名>'
  end
end

インストール

brew tap <githubユーザ名>/<CLIツールのリポジトリ名>
brew install <CLIツールのリポジトリ名>

これで自分の作ったCLIツールをインストールできました.