[エディター]Vimについて

僕が現在利用しているテキストエディタはVimというものを利用しています。

以前は利用するエディタにこだわりは無かったのですが、会社の先輩プログラマーが利用しているのを拝見したのがきっかけで使い始めるようになりました。

Vimは高性能過ぎるエディタでもあるので、実際にはまだまだ使いこなせている感じはしていません。

Vimは個人的に優れている部分が多いかなと思えますし、今後コマンドなどもさらに習得していって、もっと便利に扱えていけるのではないかと期待しているので未だ使い続けている次第ですw

今回は、このVimというエディターについて内容をまとめておきたいなと思います。

Vimとは

Vimは、Viと呼ばれる高性能なテキストエディタの拡張版です。

特徴としては、コマンドによる操作方法でテキストを編集する機能などがあります。

このおかげで、マウスを使うことなくキーボードから手を離さずテキスト編集がほぼ完結してしまいます。

Vimには根強いファンのユーザーがいて、そういう人達はVimmerと呼ばれていたりもしますね。

メリット

  • 操作にさえ慣れてしまえば効率よく編集が可能
  • 自由自在にカスタマイズが可能

個人的に一番のメリットと感じる部分は、マウスを使わなくてもキーボード操作だけで編集ができてしまうところですかね。

あとVimのエディタは自分が使いやすいよう、機能追加やレイアウトなどのカスタマイズをすることも可能です。

デメリット

  • 高性能過ぎて習得までが大変
  • カスタマイズの難易度が高い

Vimには沢山のコマンドがあるので習得するのは大変ですが、使っていく内に徐々にコマンドなどを習得していけるかと思います。

覚えるのが労力なのであれば、最低限のコマンドさえ習得すれば問題なくVimを活用することは可能なのでそれでも良いかと思います。

あと、Vimのカスタマイズも一から自分で実装するのは敷居が高いです。

ですが、ありがたいことに簡単にカスタマイズできるようVim専用のプラグインを作って下さっている方もいるので、初心者の間はプラグインを導入して利用してみるのもありですね。

コマンド一覧

移動系

コマンド



h
j
k
l
ページ先頭
ページ末尾
gg
G
行頭
行末
0
$
単語毎(右)
単語毎(左)
w
b

テキスト操作

コマンド
行コピーyy
貼り付けp
行頭にタブ追加>>

挿入モード

コマンド
挿入モードi
挿入モード(一つ次の行へカーソル移動)o
挿入モード(一つ前の行へカーソル移動)O
挿入モード(一文字消す)s

ビジュアルモード

コマンド
ビジュアルモードv
ビジュアルモード(ライン)V
ビジュアルモード(ブロック)Ctrl + v

モード解除

