Vue.jsとFirebaseでプログラミングスクールの体験記事共有のウェブサービスを作ってみた

プロスク！というウェブサービスを作りました。

正確には、「作ってみました」という感じです。

プロスク！は、

プログラミングスクールの体験記事共有サイトです

現在の検索エンジンでは、ブロガーのSEOパワーが強すぎて、実際にプログラミングスクールに通った人の記事というのを掘り起こすのにすごく時間がかかります。

なので、実際に通った人の記事をまとめたウェブサービスを作れば役に立つのでは？と思ったのです。

軽く自己紹介をします

自分は、今年入ってからプログラミングを触り始めたくらいの初学者です。

最初の３〜４ヶ月くらいでプロゲートを１週しました。

次の２ヶ月くらいでRuby on Railsでブログサイトを作成し、Herokuでデプロイしました。

Railsといっても、１ヶ月半くらいActiveRecordとS3ストレージでうまく画像が保存されずに発狂する毎日。

僕にとって早くもプログラミングの試練が訪れたのです。

その後はクラウドソージングサイトで超簡単な案件をやってみたりしていました（このあたりで前職は辞めた）

超安く提案をしてもぎ取って、時給4００円などと出る頭の中の電卓を ⌘A ＋ DELETE しながら１〜２ヶ月くらい経過しました。

なかなか刺激的で楽しい日々でしたが、自分はフロントとかデザイン側のタイプじゃないなと気づきました。

ってことで、サーバーサイド側を重点的に学べるスクールに通った上で就職しようと思ったのです。

なぜスクールに通うかというと、前職で磨り減ってたものを回復させる期間が必要だなって感じたので、休憩期間をスクールの受講にあてようって感じです。（全然軽くない自己紹介になってしまった）

プログラミングスクールの体験記事って全然見つからない

タイトル的にはいっぱいありますよ。

「現役エンジニアが体験した本当にオススメするプログラミングスクール」

みたいな記事。

でも、実際には絶対に通ってないじゃないですか。

ブロガー相手にそういう取捨選択をする時間がもったいないと感じたので、体験記事をまとめるサイトを作ろうと思いました。

誰でも投稿できるようにしよう

ウリナリという昔のテレビ番組で、ウッチャンは言いました。

「一本の矢は折れやすくても　三本の矢は、やや折れにくい」　と。

僕が見つけた記事をまとめサイトに放り込んだとしても限界があるし、ブロガーたちのSEOに勝てるとは到底思えなかったので、誰でも投稿できるようなウェブサービスにした方が、充実したコンテンツになると思いました。

全く使ったことがなかった技術にチャレンジ

Vue.jsとFirebaseは触ったことすらありませんでした。

今後、個人でウェブサービスを作りまくることを考えれば、覚えておいた方が良い技術であることは明白だったので、この２つを軸に作ることにしました。

作るモチベーションをもらった記事・本

WEBサービスで起業したい人に読んで欲しい２０のコト
https://qiita.com/kazukichi/items/aeba286c2a750081e5c0

ウェブカツ!!を作った、かずきちさんの記事です。
僕はこの記事から多大なるモチベーションをもらいました。

しょぼい起業で生きていく
https://bookmeter.com/books/13243007

本です。えらてんさんという方の著書で、店舗経営の起業で成功した話が書かれています。
真っ向勝負でしょぼくとも誰かに必要なものを作るというモチベーションをもらいました。

ウェブサービス集めました
https://webatume.net/

色んなウェブサービスが登録されていて、他の人もチャレンジしているということがモチベーションになりました。

機能をどうするか

・記事を投稿する機能
・記事に対するコメント機能
・記事に対するいいね機能
・匿名ログイン

これらが最終的なゴールとなりました。

一番最初は、「投稿できればいいかな」と思っていたのですが、
投稿してくれる人目線でたったときに、レスポンスがあった方が楽しいと感じるのでは？と思ったので、SNS的な機能をつけることにしました。
「この記事は間違ってる（ビシーッ）」みたいな盛り上がりがあれば面白いかもしれない（笑）

