//ルートにアクセスされたら/archiveにリダイレクトする

エイリーの備忘録

開発や音楽について書いていこうと思っています。

俺用vimチートシート

この記事は、私の私による私のためのvimの操作方法を記述した記事です。
随時更新予定です。

この記事を書く背景

最近、vimのコマンドを覚えれなくなってきたので、メモが欲しいけど、持ち歩くのはめんどくさいし、どこからでも見やすいブログがいいと思ったのでここに書きます!

前提環境

vimがインストールされているmaclinux
windowsだと、インストールスクリプトを走らせるだけでも苦労しそうだから、知らんw

vimの設定とプラグインをインストール

$curl https://raw.githubusercontent.com/youmjww/vimSetup/master/vimSetup.sh | sh

操作方法

特に記述がない限り、ノーマルモードで実行お願いします。
独自カラムは、導入したプラグインの挙動だったり、独自に設定したショートカットだったりします。

モード変更

コマンド 内容 独自
a カーソルの次の位置でインサートモード
i カーソルがある位置でインサートモード
v ビジュアルモード
Esc(連打) ノーマルモード

カーソル移動

1ずつ移動
コマンド 内容 独自
k 上へ移動
j 下へ移動
h 左へ移動
l 右へ移動
複数まとめて移動
コマンド 内容 独自
G 一番下へ移動
gg 一番上へ移動
H 行の左端へ移動
L 行の右端へ移動

ファイル操作

コマンド 内容 独自
:w 変更を保存する
:q ファイルを閉じる
:q! 保存していなくても、強制的にファイルを閉じる
:wq ファイルを保存して閉じる
:wa 開いているファイルの変更をすべて保存
:qa 開いているすべてのファイルを閉じる
:wqa ファイルをすべて保存してファイルを閉じる

コピペ

コマンド 内容 独自
(ビジュアルモードで範囲指定後)y コピー  
dd 一行カット
x 一文字カット
p ペースト

検索

コマンド 内容 独自
:Ag 検索ワード カレントディレクトリ以下のソースから文字列の検索
Control + p ファイル名検索
?[文字列] カーソル位置より上方向に[文字列]を検索
/[文字列] カーソル位置より下方向に[文字列]を検索
n 次の候補へ移動
N 前の候補へ移動
F3キー 検索ハイライトを解除

その他コマンド

