環境構築編

新人研修記録② 元SUSHI屋が学ぶDAPPの作り方

お疲れ様です。34歳の新入社員徳地です。まずは環境構築を進めていきたいと思います。前話をご覧になっていない方は、ぜひ、新人研修記録①インドの寿司屋DAPPプログラマーになる？をご覧ください。

本日の目標：
GITHUBの使い方を学び、エディタをインストールし、Vuejs を入れて、ローカルでvuejsが動くようにする。

実は１年くらい前にプログラミングを学ぼう！！と頑張った時期があったのですが、コピペしまくって適当に数値を変えながら作っていたら、途中からどこを自分が書き換えて、どれが動くコードだったのかわからなくなりギブアップしてしまいました。

同じ事態に陥らないように、今回はGITHUBの使い方を正しく覚える事と、きっちり原理を理解してから前に進んでいくために、全プロセスをドキュメント化していこうと思います。

VSCODE インストール

メタップスアルファはみんなVSCODEを使ってるらしいので、普通にググって最新版をインストールしました。OSXなのに、マイクロソフトのエディターを使ってるのが面白いですね。

そのあと、Vueで書く時用のエクステンション、Veturをインストールします。

エディターに関しては、udemy でvuejsのコースを受けてた時に使ってたのでスムーズに終わりました。エディターを画面に開くとプログラマになった感が出てテンション上がります。

youtubeでgithubの使い方を練習

ゲーム開発してた頃、デバッグするために使ったことがありますが、Pullボタンを押して最新のビルドを入手することしかしてなかったので、基本的な使い方からyoutubeで学びます。Sushiの巻き方から、githubの使い方までYoutubeの守備範囲広すぎてすごい。

二十分くらいの動画だったんですが、とりあえず、以下の三つのコマンドをメモりました。多分これでなんとかなる、、、はず、、、

１. git clone {GITのURL}      →  実行したディレクトリと、GITのURLを紐づける
２. git commit -m “コミット内容” →  ローカルに進捗を保存
３. git push                   →  githubにローカルの進捗をアップロード
追記： 4.git add .            → コミット対象のファイルを登録する。

そのため、こまめにcommitして、１日に何度かpushするオペレーションで進めたいと思います。

追記：

何とかならなかった。。。4個必要でした。git add . で更新のあったファイルを登録しないと、commitしても何も保存されないので注意。使い方は以下のイメージです。

初回（作業するディレクトリで）
git clone https://github.com/metaps/crippon/
git add .
git commit -m "This is first commit."
git push

２回目以降は

（作業するディレクトリで）
git add .
git commit -m "This is second commit."
git push

ちなみに、addと.（ピリオド）の間には空白が必要です。ピリオドの意味は全部ということみたいです。

あと、git commitの後は-mつけないとダメなので、ドMな皆様もそうでない皆様も必ず-mでコメントをつけましょう！

こういうちょっとした内容って、人に聞くと三十秒で解決するのに、自分で調べると１時間とか普通にかかるので、エンジニアの横で 研修できる環境は控えめに言って最高です。

Vuejsの環境構築

ここからは、udemy で二ヶ月前に購入した講座を見ながら作業を進めていきます。この講座はわかりやすく、ドイツ人のお兄ちゃんが動画の中でムッチャ褒めてくれてやる気が出るので、おすすめです。笑

基礎を学習したあと、ミニアプリを作理ながら学習を進める講座です。

まずnodejsをインストール

まっさらなOSXにはnodejsが入っていないので、nodejsをインストールします。nodejsはサーバー側で動かすjavascriptの実行環境で、今回はローカルでテストしながら開発を進めるので、ローカルにインストールします。

その後、npm(nodejsのパッケージ管理ソフト)を使ってvue-cli をインストールします。vue-cliは vueを使ったウェブアプリの雛形をローカルに作成してくれるソフトです。

sudo npm install -g vue-cli

vue-cliのインストールが終わったら、以下のコマンドでvueの雛形をターゲットのフォルダにインストールします。今回はudemyのおすすめ通り、webpack-simpleを選びました。webpackの詳細はここが詳しいです。

vue init webpack-simple vue-cli 

コマンドを実行すると、プロンプトでプロジェクト名、プロジェクト内容詳細、製作者、ライセンス、sassを使うかどうかを聞かれるので、適当に解答すると、vuejsの雛形がコマンドを実行したディレクトリに展開されます。

これで、ターゲットのディレクトリへのvuejsのテンプレートのインストールが終わりました。あとは、nodejsサーバーをディレクトリにインストールして、サーバーを立ち上げて、今日のミッションは完了です。

npm install

で、nodejsをインストールします。これ、めっちゃ時間かかります。５分くらい普通にかかります。

npm run dev

で、nodejsサーバーを実行すると、アプリが動き出します。

おおーー、なんかプログラマーっぽい。何かが動き出した感が凄いあります。ブラウザーにlocalhostとか打ち込んでると格好いいですね。

Github のプロジェクトに自分が想定するタスクを書き出しました。ミディアムの更新は若干ラグがあるので、最新の進捗は以下からどうぞ。

metaps/crippon

次回は、vuejsでホームページのテンプレートを作る予定です。今週中に、もう1回更新したい。。。

雑記

メタップスはオフィスの電話が全く鳴らずシーーンとしていて、精神と時の部屋に居るような気持ちになります。電話どころか、メールもほとんど使っていなくて、みんな電話やメールの代わりにSlackというソフト（ラインの業務用みたいなやつ）を使っています。

入社時にSlack使ったこと無いと言ったら、21世紀に舞い降りた北京原人を見る様な目で見られました。IT企業に入るおっさんは入社前にSlackを触っときましょう。