コマンド
モード解除Ctrl + [

画面分割

コマンド
縦分割:vsplit
画面移動(右)Ctrl + w + l

更新日 : 2020年8月26日

GitHub Pagesを利用する

ポートフォリオサイトを作成するにあたり、どのWebサービスを利用しようか悩んでいた際に、GitHubで静的サイトを公開できるサービスがあると知り利用することに至りました。

今回は、GitHub Pagesを利用して静的ページを公開させる方法についてご紹介したいと思います。

GitHub Pagesとは

GitHub上で利用できる静的サイトのホスティングサービスです。

GitHubのアカウントがあれば、無料で自身で作成したWebページを簡単に公開することができます。

GitHub Pagesには、GitHub上のプロジェクト毎に紐付いているWebページと、無関係のWebページの二種類があります。

今回は、後者のページを利用すると想定して解説していきたいと思います。

ホスティングサービスとは

あるサーバー環境を利用したい場合に、ユーザーがネットを通じてサーバー環境の一部の領域を確保して各リソースなどを利用することができるサービスです。

ユーザーが一からサーバー環境を準備したり管理したりする必要がないため、非常に便利なサービスとなります。

利用方法

ユーザー登録

まずは、GitHubを利用するためにユーザー登録が必要なので登録を済ませておきましょう。

リポジトリ作成

GitHubが利用できる状態になったら、GitHubの管理サイトでGitHub Pages用のリポジトリを作成します。

リポジトリを作成したら、ローカルにクローンします。

ターミナルでリポジトリを作成したいディレクトリへ移動し、以下のコマンドを実行します。

$ git clone [リポジトリのURL]

クローンが成功すれば開発の準備は完了です。

ページ作成

先ほどクローンしたディレクトリにてHTMLファイルを生成し、ページを作成します。

HTMLの記述が完了したら、内容をコミットしてリモートリポジトリへプッシュします。

GitHubの設定

GitHub管理サイトで先ほど作成したリポジトリのページを開き、「Settings」をクリックします。

次に、「Options」を選択します。

「GitHub Pages」の「Source」の項目を「None」から「master」に変更し、「Save」をクリックします。

これで、masterブランチの内容が公開されるように設定されました。

その後、ブラウザで「https://ユーザ名.github.io/リポジトリ名」にアクセスしてみましょう。

すると、先ほど記述した内容のページが表示されたかと思います。

更新日 : 2020年8月23日

[Rails]Herokuでアプリを公開する

Railsアプリを開発して、ユーザーに利用してもらいたい場合はWebにアプリを公開する必要があります。

今回は、Herokuを利用したRailsアプリの公開方法をご紹介したいと思います。

Herokuとは

開発を行ったWebアプリケーションを公開するためにWebサーバーを事前に用意(OSやDBなどの構築)したり、アプリをデプロイする必要があります。

その工程を補ってくれるWebサービスの一つとしてHerokuがあります。

Herokuを利用することでWebサーバーを自分で用意する必要がなく、しかも簡単にアプリケーションをデプロイすることができます。

ある程度制限はありますが、基本は無料で利用することができます。

Git導入

Herokuへアプリケーションをデプロイするために、Gitを導入しておく必要があります。

Gitを導入したら、公開したいWebアプリケーションのバージョンをmasterブランチにコミットしておきましょう。

Herokuのユーザー登録

Herokuを利用するために、Heroku公式ページにてユーザー登録を済ませておく必要があります。

Railsアプリのアップロード方法

RailsアプリとHerokuを紐付ける

まずはRailsアプリとHerokuを紐付ける作業を行うので、ターミナルで以下のコマンドを実行します。

$ heroku create [アプリ名]

この作業はアプリケーション毎に初回のみ実行します。

アプリ名の部分を省略すると自動的に名前が割り振られます。

Herokuへデプロイ

masterブランチのバージョンをHerokuへデプロイします。

以下のコマンドを実行することでHerokuへデプロイすることができます。

$ git push heroku master

これでWebサービスが公開された状態になりました。

DBのマイグレート

Webサービスは公開状態にはなりましたが、デプロイ先のDBが最新の状態になっていないことがあります。

Railsの開発中にも行っていたマイグレーションをデプロイした側で実行し、DBを最新の状態にします。

$ heroku run rails db:migrate

「$ heroku run 〜」コマンドでHeroku内で特定のコマンドを実行することができます。

基本的にはこれでWebサービスが正しく動作するかと思います。

その他コマンド

ログの確認

$ heroku logs

Herokuのバージョンの確認

$ heroku --version

環境変数の確認

$ heroku config

サーバーの再起動

$ heroku restart --app [アプリ名]

更新日 : 2020年10月7日

[Ruby]正規表現

Railsの開発の中で、頻度は少ないですがたまに正規表現を利用することがあります。

そういうこともあって、いざ正規表現を用いてコードを書く際に記述方法が思い出せないことが多々あるので開発の効率が悪いことがあったりしますね。

なので、Rubyの正規表現に関する内容を備忘録としてまとめておきたいと思います。

正規表現とは

文字列のパターンを一つの文字列で表現するための表記法です。

正規表現のメリットとしては「一つの文字列で表現」という部分がポイントで、正規表現特有のメタ文字というものを活用することで色んなパターンの文字列を表現することができます。

例えば、以下のような複数の文字列があったとし、郵便番号の表示形式のものだけを取り出したいとします。

23-85412
857-9521 <- これ
198631-7
294-3391 <- これ
9083544-
5459-684

その場合、以下の正規表現を利用すれば取り出す事ができます。

正規表現
[0-9]{3}-[0-9]{4}
または
\d{3}-\d{4}

結果
857-9521
294-3391

「\d」は0〜9の数字の範囲に関する部分を省略して記述できる省略コードとなります。

正規表現を利用する場面は、このように特定の文字列を抽出したりする際などに利用する事が良くあります。

メタ文字一覧

正規表現で使用できるメタ文字は、一部ではありますが以下の通りとなります。

メタ文字説明備考
^行頭
$行末
[]OR[abc] : ‘abc’
[^abc] : ‘abc’以外
[0-9] : 0~9
{n,m}n回以上、m回以下{0,3} : 0回以上、3回以下
{,2} : 2回以下
{5,} : 5回以上
{3} : 3回
.ワイルドカード(1文字)
メタ文字一覧

メタ文字をエスケープさせたい

メタ文字をエスケープさせたい場合は、「\」を文字の先頭に追記します。

正規表現
abc\$def\]