コマンド 内容 独自
space + f ファイルエクスプローラーを開く
:数字 指定された行へジャンプ
ci' シングルクォートの間を削除してインサートモード
ci" ダブルクォートの間を削除してインサートモード
ci( 丸括弧の間を削除してインサートモード

あとがき

vimに結構慣れてきて、自己流ながらvimを勉強しながら使っているのですが、やはりvimは奥が深く、使っていて楽しいです。まだまだvimは使いこなせていないですが、これからどんどん使って(私にとって)可愛いvimにしていこうと思います。
最後に一言: vimたんかわいいよ///

vimプラグインマネージャのインストール

何回も同じことをやってるので、備忘録として書きます。
vimプラグインを手動で管理するのは面倒なので、プラグインマネージャを使うと便利(らしい)

確認済み環境

ubuntu16.04
centOS バージョン不明
maxOS X 10.12.5(Sierra)

NeoBundleをcloneしてくる

# プラグインインストール用のディレクトリを作成
# mkdirに-pオプションを付けることでサブディレクトリも同時に作れる
$mkdir -p ~/.vim/bundle

# プラグインマネージャをcloneしてくる
$git clone git://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim

.vimrcの設定

vimrcを開く

$vim ~/.vimrc

vimrcの先頭に追記

" プラグインの管理のやつ
if &compatible
  set nocompatible
endif

set runtimepath+=~/.vim/bundle/neobundle.vim/
call neobundle#begin(expand('~/.vim/bundle/'))
NeoBundleFetch 'Shougo/neobundle.vim'

" 追加プラグイン
" ファイルエクスプローラ
NeoBundle 'scrooloose/nerdtree'


NeoBundleCheck

プラグインを追加する場合は、NeoBundleCheckより前に使用したいプラグインを追記するとvimを開いた時に自動的にインストールしてくれます。

あとがき

最近vimを使わざる得ない事があり、vimを使っているとだんだん慣れてきて、もっといい環境を整えれないものかと思う今日このごろ。
とりあえず、vimVScodeレベルで使えるようにしたいです・・・
あと、環境が変わるたびにプラグインマネージャをインストールするのがめんどくさいのでどうにか自動化したいものです・・・

vimの勉強会に行ってきました。

今回東京に行ったついでにvimの勉強会に行ってきました。
フリマアプリ「フリル」の開発を行っている会社Fablicがやってくれた勉強会で、Fablic.vimという勉強会です。
公式レポートがあるので個人的な感想をダラダラと書きたいと思います。

ざっくりレポート

今回この勉強会に行った動機が、東京に1泊で行くことになって、前日の予定が少し開いていたのでせっかく東京に行くのだし勉強会を探したら何かやってるはず!と思い探してみると、最近使い始めたvimの勉強会をやっていたので参加してみることにしました。

ざっくりした内容は、みんなでvimの事について語り合ったり、雑談したり、自慢のvim裁きをみんなの前で発表するというような内容でした。

自慢のvim裁き発表(飛び込み発表)

vim裁きを見ていると、みんな凄いと感じました。私はまだ.vimrcを編集して出来ることが無いか色々探っている最中なのですが、プラグインで拡張しまくってGoやRailsに対応させたvim環境を構築し、快適に作業ができているとおっしゃっていたのでびっくりしました。
正直な話、vimって言ってしまえばコンソール版のノートパットだろ?と思っていたのですが、プラグインでどこまででも出来るのですね。
これを見て、とりあえずvimでJSやPHPを快適に書けるようにしてみたいな感じましたw

雑談

みんなで適当にグループに別れて色々なことを話していました。
周りを見ていると、楽しそうにvimのことを語り合っている人たちもいれば、会社のことを話している人たちもいて本当に、vimmerの交流だなと感じました。
個人的に一番雑談で印象に残ってるのが、私に、ニートのすすめをしてくれた方がいらっしゃったのですが、話を聞いていると、一理あると納得しましたw

印象に強く残った発表(というよりプラグイン

今回色々な発表を聞き、印象に強く残った発表は2つありました。(というよりここの印象が強すぎるという感じでした。)

mario.vim

ん?vimってテキストエディタだよな・・・?
このプラグインを使うと、なんとvim上でマリオがプレイできるのです!
動作を見ていると、結構ヌルヌル動いていて、敵キャラはAIで動いているらしいです。
ちゃんとマリオがジャンプしたりブロックを壊せたり出来るのですごかったです。
GitHub - rbtnn/mario.vim: Mario on Vim

puyo.vim

mario.vimと同じ方が作っているプラグインなのですが、vim上でぷよぷよが出来ますw
ちゃんと連鎖の処理もされていて凄いクオリティでした。
ここまで来たらもう凄い以外言葉が出てこないですw
GitHub - rbtnn/puyo.vim: Puyo on Vim

全体の感想

vimすげぇぇぇぇ
ただのテキストエディタだと思ってたらゲームまで出来るんかいw
サーバを触るのに使ったら興味を持った私ですが、もう少しちゃんとvimを勉強してみたいと感じました。
とりあえず、近くの目標としましては、JSとPHPを快適に書ける環境をvimで整えるというのを目標に頑張ってみたいと思います。遠い目標としては、「は??」と言われるような変なvimスクリプトを書いてみたいですw
目指せvimmerで頑張ってみます!

リンク

公式レポートですw
in.fablic.co.jp

togetterのまとめ
togetter.com

macのアクセサリを買ってきた話

近所のソフマップで前々からほしいと思っていた物と絶対に必要になったものを買ってきました。
買ってきたのはこの2つ。
f:id:youmjww:20170521230450j:plain
USB to 有線LANアダプタとmacの画面の保護シールです。
東京に行く用事ができて、宿のネット環境を調べてみると有線LANしか無く、wifiが飛んでいないみたいで、ネット依存症の私にPCでネットをするなというのは死ねと言われているのと一緒ですのでここは買わねばと思い買ってきましたw
画面の保護シートは画面に指紋や汚れがつくと目立つのが嫌だったので、本当はノングレアにするシートがほしかったのですがそれがなく、(自称)指紋防止とパッケージに書いてあったので買ってみました。

買った物の感想

USB to Ethernet

商品名は、LUA3-U2-ATXです。
この商品を買う決め手になったのが、値段と本体の横にケーブルを収めるスペースが付いていたところです。
スピードが遅いのは気にしないですw(どうせターミナルでの作業とネットサーフィンが主な用途ですし。)
動画は画面が1枚しか無い時はあまり見ないのでほとんど問題ないかと思います。

使ってみた感想ですが、まず実際に収納スペースへ収めてみました。
f:id:youmjww:20170521231453j:plain
思っていたのと少し違うw
USBのコネクタ部分が本体に収まると思ったらケーブルしか収まらなかったですw
しかも硬いwまあ、本来の機能が満足に動けば問題なしですが、動くんかな・・・
てか、買ってからせっかくmacを使ってるならUSB toでは無くて、Thunderbolt toにすればよかった・・・USBポートが一個減るのは思ったより痛かったですw
しかし!調べてみると、
f:id:youmjww:20170521232456p:plain
思ったより高いw
二千円ぐらいなら買ったけど、ここまで来ると買えないですw
耐久度についてはしばらく使ってみて様子見ですね。

画面の保護シート

買った商品は、ELECOM Sscreen Protector for MacBook Pro 2016です。
私の持っているmacは、mac book proの2015なのですが、画面サイズは一緒なので問題なく使えたらいいと思い購入
実際に貼ってみると、静電気を纏っており少し貼りづらいと感じつつ、なんとか貼ることは出来ました。
貼ってみて、やっぱり光沢はあるけど、実際に画面を触ってみて指紋は付きづらそうだと感じました。
実際の使用感はまた様子見ですねw

あとがき

やはり家電量販店やPC用品店に行くのは楽しいですねw
要らない物まで見てついつい欲しくなってしまいますw
最近は無駄遣いしないためにアマゾンなどを見ないようにしてたのにソフマップで画面の保護シートを買ってしまうとは思っていませんでしたw
まあ、久々のショッピングですし、少しぐらいならいいかなw

reactのmeetupに参加してみた話

皆さんお久しぶりです。
ここ3日間ぐらいブログを更新出来ていなかったのですが、結構寂しくなりますねw
ほぼ毎日投稿していたのでブログを投稿できなくなると結構寂しいものです。
これからはまた頑張って毎日投稿していきたいと思います。(技術ブログを謳ってるくせに技術的に書けるネタはしばらくなさそうだけど・・・)
技術ブログって毎日更新に向いていないですねw
何を書いたらいいのかよくわからなくなってきますw
縛りをつけると書きやすいと思ったんだけどなあw

meetupに参加した話

さて、ここからが本題です。
先日梅田の株式会社ロックオンの会議室で行われていたreactのmeetupに参加してきました。
一番最初に感じたのが、会社に入るためのエレベーターがかなり綺麗だと感じましたw
f:id:youmjww:20170521220631j:plain
なんというか、シャフト感がwと感じながら会場の階に行き、入ってみると、meetupだから覚悟はしていたのですが外国の方ばっかり・・・話しかけに行くのが怖かったです・・・
実際に始まってみると、英語で全員の自己紹介から始まり、プレゼンが始まり、フリートーク
自己紹介の時はかなり緊張しましたw(てか、頭の中が真っ白w)
そしてreactのプレゼンが始まり、内容を(雰囲気で)聞いていると、重要なのは5つの要素だと話していました。
Components
JSX
Props & State
The Component API
Component Types
上記に上げた5つの要素が大切らしいです。
上からProps & Stateまでは触っていて知っていたのですが、ComponentAPIとComponent Typesは触ったことを無かったのでまた調べて記事にできたらいいなと思いましたw
正直、プレゼンの内容はわかりませんでした・・・スライドを読むのに必死で話してる英語を自分の中で解釈するのが間に合わなかったです・・・
英語わからん・・・
フリートークは、ずっと日本人と喋ってました・・・

行ってみた感想

周りのみんなを見ているとすごく楽しそうにされている方が多かったのでいいイベントだったんだろうなと感じました。

ただ、英語が怖かったですw
英語がと言うより、コミュニケーションが取れないのが怖かったです。
フリートークの時に他の人に話に行きたかったけど、私の英語力では話しかけに行くことは出来ず、話に行って会話が成り立たなかったらと考えたら怖くていけませんでした・・・
英語は話すのも勉強したいと考えmeetupに参加したのですが、英会話は私の能力ではまだまだと思い知らされましたw
ただ、英語というより言語は習うより慣れろだからもっと参加していったほうがいいのかな・・・
洋画を見て英語に耳を慣らしてみてもいいかもしれないですね。

これからの課題としては、英語に耳を慣れさせてもっと積極的に英語でコミュニケーションを取れるようになりたいです。

npm install でつまずいたのでメモ

あれ?いつも通りnpmでパッケージをインストールしようとすると404エラーが出るぞ・・・
スペルはgithubの公式からコピペしてるから間違えていないはず・・・と思い、いろいろ調べてやってみたことのメモです。

npmのバージョン確認

とりあえず、npmのバージョンが古いのかと思いバージョンを確認してみました。

npm -v

#結果
3.5.2

うーん今回使いたいパッケージはnpm4.15.2って書いてあるな。
俺、npmをインストールたのどんだけ前なんだろと思いつつnpmを更新することに。

npmのアップデート

とりあえずaptでインストールしたはずだからaptでアップデートできると思いやってみました。

$sudo apt update
$sudo apt upgrade npm
$npm -v
#結果
変わらず3.5.2

ん?aptで更新をかけたのに変わってないぞ・・・
じゃあ、npmでnpmの更新ができるみたいだから試してみよう。

$npm install -g npm

すると・・・
f:id:youmjww:20170517001548p:plain
なんでやw
npmのリポジトリは登録されているはずだろw
これはもしかしてリポジトリの登録が何かの拍子で解除されてしまったのかな?
とりあえず、リポジトリのリストを確認してみましょう。

npmレジストリの確認

$npm config get registry
#結果
null

あーレジストリがnullになってる・・・
そりゃインストール出来ないわな・・・
うん。
じゃあ登録しなおしてやってみるか

npmレジストリの登録

$npm set registry http://registry.npmjs.org/

これで登録出来たはず・・・

もう一回npmの更新を試みている

とりあえず、テストも兼ねてnpmの更新をしてみたいと思います。

$npm install -g npm

お!今度は通ったぞ!
じゃあnpmのバージョンが何になったか確認してみよう!

$npm -v

#結果
3.5.2

あれ・・・バージョンが上がってない・・・
とりあえずこれでもう一回目的のパッケージがインストールできるか試してみるかと思い試してみると、ちゃんとインストールできました。
どうやら原因はレジストリの登録が何故かnullになっていたからみたいですね・・・

あとがき

なんか途中からnpmのトラブルシューティングみたいになってましたけど、目的は達成できたので良しとしますw
まさかレジストリの登録が変わっていてnullになっているとは思いませんでしたw
でも、更新をかけてもnpmのバージョンが上がらなかったのは何故なんだろ・・・
ubuntu16.04で使えるバージョンだと今のバージョンが最新なのかな・・・
まあいいやw
目的は達成できたから今回は良しとしましょう。

ubuntuでrpmパッケージを使う

あれ?debian用のパッケージは転がってるけどubuntu用のパッケージが無い・・・
rpmでしか転がってない・・・コンバートしたら使えるんだ・・・コンバートしよう・・・

コンバート用のパッケージをインストー

$sudo update
$sudo apt install alien dpkg-dev debhelper build-essential

コンバートしてインストールする

コンバート

$sudo alien <rpmのパッケージ名>.rpm

インストー

ここはいつも通りですよね。
dpkgでサクッと行きましょう

$sudo dpkg -i<コンバートしたrpm>.deb

あとがき

正直・・・ubuntuってdebianを元にして作られているならdebianのパッケージをコンバートせずに追加したいものです・・・
linuxの事は詳しくないのでなんとも言えないですが・・・