Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

デザイン系フロントエンドエンジニアが「黒い画面」を使ってて良かったこと。

$
0
0

「webデザイナー」になるつもりでアプリ制作会社に入り、
フロントエンドエンジニア(一般的にはWebデザイナー)として配属後、
直属の先輩にはじめて教わったことが

「とりあえず、ターミナル使っとけばいいよ。」

でした。

当時、ターミナル=黒い画面 くらいしか知らなかったし、vimって何だよレベル。

分からん動かんと泣きつきながら覚えながら1年半。

それなりに使えるようになってきたので、
黒い画面を使いながらフロントエンドエンジニアをやってみて気づいた「良かったなぁ」と思うことをまとめてみます。

※ zsh, vimの便利ツールや、補完が凄いとかの機能についての紹介記事ではないです

1. 意外にターミナルかっこいい

やっぱりかっこいいのじゃないとテンション上がらないので、vimとzshを使い始めてはじめにしたことが、画面のカスタマイズ。
iTerm2がいいらしいと教えてもらって、PowerlineとかVimFilerとか、ターミナルの背景色をちょっと透かせてみたりとかして、結構かっこよくなります。

スクリーンショット 2014-11-28 1.35.34 AM.png
(最近はoh-my-zshをやめてzpreztoを使ってみてます。かわいいし超簡単だったので良い。)

やっぱりデザイン整えることの方が楽しいので、大事。
あと整えるためにも色んなものをインストールしたりPATH通したりと、結構勉強になったので、チュートリアルとしてありかもなぁと思ったりします。

でもまだもうちょっと便利にしたい・・・ううむ。

2. インストールに強くなる

何かを使おうとしたときに、「〜〜をインストールして」と言われると凄く嫌だなぁと思っていました。

本当に、本能的に嫌なんです。
苦手。嫌。面倒。だれかやってくれるものならやってほしい。
(多分この気持ち、女子なら分かってくれるはず・・・)

でも意外に、普段黒い画面で編集もディレクトリ移動もやっていると、普段使っている画面を使うだけなので、インストールに対して「抵抗」がなくなってきたのです。

$ npm install hoge

とかすればあっという間にインストールできる…ということが分かってくる。

ターミナルを使っていれば、色んなパッケージをインストールするツール(npmとか)が一通り揃っているので、意外に楽にできる。エンジニアさんはいかに面倒なことを楽にするか、に心血を注いでいる気がする。

悪戦苦闘しているうちに、こういう時はこうすればいいんだな、とかノウハウのようなものが分かってきて、このツールはこういう仕組みだからパス通さなくていいのかなとかいう内部的な事情が気になるようになりました。そうするとインストール周りの知識が増える。

インストーラーだと「はい」を押してるだけなので、
うまくいかないとインストーラーのせいにして終わり。なんですよね。

多分「なんか嫌」だったのって、「インストール」ということが、得体の知れないよく分からないものだったからかなと思います。

3. とりあえず「調べる」癖がつく

「これ面倒なんだけどなんかいいのないかな」って思ってググると、大抵ターミナル上で解決できるものが出てくるので、

「分かんなかったら一旦ググる」癖がつきました。

インストールで躓くときは、大抵バージョンが違うとかパスを通せていないことが多く、先人の知恵に頼れる。エラー文を読んでコピペしてググってみるとなんとかなることが多いです。

ただ、どうしても駄目なときは先輩に泣きつきまくっているので、
頼れる凄い人がいるのはかなり「近道」になります。
近道を使ったとしても「どうしても駄目だった」パターンとして蓄積されるし、
駄目だった箇所を振り返るとだんだん共通点が見つかってきたりします。

とりあえず調べることで、自分の頭で考えて情報を精査しようとしたり、色んな角度から見ることになる。
記憶に残っていて、後からはっと閃いて降りてくることも多い。
エンジニアとして大事なことだよ、と先輩が言ってたような気がしないでもない。

4. 他言語・領域への敷居が低くなる

フロントエンドエンジニアと言えど、サーバサイドの処理をいじらなきゃいけないこともあるし
自分でサンプルデータをMySQLで突っ込んだりサーバ起動して確認するし
Android, iOSアプリを使いながらjsエラーを探したりすることもあるし
実は関わってくる言語や領域が凄く多い。