結果
abc$def]

Rubyの正規表現

Rubyで正規表現を扱う場合はRegexpクラス(Regular Expression)を利用します。

Regexpオブジェクトを生成する場合は以下のように文字列を「/」で囲みます。

/あいうえお/

先ほどの例のように、郵便番号の文字列パターンを表現する正規表現を用いる場合は以下のように定義します。

/\d{3}-\d{4}/

特に難しいものはありませんね。

正規表現の表記方法は、言語によって多少の違い(方言)があるので注意してください。

更新日 : 2020年8月15日

人生計画を立てよう

僕は人生計画を立てたものを手帳のリフィルとして挟んでおいて、毎日内容を確認できるようにしています。

計画を書いたり更新すること自体面倒なことではありますが、毎日朝起きた時に今日一日はどう過ごせば良いのかがパッと見て直ぐ分かるところが良いですね。

今回は、この人生計画について僕が実践していることについてご紹介したいと思います。

人生計画とは

目標を達成するために、タスクの洗い出しやスケジュールなどの具体的な手段へと落とし込む工程を指します。

言わば夢の設計図とも言えますかね。

目標は自分が一番成し遂げたい理想象などで、ビジョンボードや夢リストで描いたものなどを目標にしても良いかと思います。

人生の計画を立てないと、夢を叶えるための期限や行動がイメージし辛く、具体的に今何をすれば良いのか分からなくなります。

なので、計画を立てていれば夢を実現させるために今やるべき事がハッキリと分かるようになるので時間を無駄にしなくて済むし、進むべき方向を見失わなくなりにくくなります。

そして計画を立てれば夢が鮮明となり、将来に対する不安も払拭できますし、理想の人生までの過程が見えてくるのでよりワクワクするのではないかと思います。

計画の立て方

計画の立て方は、ざっくりと以下の順になります。

  1. 目標を決める
  2. 期限を決める
  3. 手段を考える

目標を決める

人生の中で自分が最終的にどんな状態を望むのかを始めに定義しておきます。

この時点でビジョンボードや夢リストを作成してみるのも良いですね。

目標は、漠然とした内容ではなく具体的な内容を決めます。

例えば、「安定した収入を得たい」ではなく「毎月30万円の収入を得たい」というように具体的に数字などを盛り込んでみると良いかと思います。

今後はこの目標を軸にして計画を考えていきます。

期限を決める

目標をいつまでに実現させるかを考えます。

