趣旨
アプリ開発をしたいときありますよね。（あるあるだね。）
でも忙しすぎて時間がない。時は金なり。お金は大事。
そんな人のために、アプリ開発最初の整備を5分で行います。
あ、でも本当に最初の人は色々インストールしなくちゃだから15分ください。
次からは5分でできるので最初ぐらい我慢してください。開発は忍耐だ。
(なんでこんな記事書いたかというと、ソフトとかのインストールをしてもgitへの登録とか結構最初はわかりづらいと思うので、自分のメモも兼ねて。慣れたらどってことはないんですけどね。)
前提とか
- とりあえずreact使います。フロントサイドの神。
- 開発環境はここではMacですが、Windowsでもほぼ同じです。
- ソース管理はgithubです。手軽にオープンリポジトリ。
- エディタはVSCodeです。思ったより使いやすかった。何よりVimが使えるから神。
というように一般的な構成にしますので、是非これ通りにやってください。 (一般的すぎると私の中で話題に)
今回は開発が開始できればいいのでDB周りは作りません。あしからず。
流れ
冒頭に話しましたが”開発始めて！とりあえずよろしくね！！”って人は以下の"前提準備"からやってください。
初めてじゃない、とりあえず色々インストールは終わってる、って人は"開発開始"からやってね。
最初に謝っておきます、実際の手順は他の人がまとめてくれてるのでほとんどリンク飛ばさせていただきます。先人の人に感謝。感激。雨霰。
前提整備
- Nodejsインストール
- VSCodeインストール
- Gitインストール
開発開始
- githubリポジトリ作成
- create-react-app
- Let's Coding!
前提整備
では前提整備から始めましょう。
基本的に他の人の記事乗っけてます。
わかりづらければ自分で調べてください。（結構バージョンの進化が早いので、画面若干違うかも。）
mac使っててnodejs使いたいなら、[nodejs mac]とかで調べればいっぱい出てくる。
Nodejsインストール
What's this
Reactを利用するためのパッケージマネージャであるnpmを利用するためだけのもの。
javascriptの実行環境です。
Macの人は以下。
windowsの人は以下。
VSCodeインストール
What's this
Microsoftが開発しているエディターです。
エディターは大事ですね。みやすいというのはとても大切です。
他にもAtomとかもありますが、好きなの使うといいです。でも結構VSCode優秀。
ちょっとバカにしてた。マイクロソフトさんごめんなさい。
Macの人は以下。
https://qiita.com/watamura/items/51c70fbb848e5f956fd6
Macはインストール楽でいいよね。
windowsの人は以下。
https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1
面倒なので僕は英語のまま使ってます。
Gitインストール
What's this
今や世界一有名なソースコード管理の仕組みですね。
もはやこれは必須。
Macの人は以下。
https://aprico-media.com/posts/1637
さっきhomebrewインストールした人はコマンド一発ですね。
そうでなくてもパッケージで入れるだけです。
なんとなく、Xcode入れてる人は入ってるかも。git --versionとか打てばわかる。
windowsの人は以下。
https://prog-8.com/docs/git-env-win
macより面倒かも。がんばるんば。
ユーザ情報の登録
https://git-scm.com/book/ja/v2/使い始める-最初のGitの構成#_個人の識別情報
インストールできたら以下のコマンドでユーザ情報を登録しておきます
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
一呼吸
おめでとうございます。ここまでで実行できるソフトが整いました。
こういうのはたいがいこういう前提を揃える所で挫折しがちなんですよね。
(Javaとかちょっと前まではこの整備の部分で初心者を選定しているんじゃないかとか思ってた。Pathとか見慣れてない人は全然よくわからないからね・・・）
さっきも書いたけど、アップデートが早すぎて結構インストール画面とか違ってたりするので、根気よく頑張りましょう。
開発開始
ストップウォッチは用意したか
これから開発開始RTAを始める。
はい、よーい、スタート。
githubレポジトリ作成(1.5分)
初回だけ
今回はオープンで行くので、以下でアカウントとっておいてください。
https://github.com/
また、アップロードもするので鍵の登録もしておいてください。以下参考。
(Mac)
https://qiita.com/unsoluble_sugar/items/14bea376d8e6fce82eb3
(Win)
https://qiita.com/coffee_g9/items/e1b9ab28cfa54f854308
二回目以降はここから
以下URLからリポジトリを新規作成。
https://github.com/new
Repository name：適当に
Public：今回はPublicで
あとはそのままCreateRepositoryで。
(.gitignoreとかlicenseとかinitialize READMEとかどちらでもいいです。)
create-react-app(1.5分)
Facebook謹製のreact初期設定コマンドを利用しましょう。
初回だけ
Macならターミナルを起動して、WindowsならPowershellを起動して、以下を実行です。
npm install -g create-react-app
これはcreate-react-appというコマンドをどこからでも実行できるような形でインストールしています。
二回目以降はここから
cd Documents
create-react-app testapp
testappはアプリ名です。さっき作ったリポジトリ名と同じだとわかりやすいと思う。
Let's Coding!(2分)
ここまでで、reactの開発準備は完了しているので、適当に起動確認とgitへのアップロードをします。
react実行
VSCodeで開いてみましょうか。
cd testapp
code .
先ほどのcreate-react-appで、アプリ名としたディレクトリができているので、そこに移動し、
そのあと、codeコマンドでVSCodeを起動しています。(ピリオドつけているのは"このディレクトリで"起動するという意味です。)
macの人はデフォルトではcodeコマンドで起動できないので以下の記事を参考にしてください。
https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c
これでできなければ普通にVSCode起動してさっき作ったディレクトリを指定してください。
ではサーバを起動してみましょう。
npm start
はい、これで起動しました。簡単ですね。Facebookさんありがとう。
gitへプッシュ
とりあえず開発の雛形ができたので、このソースコードをソースコードを管理するgithubへアップロードしようと思います。
gitを使ってアップロードすることをプッシュするって言います。かっこいいですね。プッシュ。声に出してよみたい日本語。「プッシュね。うんうんわかるわかる。昨日食べたよ」
初回だけ
先ほどgithubでリポジトリを作ったので、それを登録しておきます。
githubの画面に戻って、git@から始まる文字をコピーします。枠の右側のクリップボードへコピーボタンをクリックしても大丈夫です。
vscodeに戻って、コンソールを開いて、以下を実行しましょう。
git remote add origin [先ほどコピーした文字列]
これにて、アップロード先の情報が登録されました。
二回目以降はここから
では、実際にgithubへpushしてみましょう。
vscodeで開いたコンソールで以下を実行してみましょう。
git add .
git commit -m "First Commit."
git push origin master
何をしているかというと、
- git add .
アップロードするファイルを登録。(.としていることによって、全てのファイルが対象となっている。ただし、二回目以降は変更のあったファイルのみが対象となる。)
- git commit -m "First Commit."
この状態で一区切りをつける。タグとして"First Commit."というメッセージもつける。
- git push origin master
githubサーバへ、変更を反映させる。
こんな感じです。
・gitめちゃくちゃわかりやすいやつ
https://qiita.com/jesus_isao/items/63557eba36819faa4ad9
・git push origin masterについて
http://dqn.sakusakutto.jp/2011/10/git_push_origin_master.html
おわり
とりあえず周囲に開発を始めたいという奇特な人がいたらこれをぶん投げればいいと思います。
なんかあったらコメントください。ベストエフォートで対応します。(対応するとはいってない)