vimとかzshとかってよく「学習コストが高い」って言われますが、
慣れれば他の言語やツールへの心的な敷居が格段に低くなる気がしています。
少なくとも2年前の自分は、Rubyなんて全く興味なかった。

  • 新しいことを覚える量が少ない。
  • 今のものにちょっと追加するだけで始められる。

自然に敷居が低くなります。

薄くでも知っていると、「これはサーバサイドの領域だから」って悲しいことを言わなくてもよくなる。
改善案も出しやすくなるし、施策の難しさやエラーケースなど、フロントエンドの知識だけだと分からなかったことが見えてきたりする。

(詰まったら聞ける、その道のプロかつ面倒見の良い先輩がいるからこそかもしれませんが。)

あと、他言語をかじっていると、本業のjsに繋がることがよくあります。
「あ、これとこれは同じなのか〜!」「jsで言うところの〜〜のことなのね!なるほど!」という「どこかで繋がった」感覚がとても楽しい。

5. 使うツールが少なくなる

たくさんの作業を、黒い画面1つでこなすことができます。

私はiTerm2で開発をしているので、複数タブを開いておいて

  • ローカルサーバ起動(Vagrant)
  • フロント作業
  • サーバサイドのソースの修正
  • 差し込みタスク

といった開発作業を黒い画面(iTerm2)で行っています。

フロント作業では、画面を分割して

  • vimで作業
  • gruntで変更を監視してcompassやらをさせる
  • 作業が終わったらgitでpush

ということを1タブでやっています。
VimFilerを使っているので、黒い画面なのにFinderのように使えて、そのまま編集に入れるのが便利。

開発時には基本的にiTermとChromeとチャットを行ったり来たりするだけなので、
Command + Tabだけでウインドウを切り替えています。

1つで割となんでもできちゃえるので、重いアプリケーションを使う必要がなくなります。
無料で凄いプラグインがいっぱい落ちてるのが黒い画面の世界。お得。
なんか強そうに見えるだけあって、黒い画面、すごい。

6. 基本キーボードだけでなんとかなる

先ほど「 Command + Tabだけでウインドウを切り替えています。」と書きましたが、
マウスいらずなのはとても良いです。

黒い画面のタブ間の切り替えも Command + ←→だけ。

マウスを使おうとすると、なんとなく思考が中断されてしまうので、
手のポジションを変えずに、指先だけで表示を切り替えられるのって実は凄く良いなぁと思っています。

(とは言いつつまだまだマウス使いまくってますが。笑)

7. 凄腕エンジニアさんとお知り合いになれる

実はこれが一番。だと思う。

社内のエンジニアのコミュニティがかなり交流が盛んなこともありますが、
勉強会や共有会、ワークショップなどでコードを見せる機会がたびたびありました。

で、ちょっとカスタマイズしたvimとかzshとか使ってると、必ずと言っていいほど、画面を覗いてもらえる。ちょっと話せる。意外に覚えてもらえる。
覚えてもらえると、何か困ったことがあった時に聞けるようになる。(いつもありがとうございます!)

もちろんタイプ自体はたどたどしいし、「なんだこいつ見かけだけか」と思われたかもしれません。

でも、なんだこのレベルか、とがっかりされようが、それを口にするような方にお会いしたことはありません。
むしろ「これ参考になるよ」と言って素敵サイトを教えてくれるような人ばかりでした。
エンジニアさんって初学者に優しいんですね、感動でした。
(そろそろ初学者レベルを脱しないとやばいなと思ってはいます。すみません。)

まとめ

正直言うとまだ「vimを使ってたから死ぬほど速くなった」気はしていません。残念ながら。
もちろん、入社当時からは圧倒的に速くなりましたが、でもSublimeを使い続けていてもそうだったと思う。

どちらかというと、vimとzshを含め黒い画面を思いきって使い始めたおかげで、「エンジニア」としてなんとかやっていく足がかりというか心構えができた気がするナァ。という感じ。
使わなくてもできている人はたくさんいますが、私にとっては大きなことでした。

使いやすくて自分にとって何かいいことがあるなら使えばいいよねという話でした。

敷居が高く見えがちなツールですが、少しでも「試してみようかな」と思えるきっかけになれば幸いです。

(後日、先輩になんでターミナルを勧めたのかを聞いたら、「zshとかvimとか使える女子かっこいいやん」とか言われました。)


Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>