新しいことを始めるときに、何から始めてよいのかわからずに手が進まないということがよくあります。。

そういうときに自分がやっている手順をまとめてみようかなと思います。

今回はサイトをリニューアルするにあたって、新しく始めたことがあったのでそれを例にやったことを書いていきます。

現状分かっていることを分解する

サイトを作り直すにあたって新しいことがいくつかありました。
全体のことを考えると手が動かない原因になってしまうので、手を動かせるような単位に分解します。

新しいこと

• サーバーはどこを使うのか
  • GCP
  • AWS
  • Azure
• データベースをどうするか
• Nuxtを使うためにやること

わかっていること

• ReactからNuxt（Vue）への移行

わかってるけど悩みそうなところ

• expressでapi作ってるけどNuxtにしたときにどうなるのか

大まかに分けました。

どれから手をつけるか決める

完成しているサイトはあったので（Reactでできているサイト） 「サーバーはどこを使うのか」を調べて。「サーバーを移行」してみることにします。

情報を集めて全体像を把握する

GCP、AWS、Azureが候補にあったので それぞれについて、Googleで検索してメリット、デメリットを調べていきます。

とにかくたくさん検索

どうやって検索して調べるのか、センスが問われるところですが だいたい先人の方々がやってくれているので、それが引っかかってくるようなワードで探して全体像を把握していきます。

• GCP AWS Azure メリット
• GCP AWS Azure 料金
• GCP AWS Azure 使いやすさ
• GCP AWS Azure データベース

• GCP データベース
  • GCP Firebase
  • GCP Firestore
  • GCP mongodb
  • GAE mongodb
  • GAE データベース
  • GAE Firestore

などなど..とにかくいろいろのサイトを探して情報を集めていきます。 サイトはブックマークやslackに貼ったり、dropbox paperにまとめたり

一見関係なさそうなものなども念の為、後々役に立つかもしれないので、ある程度関連がある項目ごとにURLをメモしておきます。

全体像がつかめたら

それぞれのメリット・デメリットを見てどのサーバーを使うかや、どういう方法でデータベースを扱う方法があるかなど、全体像をざっくりと掴むことができました。

調べていくうちにfirebase、firestoreが引っかかってきました。

もともと気になっていたのと、仕事でもGCPを使っているので、今回はGCP（GAE）を使うことにしました。

さらに細かく調べる

GCPを使うことにしたので、GCPでのサイトの公開の仕方についてさらにGoogleで検索して調べていきます。

• GCP サイト公開
• GAE サイト公開
• GAE Firestore

いろいろ調べて、GAEとデータベースはfirestoreを使うことにしました。

実際に作業するために

現状のサイトをGAEとFiresoreを使って公開しようとしました。

ここで問題となるのが、 今完成しているサイトはmongodbを使っているので、そのままGAEにデプロイしてもデータベースが動かないということでした。

ここで更に作業を分割して、小さく解決できる単位に分けていきます。

小さく解決できる作業単位で問題を分割する

• MongodbからFirestoreに移行する　
  • Firestoreをlocalからアクセスできるようにする
• GAEにデプロイする
  • GAEからFirestoreにアクセスできる方法を調べる
  • 実際にデプロイする方法を調べる

これを一つづつ解決すればサイトが公開できるという単位に作業を分割しました。

ツールをつかって項目を整理する

ここまでくると作業単位になっているのでツールに入れていきます。自分の場合trelloを使っています。asanaも一時期使っていましたが。看板が好きなので。

「作業前」「作業中」「完了」にわけて、作業単位でタスクを切りました。 このときに作業にタスクの中に詳細やコメントを残す事ができるので、作業をする上で調べたときのリンクなどを貼ってまとめるようにしています。

自分がどういうふうに使っているか、今のサイトで切っているタスクをまとめているので参考程度に。

clover.blue | Trello

ひとつひとつ実装を進める

作業単位に問題を細分化することができたので 作業をしながら、わからない部分をGoogleで検索していきます。

• Firestore localから
• Firestore node
• Firestore javascript

などなどFiresotreをローカル環境からnodeで使う方法について調べていき移行していきます。 （今完成しているサイトはサーバーをnodeで実装しているため）

解決できたら作業単位で分割した次の項目の実装をすすめます。

作業単位の項目が終わったら

分解した作業をすべて終えると “「サーバーはどこを使うのか」を調べて。「サーバーを移行」してみることにします。” この目標を達成することができました。

そうしたら次は”Nuxtを使うためにやること”を進めていきます。

まとめ

• 現状分かっていることを分解する
• どれから手をつけるか決める
• 情報を集めて、全体像を把握する
• 全体像がつかめたら、さらに細かく調べ、実際に作業できるような準備をする
• 作業のイメージができたら、作業単位で問題を分割する
• ひとつひとつ実装を進める

何をしようか迷ったときはこのようにしてひとつひとつ進めて解決するようにしています。 ポイントはなるべく問題を小さくして解決していくということでしょうか。

問題を小さく分解できると、少しづつ進んで行く感じがあって達成感もあるので続けていけるというのもよいところです。

分からないところが出てきたら、Google検索で検索して答えにたどり着けるかというのも重要ポイントですね。Google検索能力はとても大事です。

何から手を付けていいのか分からなくなときは、この記事で書いたことを意識して 落ち着いて解決できる形にものごとを小さく分解して頭を整理しながら、いろいろ作っていきたいですね！