期限を具体的に決めておくと、自然と期限に合わせて行動する意識が芽生えるのでおすすめです。

「○年○月○日までに」と具体的な日付を明示しておきましょう。

手段を考える

目標を実現させるためには何をすれば良いのか、必要なタスクを考えます。

こちらも、具体的にどのように実践していくかを書いていきます。

例えば、「3ヶ月後にブログ記事を100記事投稿する」という目標があった場合、逆算して一日1、2記事投稿すれば達成することになるのでこれをタスクとして書き出します。

このように逆算できるものもあれば逆算しづらいものもあります。

その場合は、仮説を立ててタスクの内容を決めると良いかと思います。

例えば、「開発中のアプリの○○機能を○日までに完成させる」という目標があった場合、機能を実装するのにどういったことを行う必要があるか今までの経験などを頼りに推測し、細かなタスクや期限などを洗い出していきます。

実際にタスクを実行してみてもし仮に予想外の進捗であれば、都度計画を見直していけば良いかと思います。

活用方法

計画は毎回見直す

計画を実行していると、いつのまにか進むべき方向が間違っていたりすることもあります。

なので定期的に計画を見直して軌道修正をし、今実行している内容がしっかりと目標に向かって進んでいるのか自問自答していくことが重要になってきます。

更新日 : 2020年8月24日

夢リストを作ろう

僕の場合手帳を購入してから夢リストを手帳に作成するようになり、手帳に挟んでおいていつでも目を通せる状態にしています。

ところが、夢リストを作成したのは良いとして、ビジョンボードと同じく日が経つに連れて段々と目を通す事が少なくなってしまいました。

夢リストについて意義をしっかりと確認しておいて、重要なことであると認識して活用できるようにしたいと思います。

夢100リストとは

自分が叶えたい夢の内容を箇条書きで100項目記載したリストです。

リストを作成することで、自分のやりたい事や実現したい事などの自分の本音がハッキリと見えてきます。

そしてリストを繰り返し眺めることで、自分の叶えたい夢について注意を向けていく事ができ、最終的に行動へと繋げていくことができます。

叶えたい内容に関しては難しく考えず、短期間で実現可能な内容でも問題ありません。

作成方法

作り方は簡単で、自分が叶えたい内容をイメージしたものを文章に落とし込み、これを箇条書きで100項目紙に記していくだけとなります。

活用方法

良く見える場所に

ビジョンボードと同じように、毎日目を通せるような場所に保管しておきます。

そうすることで毎日夢に対して意識を向けられるようになり、潜在意識に刷り込ませる事ができます。

具体的に書く

夢を鮮明に想像できるようにするために、なるべくなら内容を具体的に書いた方が良いでしょう。

例えば、叶えたい夢に対して期限を設けたりとかですね。

叶ったものとして書く

リストを眺めて夢が達成したことをイメージし、その時の感情を味わう事が大事なポイントとなります。

なので、リストの内容の文章も達成した事のように書くようにします。

そうすることで、内容を読んだ時に達成しているイメージがすんなりと思い描けるようになるでしょう。

カテゴリ別に内容を分ける

リストが100項目ということもあり、特定の内容を探し出すのが少し面倒になります。

例えば、リストに追加する内容が既に書かれているかどうかを確認する場合などですね。

なので、内容にカテゴリを設けて整理しておくことで、ある程度検索がしやすくなったりします。

達成した内容は削除

リストの中で実際に達成した内容に対して、達成したことが分かるようにリストから削除したり印を付けます。

リストを更新して100項目足りなければ、100項目になるように項目を追加して調整します。

定期的にメンテする

自身が思い描いている夢は日々更新されていくものです。

それに伴い、夢リストの内容も更新していく必要があります。

夢が新しく思いついたり既存の内容を修正したい場合は、その都度リストを更新しましょう。

更新日 : 2020年8月24日

ビジョンボードを作ろう