匿名ログインについては、結局ブログ記事の信憑性が大事なのであって、誰が投稿したとかは大事ではないと思いました。
誰が投稿したか明らかにしたいときは任意でtwitterIDを貼る形式にしました。
むしろ、Googleログインやtwitterログインにしてしまったが故に、投稿しづらいということを防ぎたいなぁという狙いもあります。
匿名ログインにすると機能上、残念な部分が出てきてしまうのですが、完璧は無理なので諦めることにしました。
どの部分かは秘密です。

今後追加するかもしれない機能

・検索機能
投稿数がめちゃめちゃ増えない限り、カテゴリーがあれば必要ないかなと思っています。

・直接レビュー記事を書ける機能
現状、レビューを書くことができるウェブサービスが存在するので様子をみたいと思います。
レビューを書けるウェブサイト
・Escola　https://www.escola-pro.com/
・スクヒカ　https://sukuhika.com/

僕の場合は、プログラミングスクールに誰１人知り合いがいないという全くもって第三者ポジションで作ったというところがポイントだと思います。
どっちとは言いませんが、スクール側の影響をゴリゴリ受けてるのを隠しながら運営しているでしょうからね。

リリースまでに１ヶ月半

Vue.jsの基礎学習を始めてから１ヶ月半ほどでした。
「明日できることは明日やる」と決めて、こっちを最優先で進めました。
最初はUdemyのVue.jsの動画から入って、書籍は「基礎から学ぶVue.js」を書いました。
基礎的な書き方と、何ができるかの機能だけわかった時点で制作に取り掛かかり、
２週目・大枠のデザインなどなどが完成
３週目・Firebaseのドキュメントとにらめっこ
４週目・FirebaseとVuexマジでわからんけどゴリ押しでとりあえず一旦形にする
５週目・デザインというか表示の面がやばかったので圧倒的に調整し直す、クソコードをできるだけ見直す
６週目・Firebaseの設計がやばかったので作り直し（firebaseのドキュメント読み取り数がやばくなる気がした）。細かい調整と不安からくる瞑想タイム、友人からの鋭いメスに対する調整。

今

①完璧すぎない
②悩まない
の精神で、世に放つことに決めました。
また、デプロイを押した後に、コンテンツが０だと寂しいので自分でQiitaやnote、グーグル検索で良い記事を探しました。
アフィリエイトが貼っていない記事を探すのはめちゃくちゃ大変でした。
でもプロスク！を見ればその大変さを感じずに良い記事が読めるって考えれば作った意味がある気がします。

とりあえず環境構築する（以下コードの話）

node.jsのダウンロード
https://nodejs.org/ja/

$ npm install -g @vue/cli

$ vue create prosuku
 ①Manually select features
 ②Babel、Router、Vuex,CSS Pre-processors,Linter
  　「Routerをhistroy modeにしますか？」 →　Y　
 ③Sass/SCSS
 ④ESLINT with error prevent only
 ⑤Lint　on　Save
 ⑥In dedicated config file

$ npm run serve

Vuetifyとの出会い

https://vuetifyjs.com/ja/getting-started/quick-start
Vuetifyとは、VueのUIコンポーネントライブラリです。
HTML＋CSSでBoostrapに出会った以上の感動がありました。

公式サイトが見やすい

完成品と、コードがすごく見やすい。 自分が作りたいものを探すのが本当に楽だった。

Vuetify導入

vue add vuetify
 →Default

表示されればOKです。 表示されなければ、index.html、main.js、pluginディレクトリ内のVuetify.jsが勝手に書き換わってないなどを疑いつつ公式のクイックスタートで確認します。

試しにスライドを実装してみる

Vuetifyの公式からUIcomponents→Carouselsに飛んでください。
そこのコードを見本に以下のコードを作りました。

