デザイナーが 開発チームの一員として commitしていくための知識 (黒い画面つかうぞ編)
こんにちは、むろです。
未経験から人類やってる駆け出しホモサピエンスです。
このエントリーはbosyuアドベントカレンダーの7日目のやつです。 前日はluluさんのvalue_semantics gemを使ってValueObjectをいい感じに実装するで、 明日はnaoさんがなにかかきます。
*
で、わたしは今回タイトルのとおり、「デザイナーが開発チームの一員としてcommitしていくための知識」 として「黒い画面の使い方」についてチョットだけ書きます。
どういう人に読んでほしいか
- 駆け出しWebデザイナーさん
- 受託系から事業系(インハウスデザイナー)に転職したいなと思っているデザイナーさん
- デザイナーと仲良くなりたいなと思ってくれてるエンジニアさん
わたしはいつも、初対面のエンジニアさんには「UIデザイナーで、MVCのVを書いてます」という自己紹介をするようにしていて、 だいたいどちらのチームでも「エンジニアさんが実装する機能のUIをいい感じにしておく」というのを主にやっています。
具体的に言うと
- エンジニアさんが機能を実装してるブランチをpullしてそこからUIブランチを切る
- ローカル環境で動作確認しながらslimとscss(※)でデザインをかく
- いい感じになったらPRを出す
という感じです。
mocの作成とコーディング作業が一緒になっているので工数が削減できますし、 デザイナーとマークアップエンジニア2人分のリソースを1人で賄う感じになり、リソースコストも削減できるので 「便利な人」として取り扱われています。
ここまで出来るようになるまで色々少しずつ勉強をしたのですが、 最初にやった勉強って何だったかな〜と考えたところ 「黒い画面の使い方を覚える」だったので、 「黒い画面ってエンジニアさんが使うやつだよね…こわそうだし私には一生理解できなさそう」ってこっそり思ってる あなたに私が最初に覚えた黒い画面のコマンドを特別に教えます！！
(申し訳ないですが MacOS 限定とさせていただきます)
黒い画面って何？
「ターミナル」というやつです。
Launchpadだと「その他」に入っています。
これね！
見つけたら、クリックして起動してみましょう！
こんな感じのやつが出ましたね。人によっては黒い画面ではなく白い画面になっていると思いますが、 色が違うだけで中身は同じなので、気にせずコマンドを叩いてみよ〜
黒い画面でコマンドを叩く
pwd: 現在地を知る
pwd は print working directory の意味で、
「今いるディレクトリがどこなのか」を出してくれるコマンドです。
黒い画面で下記のコマンドを入力してみてください。
pwd
わたしの画面にはこんな感じで表示されました。
ファインダーでいうとここにいます。
なるほど〜
それじゃあ次はディレクトリを作ってみましょう
mkdir: ディレクトリを作る
mkdir は make directory の意味で、「ディレクトリを新規作成する」コマンドです。
mkdir [ディレクトリ名] ( mkdir のあとは空白が入ります)で作成することができます。
まずは練習で、kuroigamen を作ってみましょう！
以下のコマンドを黒い画面で入力してみてください。
mkdir kuroigamen
ファインダーで見てみると、こんな感じでkuroigamenディレクトリが出来ているのを確認できます。
それじゃあ次は黒い画面でkuroigamenディレクトリが作れたかどうか見てみましょう！
ls: 現在いるところにあるディレクトリやファイルを表示する
ls は list segments の意味で、「存在するディレクトリやファイルなどを表示する」コマンドです。
黒い画面で下記のコマンドを入力してみてください。
ls
あなたの黒い画面にkuroigamen はありましたか？ (もしなければ、mkdir でもう一度作ってみましょう！)
それじゃあ作ってみたkuroigamenディレクトリに移動してみましょう
cd: ディレクトリを移動する
cd は change directory の意味で、「ディレクトリを移動する」コマンドです。
cd [移動したいディレクトリ] ( cd のあとは空白が入ります)で移動することができます。
試しに kuroigamenディレクトリ に移動してみましょう〜
下記のコマンドを黒い画面で入力してみてください。
cd kuroigamen
移動できましたか？
cdコマンドは他に
などあります。
移動したいディレクトリが ../hoge/fuga/ みたいに何階層も先だったりする場合、
いちいちディレクトリ名を思い出したり入力したりすることなく、tabキーを叩くだけで移動できるので便利です。
試してみてくださいね！
それじゃあ次は黒い画面で kuroigamen.txt ファイルを作成してみましょう！
touch: ファイルを新規作成する
touch は 「ファイルのアクセス時刻と修正時刻を変更する」コマンドです。意味わからないですよね、わかる(わかる)。
いったん意味は置いといて、
touch [ファイル名] を叩くと、「いま存在しないファイル名を指定した場合はファイルを新規作成することができる」ってのを覚えておいてください。
試しに kuroigamen.txt を作ってみましょう
下記のコマンドを黒い画面で入力してみてください。
touch kuroigamen.txt
できましたか？出来たかどうかを ls で確認してみてください。
あった〜
それじゃあ次は黒い画面でファイルをコピーしてみましょう！
cp: ファイルやディレクトリをコピーする
cp は「ファイルやディレクトリをコピーする」コマンドです。
cp [コピー元] [コピー先] で、コピーすることができます。
試しに kuroigamen.txt をコピーしてshiroigamen.txt を作成してみましょう
下記のコマンドを黒い画面で入力してみてください。
cp kuroigamen.txt shiroigamen.txt
できましたか？出来たかどうかをまた ls で確認してみてください。
白い画面.txt爆誕〜
それじゃあ次は黒い画面でkuroigamen.txtを削除してみましょう
rm: ファイルを削除する
rm は「ファイルやディレクトリを削除する」コマンドです。
rm [ファイル] で、削除することができます。
試しに、さっき作った kuroigamen.txt を削除してみましょう！
下記のコマンドを黒い画面で入力してみてください。
rm kuroigamen.txt
削除出来たかどうかを ls コマンドで確認してみましょう
なくなってる〜
わたしが最初に覚えて、今でも使ってる…というか使えてるコマンドは、このたった5つです。 どうでしょう、思っていたよりこわくないですよね？
おまけ
open .
を黒い画面で入力してみてください
わービックリ！フォルダが開いた！
黒い画面はこれ以外にもアプリを起動したり、ブラウザで指定したURLバッと開いたりなどの操作が色々出来ちゃうので、やりたいことをぐぐって試しに遊んでみてください！
( open は今回のエントリーを書く時にmya_akeさんから教えていただきました。ありがとうございます〜)
こちらからは以上になります。
PR
bosyu社では現在デザイナーを募集しています。 みんなフルリモートで働いてる楽しい現場です。
ご興味ある方、是非ご応募ください！
