無職でもGitでブランチ切ってプッシュまで出来ました。（ハッカー養成塾第３回）

日比谷線恵比寿駅が火事だろうがギークオフィス恵比寿で作業していた第三回目。キータイピングのトレーニングを中心にAngularJSのタスクに入り、とりあえずサンプルアプリケーションの内容をJadeで弄ってBootstrapを適用し、GitでCodebreakにプッシュするまでをやりました。なんとなくGitの仕組みと流れがほんの少しわかった気がします。

キータイプの進捗

タイピング矯正自体は思ったより楽

前回の記事でも書きましたが僕は我流タイピングですので、今後要求されるスピードと正確さに障害となりそうなのでここ一週間は矯正に努めました。（気づいたらいつもどおり打ってるときもありますが。）タイピングマスターの矯正プログラムで指とキーをある程度確認した後、e-typingで慣らしていきました。１周間だけなんですがだいぶ改善できました。まだ癖がある部分もあるのですが、少しずつ矯正していけば問題ないと思います。

問題は右手小指のキータイプ部分

/ ? ; : ' \" {} [] \\ | - _ = +

Macbook AirのUSキーボードの右手小指部分のキーです。プログラムを書く上で重要なキーが集中しています。この部分は僕は普段無意識に目で見たり、他の指でキータイプしてしまうのですが、タッチタイピングでスピーディーに処理するためには小指で正確に打つ癖を付ける必要があります。キータイピングのトレーニングはサンプルアプリのコードの１部分を１分以内にミスなしでタイピングしていくものなのですが、僕は正規表現が使われている部分がクリアできませんでした。他の指で打ち込んだ時点で、次のタイピングがその分ずれてしまいます。練習あるのみですね。

サンプルアプリの改良：投稿者一覧の表示をリストからテーブルに変更し、BootstrapのCSSを適用する。

やることはJadeファイルのリスト部分をテーブルに変更してBootstrapのクラスを適用するだけです。

HTML、CSS、BootstrapとJadeはOK

HTML/CSSとBootstrapは触ったことがあるので問題ないですね。Jadeは初めてなんですが、HTMLの軽量マークアップなのでドキュメントを適宜読んでいけば問題なさそうです。

Jadeの基本的な書き方

色々便利なコンポーネントなども揃っているようですが、とりあえず基本の挙動を押さえとけばよさげ。Jadeの公式ドキュメントのトップページのソースコードに実は記入できて即座に出力を確認できるので色々いじって挙動を確かめると分かりやすい。

インデントで入れ子構造を作る

<div id=\"list\"><ul><li>リスト1</li><li><a href=\"list2.html\">リスト2</a></li></ul></div>

これをJadeの記法で書くと

#list  ul    li リスト1    li      a(href='list2.html') リスト2

このようにインデントを揃えることで入れ子構造を作る。IDやクラス指定はCSSセレクタと同様で、それのみの場合は自動でdivにしてくれるようです。IDやクラス以外の属性を指定するときは(src='img.jpg')のように（）内に書くみたい。シングルクオーテーションは自動でダブルクオーテーションにしてくれるようです。

インライン要素の入れ子

<p>吾輩は<strong>猫</strong>である。</p>

これをJadeで書くと

p | 吾輩は strong 猫 | である。

リストをテーブルに変更

h4 投稿一覧(最新20件)  .list-group    .list-group-item(ng-repeat=\"post in posts\") {{post.message}} ({{post.from.name}}) {{post.created_time|date:short}}

投稿一覧のこの部分に手を加える。サンプルアプリの見た目はリスト構造に見えるがソース上はdivのブロック要素にBootstrapのlist-groupクラスを適用してリストっぽく見せてるということが分かる。AngularJSのループ処理や{{post.message}}などAngularマークアップの詳細はよう分からんので今はパスして、出力後のソースと比較して何を引っ張ってきてるかを確認。

<div class=\"list-group\"><!-- ngRepeat: post in posts --><div class=\"list-group-item ng-binding ng-scope\">hogehoge (種延 真之) Jan 21, 2015</div><p><!-- end ngRepeat: post in posts --></p></div>

と出力されているので、{{post.message}}が投稿内容、{{post.from.name}}が投稿者名、{{post.created_time|date:short}}が投稿の日時ということが分かるので、これらをそれぞれテーブルのセルに分ければOK。

table.table  tr(ng-repeat=\"post in posts\")    td {{post.message}}    td {{post.from.name}}    td {{post.created_time|date:short}}

Bootstrapのテーブルの基本のCSSクラスはそのままtableなのでクラス指定をしておく。最初のタスクはこれで完成。

Gitで変更点をCodebreak;にプッシュする

あまり理解できてないのですが、とりあえず今回のタスクの更新をCodebreakにプッシュします。

現在のブランチを確認する

git status

と打つと On branch masterという部分があるので、その時はmasterブランチにいるということ。今回はタスクごとにブランチを作成します。

ブランチを作成して移動する

git checkout -b ng_task100

git checkout ngtask100でngtask100というブランチに切り替えることができます。bをオプションで指定することでng_task100というブランチを作成して移動を一つのコマンドで行っています。

変更点の確認

コミットする前に変更点をチェック。ちょっとしたスペースが入るだけでも差分として残るので純粋な変更のみに整理しておく。git statusで何個のファイルが変更になっているか、git diffで差分を表示できるので確認。

変更をローカルリポジトリにコミット

git commmit -am 'message'

aオプションで変更があるファイルを全てadd。mオプションでメッセージをつける。git add<とgit commit -mを同時にやってる感じ。 aオプションで変更があるファイルを全てcommit対象に。mオプションでメッセージを付ける。 1/23追記: aオプションのaはallで変更のある全てのファイルをcommitするオプションで、git addはcommitするファイルを指定するコマンドなので全く別物でした。

プッシュ先のリモートリポジトリ確認

git remote -v

リモートリポジトリの一覧を表示する。vオプションでURLまで表示できます。

リモートリポジトリへプッシュ

git push origin ng_task100

リモートリポジトリはorigin、ブランチはng_task100にプッシュ。これで一連の流れが完了です。

次回のタスクに向けて

次回はサンプルアプリのBBSに投稿者のFacebookプロフィール画像を表示するようにします。Facebookのプロフィール表示自体はユーザーIDがわかれば簡単なので、jsonに格納されているユーザーIDををAngularで引っ張っていけばできるのかなー？っと今は考えております。今回はGitの流れが何となくわかったので満足。JavascriptとAngularJSとjsonについて次回までにもうちょっと勉強しておきます。あとキータイピングとVimも！