ビジョンボードを作成したのは良いのですが、作り始めた頃と比べて段々とビジョンボードをあまり眺めなくなったりと上手く活用できていない事が気になり出しました。

ここでもう一度ビジョンボードに関する意義や活用方法についてしっかりとおさらいしておこうと思い、今回まとめることにしました。

ビジョンボードとは

自分が叶えたい夢のイメージの画像やイラスト素材の寄せ集め(コラージュ)となります。

文章などで書く手段(夢100リストなど)もあるにはあるのですが、ビジョンボードの方が視覚的にイメージしやすいです。

ビジョンボードを活用することで、内容を自身の潜在意識に刷り込ませていくことができるので、結果的に夢が叶いやすくなります。

また、自身の夢や実現したいことなどがハッキリとあらわれます。

もちろんビジョンボードを眺めているだけでは効果がありません。

ビジョンボードの内容を実際に体験していることをイメージすることが重要になります。

潜在意識とは

意識には、顕在意識と潜在意識の二種類が存在します。

顕在意識は自身で意識することができる意識で、潜在意識は自身で意識することができない意識(無意識)を指します。

潜在意識は自身の価値観や信念が刻み込まれていて、人は無意識にこの潜在意識を基に物事に対して判断や行動を行っています。

なので、自分が叶えたい夢のイメージを潜在意識に刷り込ませることにより、夢の実現に向かって判断や行動を行うようになります。

作り方

作り方は色々ありますが、代表的なものといえばコルクボードに写真やイラストをピンで留めたりして作ることですかね。

要は叶えたい夢のイメージが視覚化できていればOKなので、僕の場合は手帳のリフィル として活用しています。

実際に僕が行っている方法は以下のような手順で作りました。

  1. PCの画像加工ソフトなどで画像を並べる。
  2. 作成した画像をプリントアウトする。
  3. プリントされている画像をハサミで一つずつ切り抜く。
  4. 切り抜いた紙を無地のフィリルに貼り付ける。

ポイントとしては、なるべく隙間なく画面いっぱいに貼り付けること。

そして、コラージュ素材は眺めていてワクワクするようなものを選ぶと良いかと思います。

活用方法

ビジョンボードは、なるべく毎日眺められるような場所に置いておくのが効果的です。

毎日眺めることで夢に対する意識も高められるし、潜在意識に刷り込ませていくこともできます。

僕の場合は、毎日目を通せるように手帳の先頭のページにビジョンボードを挟んで、注意を向けられるようにしています。

nodebrewについて

nodebrewとは

nodebrew

JavaScript実行環境であるNode.jsのバージョン管理ツールです。

Node.jsのインストールや、利用したいバージョンなどを簡単に切り替えることができるのでとても便利です。

インストール

GitHubなどからインストールできますが、今回はHomebrewからnodebrewをインストールします。

コンソールから、以下のコマンドを実行するとnodebrewをインストールすることができます。

$ brew install nodebrew

nodebrewが正常にインストールされたか、以下のコマンドを実行することで確認することができます。

$ nodebrew

利用方法

Node.jsをインストールしたい場合、以下のコマンドでインストールができます。

最新版のインストール
$ nodebrew install latest

特定のバージョンのインストール
$ nodebrew install v1.1.0

インストール可能なバージョンは、以下のコマンドで確認することができます。

$ nodebrew ls-remote

個人的には安定版を利用することが多いので、以下のコマンドで安定版のNode.jsをインストールします。

$ nodebrew install stable

バージョンを切り替える場合は、以下のコマンドのように利用したいバージョンを指定することで切り替えることができます。

$ nodebrew use v1.1.0

その他コマンド

バージョンの確認

$ nodebrew -v

インストール済みのバージョンの表示

$ nodebrew list

[Rails]yarnについて

Railsによる開発の際に、JavaScriptに関するパッケージをyarnにてインストールする機会がありましたが、yarn自体がどういったツールなのかがいまいちイメージが掴めませんでした。

