# moneta開発方法(mac os) ## 1. Homebrewのインストール リンク先の記事の通りHomebrewをインストールする。 https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9 インストール結果を確認する。 xcode導入時にgitもインストールされている。 ``` $ brew -v Homebrew 1.8.1 $ git -v git version 2.19.1 ``` > そもそもgitって何？を調べるなら、以下の記事がおすすめ。 > サルでもわかるgit入門 > https://backlog.com/ja/git-tutorial/intro/intro1_1.html ## 2. ソースコードの取得 引き続きターミナルから作業する。 ここでは`/Users/me/moneta`を作業フォルダとする場合の手順をしめす。 `git clone`コマンドはフォルダの作成とソースコードの取得を同時に行う。 ``` $ cd /Users/me $ git clone https://github.com/tamura2004/moneta.git Cloning into 'moneta'... remote: Enumerating objects: 782, done. remote: Counting objects: 100% (782/782), done. remote: Compressing objects: 100% (568/568), done. Rremote: Total 782 (delta 467), reused 518 (delta 203), pack-reused 0eceiving Receiving objects: 962), 6.83 MiB | 6.59 MiB/s Receiving objects: 100% (782/782), 7.84 MiB | 5.59 MiB/s, done. Resolving deltas: 100% (467/467), done. ``` ### ソースコードの確認 ダウンロードされたフォルダの中身を確認する。 以下のようなソースコードが表示されれば成功である。 ``` $ cd moneta $ pwd /Users/me/moneta $ ls -la total 446 drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 . drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 .. -rw-r--r-- 1 papa 197121 33 Jan 27 08:34 .browserslistrc -rw-r--r-- 1 papa 197121 50 Jan 27 08:34 .firebaserc drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 .git -rw-r--r-- 1 papa 197121 232 Jan 27 08:34 .gitignore -rw-r--r-- 1 papa 197121 416 Jan 27 08:34 README.md -rw-r--r-- 1 papa 197121 53 Jan 27 08:34 babel.config.js drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 dist -rw-r--r-- 1 papa 197121 234 Jan 27 08:34 firebase.json -rw-r--r-- 1 papa 197121 530 Jan 27 08:34 jest.config.js -rw-r--r-- 1 papa 197121 1194 Jan 27 08:34 package.json -rw-r--r-- 1 papa 197121 59 Jan 27 08:34 postcss.config.js drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 public drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 src drwxr-xr-x 1 papa 197121 0 Jan 27 08:34 tests -rw-r--r-- 1 papa 197121 699 Jan 27 08:34 tsconfig.json -rw-r--r-- 1 papa 197121 536 Jan 27 08:34 tslint.json -rw-r--r-- 1 papa 197121 52 Jan 27 08:34 vue.config.js -rw-r--r-- 1 papa 197121 415237 Jan 27 08:34 yarn.lock ``` ## 3. Node.jsのインストール Node.jsはjavascriptの実行環境。コードのビルドや開発サーバの実行に必要。 https://nodejs.org/ja/ Homebrewでインストールする。 ``` $ brew install node (中略) $ node -v v 11.1.0 ``` ## 4. yarnのインストール yarnは、Node.jsのパッケージ（外部ライブラリ）の管理ツール。 https://yarnpkg.com/lang/ja/ Homebrewでインストールする。 ``` $ brew install yarn (中略) $ yarn -v 1.12.1 ``` --- このyarnを使って、monetaが使用するパッケージをローカルにダウンロードする。 使用パッケージとバージョンは、package.jsonのdependenciesに記載されている。 これらがそれぞれ利用する子・孫パッケージもあるので、全て調査の上、yarn.lockファイルに書き出している。 ``` "dependencies": { "axios": "^0.18.0", "firebase": "^5.8.0", "register-service-worker": "^1.0.0", "vue": "^2.5.17", "vue-class-component": "^6.0.0", "vue-property-decorator": "^7.0.0", "vue-router": "^3.0.1", "vuefire": "^2.0.0-alpha.20", "vuetify": "^1.3.15", "vuex": "^3.0.1", "vuex-easy-firestore": "^1.28.0" }, ``` ### axios http通信のパッケージ https://github.com/axios/axios ### firebase google提供のPaas環境 https://firebase.google.com/?hl=ja ### vue アプリケーションフレームワーク https://jp.vuejs.org/v2/guide/ ### vuetify マテリアルデザインの画面部品 https://vuetifyjs.com/ja/getting-started/quick-start --- これらのパッケージをyarn installでダウンロードする。 yarn.lockファイルがあるなら、それに基づきダウンロードを行っている。 ``` $ yarn install (中略) ``` 若干warningが出るが、errorにならないならとりあえず大丈夫。node_modulesというサブフォルダが作成され、取得したパッケージが配置される。 このフォルダ名や、配置時のルールは共通仕様であるので、プログラム内部からimport文で取り込むことが可能。 ## 5. 開発サーバの起動 フレームワークを構成する各種コマンドは、先ほどnode_modules配下にダウンロードされているが、パスを通しておらずこのままでは実行できない。 yarnは開発に必要なコマンドを、node_modulesから探して実行する機能もある。 package.jsonの以下の部分である。 ``` "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, ``` `vue-cli-service serve`が開発サーバの起動コマンドである。 ``` $ yarn serve (中略) DONE Compiled sccessfully in 9989ms No type errors found No lint errors found Version: Typescript 3.2.2 tslint 5.12.0 Time: 8127ms App running at: - Local: http://localhost:8080 ``` ## 6. ブラウザでの表示 ブラウザから、http://localhost:8080に接続する。 monetaのトップページが表示されれば成功である。