主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

リアルフロントエンド勉強会 vol.1

f:id:nakagaw:20140923231200j:plain

会社ではTortoiseSVNを使ってバージョン管理をしているので、今、業界で賑わっているGit話とかがピンとこない。それをクリアにしていくため、みんなで集まってやってみようということでこれまでLINEベースだったフロントエンド勉強会をリアルに開きました。

前日に思いついて集まった参加者は5人(内1人Skype

今日やったこと

  • インストールしてほったらかしだったSourceTreeとGitHubをちゃんとやる。
  • Nodo.jsとGruntを入れる。

SourceTreeとGitHubのやりとり設定

まずはGitHubアカウントを持ってない人は取得。

今回は、SourceTreeというGUIでGitが使えるソフトでGitを使っていきます。(Gitをインスールしていなかったら同時にインストールされます)。

ローカルとGitHubでやりとりするために、SSHの暗号通信を行います。そのために、秘密鍵・公開鍵を作成する必要があり、Macのターミナルというアプリを使ってコマンドを入力し、作成していきます。

憧れの黒い画面で、と思っていたのに、何故か僕のターミナルは白い画面設定になっていて、黒いスキンに変更しても変わらない、という謎の現象が起こっていました(後々調べたらデフォルト白い画面やん)。

秘密鍵・公開鍵を作成し、公開鍵をGitHubに登録するところまでのやり方については下記の記事を参考にしました。

参考:SSHの公開鍵を作成しGitHubに登録する手順 - mon_sat at Co-Edo(半年前の自分への教科書 / 別院)

個人的には、ローカルの適当な場所に「.ssh」フォルダを作成して、ターミナルから鍵作るところはそれっぽくて良かったです。

GitHub上で新しいリポジトリ「hogehoge」作成して、SourceTreeで新規リポジトリをクローン、ソースパス/URLのところに「git@github.com:username/hogehoge.git」に入れてクローン!

ローカルのGitディレクトリに「hogehoge」プロジェクトができてます。それ以降に関しては、バージョン管理してる人ならある程度わかりそうな雰囲気。

Windowsマシンの人は少し手こずってましたが、なんとかここまで全員完了して、ひとまず、SourceTreeでのバージョン管理とGitHub使って始まった感は感じられました。

Windowsの人はこちら参照ください。

Node.jsとGruntをインストール

本当はフロントエンド開発環境を整えて、次から何かつくろうぐらいまでのイメージをもっていたのですが、本日は、Node.jsと、Gruntをインストールして終了。

ターミナルからGitのプロジェクトファイルまで移動したりとか、すごいやってる感あってよかったですが、Macはファイルパスとるのすごいめんどくさいけど、みなさんどうしているのでしょうか;

あとは、package.jsonを生成し、grunt-contribプラグインをインスールするときに何故かエラーになったけど、どうやらPCのアカウントの関係だったらしく、コマンドの先頭に「sudo」と入れて管理者パスワードをいれたらインストールできました。

参考:今更だけどやるgrunt入門編・インストールから基本的な使い方|WEB Drawer
参考:Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

家帰ってからGruntがちゃんと動いているかを確認して、これを書いてアウトプットで定着までやる。

これも3日坊主で終わらないようにしていきたいです。

南無。