今回は、yarnについて内容を整理しておきたいと思います。

yarnとは

Facebookにより開発されたNode.js専用のパッケージ管理ツールです。

他にも代表的なものにnpm(Node Package Manager)というパッケージ管理ツールも存在しますが、npmよりもyarnの方が優れていることもあり利用している方が多いように見受けられます。

Node.jsとは

サーバーサイドで動作するJavaScriptです。

JavaScriptと言えば、フロントエンド開発に用いられる言語というイメージが強いですが、サーバーサイドでもJavaScriptを用いて開発を行うことができます。

パッケージのインストール

以下のコマンドを実行すると、package.jsonに基づいてパッケージを一括インストールします。

$ bin/yarn install

個別にパッケージをインストールする場合、以下のコマンドを実行することでインストールでき、更にpackage.jsonにも自動的に追加されます。

$ bin/yarn add [パッケージ名]

インストールしたパッケージのバージョンを保持するためにyarn.lockというファイルに自動的に記載されます。

このファイルを共同作業している開発者と共有することで、JavaScriptに関するライブラリを簡単に揃えることができるようになります。

インストールしたパッケージはnode_modulesディレクトリに格納されます。

その他コマンド

パッケージを個別にアンインストール

$ bin/yarn remove [パッケージ名]

更新日 : 2020年8月8日

[Rails]Bootstrapの導入

Railsアプリのフロント側の実装では、開発用フレームワークにBootstrapを利用しています。

最近は当たり前のようにBootstrapを利用していますが、開発し始めた頃はどういったフレームワークなのかさっぱり分からない状態でした。

今回は、このBootstrapについて情報を整理しておこうかと思います。

Bootstrapとは

フロントエンド向けのWeb開発フレームワーク(CSSフレームワーク)です。

Bootstrapで既に定義されているデザイン・枠組みを簡単に利用することができます。

メリットとしては以下のようなものがあります。

  • HTMLタグのclass属性に指定するだけなので簡単。
  • CSSでデザインを定義する時間を短縮できる。
  • あまりデザインの知識がなくとも、それなりに見た目が良いページを実装することができる。

導入方法

今回はwebpackerを利用した方法を解説したいと思うので、yarn(パッケージ管理ツール)で必要なライブラリをインストールします。

コンソールで以下のコマンドを実行し、必要なライブラリ群をインストールします。

$ yarn add jquery bootstrap popper.js

popper.jsはBootstrapの一部の機能を利用するために必要なライブラリとなるので、一緒にインストールを行います。

次にwebpackerの設定ファイルを変更するため、以下のコードを追加します。

// config/webpack/environment.js

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

次に、BootstrapをインポートするためにCSSファイルに以下のコードを追加します。

// app/javascript/stylesheets/application.scss

@import 'bootstrap';

最後に、Bootstrapと先ほどのCSSを読み込みたいので、application.jsに以下のコードを追加します。

// app/javascript/packs/application.js

require('bootstrap/dist/js/bootstrap.js')

require('../stylesheets/application')

以上で、Bootstrapを利用する準備が整いました。

利用方法

基本的には、HTMLのclass属性に利用したいコンポーネントを指定して利用します。

例えばナビゲーションを表示させたい場合はNavsというコンポーネントを利用します。

親要素に「nav」、子要素に「nav-item」をそれぞれのclass属性に指定します。

例えば、Railsのテンプレートに以下のようなコードを記述するとバビゲーションが表示されると思います(Slimを利用しています)。

/ ナビゲーション
.nav
  / 一つ目の項目
  .nav-item= link_to 'リンク1', URL, class: 'nav-link'
  / 二つ目の項目
  .nav-item= link_to 'リンク2', URL, class: 'nav-link disabled'

公式のドキュメントに詳しい使い方やサンプルが記載されているので、そちらもご覧いただくと良いかと思います。