Home.vue

  <v-carousel>
    <v-carousel-item
      v-for="post of limitCount"
      :key="post.id"
      height: 550px;
    >
      <v-sheet
        color="#F5F3F4"
        height="100%"
        tile
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="display-3">
            <div class="content-text">
              <a v-bind:href="post.url" Target=”_blank”>
                <v-hover v-slot:default="{ hover }">
                 <v-card :elevation="hover ? 12 : 2">
                  <v-img 
                    :src="'/img/'+post.category+'.jpg'"
                    width="100%"
                    style="margin: auto;"
                  ></v-img>
                  <v-expand-transition>
                  <div
                    v-if="hover"
                    class="d-flex transition-slow-in-slow-out v-card--reveal black--text"
                    style="height: 75px"
                  >
                  <p>
                    クリックすると<span class="blue lighten-4">{{ post.url }}</span>に飛びます。
                  </p>
                </div>
                </v-expand-transition>
              </v-card>
                </v-hover></a>
                <p>{{ post.name }}&nbsp;さんの投稿&nbsp;&nbsp;<a v-if="post.twitterId" v-bind:href="'https://twitter.com/'+ post.twitterId" target="_blank" rel="noopener">Twitter:{{ post.twitterId }}</a></p>
                <p><a :href="'/posts/'+ post.category">
                  カテゴリー: {{post.category}}
                </a></p>
                <p class="#000126">この記事をオススメする理由:</p>
                  <p style="white-space: pre-wrap;"  class="#000126" v-text="post.comment">
                </p>
              </div>
          </div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>

hoverで、影をつけるのとURLを表示するのもVuetifyパワーです。
完成品がこちら

ほぼコピペでスライドができちゃうのだから楽しい。
Vuetifyの弱点は、あらかじめstyleが当たっているので、自分のオリジナルのCSSを当てたいときにデベロッパーツールとにらめっこした上で、!importantを使ってスタイルを変えないといけないことがあります。

VuexとFirebaseに悩まされる

最初から、VuexとComponentsを連携させてコードを書くのは、初心者では無理だと思いました。
データベースからのデータ取得や保存は、一旦componentのmethodsやcomputedに全部の処理を書いた上でVuexのActionsに持っていった方が最初はわかりやすいと思いました。

Vuexに関しては簡単という記事をいっぱい見て自信を失ったけど、十分に難しかったです。

この辺りでJavascriptの引数をどういうときに使うのかがわかります。

Firebaseはすごく便利で保存、取り出しに関しても慣れれば全然難しいことはないです。
ただ、やはり使いこなしていない感が非常にモヤモヤして残っています・・・。
もっとちゃんと使ってあげたい。

パッケージ全然わからなかった

package.json

  "dependencies": {
    "core-js": "^2.6.5",
    "firebase": "^6.4.0",
    "jquery": "^3.4.1",
    "vee-validate": "^3.0.6",
    "vue": "^2.6.10",
    "vue-analytics": "^5.17.2",
    "vue-infinite-loading": "^2.4.4",
    "vue-nl2br": "^0.1.2",
    "vue-router": "^3.0.3",
    "vuejs-paginate": "^2.1.0",
    "vuetify": "^2.0.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }

欲しい機能を追加していったらこうなりました。
結局、無限スクロールとveevalidateは使わずにページネーションとvuetifyのvalidateにしました。
最初はpackage.jsonとか全然何やってるファイルか分からなかったし、見て見ないふりをしていましたけど、npmでインストールしたパッケージを管理してくれていたんですね。１ヶ月半前の自分を殴ってやりたい。

今後の方針

初めてウェブサービスを世に放ったので、SEO的なことが全くわかっていないので、アナリティクスによる解析、検索順位、キーワードとかそういうものを実験していきたいです。
プログラミングスクールいきたいなら「プロスク！見れば？」って言われるようなコンテンツにしていきたいです。

こういうのがあったらいいのになっていうもので、作ってみたいものが多すぎるので、時間を大切に取り組んでいきたいです。

ご協力お願いします

おそらく今後、スクール卒業生の方が書いてくれたブログ記事が沢山公開されると思います。
卒業後、どういったところへ進路が決まったのかなど、すごく参考になると思います。
そういった記事を見かけたとき、ぜひ投稿のご協力をお願いします。

また、僕にはプライドもクソもないので、デザイン面だとか変なところがあればツイッターでもコメント欄でもアドバイスいただけると助かります。

よろしくお願いします。

将来の野望

○地元のカフェのホームページを超おしゃれに作れるようになりたい。
○GCPを使ったウェブサービスかAndroidアプリ、IoT開発に関わりたいです。今後どうなるかは、チャンスとタイミングだと思っています。不安先行していますが。

以上です。長々と書いてしまって申し訳ありません。
読んでくれた方ありがとうございました！！