このポートフォリオサイトを制作した背景 日々のビジネスマンの情報収集や学習の助けになればと思いこのアプリを作成しました。 ・サイトタイトル名：Study-Tube 　URL ：https://english-tube-c340d.web.app/ 　GitHub：https://github.com/MASAKi-cell/Study-Tube ・テスト用アカウン 　メールアドレス： 　パスワード　　： 　※ユーザー管理はfirebaseのAuthenticationを使用してます。 目的 コロナの影響で、リモートワークなど家にいる時間が増えました。家にいる間、様々な情報やスキルを学習する助けになればと思い、動画で学べる学習アプリ「Study-Tube」を作成しました。 使用技術 ・フロントエンド：Vue.js(VueRouter,Vuex,Vuetify,axios)、HTML、Sass ・バックエンド　：Firebase(Hosting,Authentication) 主な機能一覧 ・会員登録、ログイン、ログアウト、Googleアカウントのログイン機能 ・Youtube Video APIから動画をキーワード検索、一覧表示 こだわりポイント ・ Vue.js上のデータフローを管理するためVuexを使用 ・ シングルページアプリケーションを実現するためのVue Router使用 ・ Vue.jsの開発環境を素早く立ち上げることができるVue CLI使用 ・ Firebase Authenticationを使用したGoogleアカウント認証機能 ・ Firebase Hostingを使用したアプリケーションの公開 ・ Youtube APIを実装 ・ コードはGitHubで管理 ・ ヘッダー部のボタンはハンバーガーメニューを実装しレスポンシブに対応してます。 1. ファーストビュー　 ・ 最初にアクセスすると本サイトの説明文が記載された画面が現れます。 ・ ヘッダーはvue-routerを使用し、router-linkで選択した画面が現れます。 2.新規会員登録/ログイン機能 ・ ヘッダーの右側に会員登録機能、ログイン機能のボタンを配置しました。 ・ ログインすると、動画検索や学習記録の欄が表示されます。 ・ 新規会員登録にはサーバーとHTTP通信を行うためにaxiosを使用しました。 　 既に新規登録が完了している場合は、ログインボタンを押して登録したメールアドレスとパスワードを入力してログインします。 ・ ログインユーザーはfirebaseのAuthenticationを使用してユーザーを管理しています。 3.google アカウントログイン機能 ・ googleアカウントでのログイン機能も追加しました。 ・ stateでlogin_userを格納し、actionを使用してログイン、ログアウトの状態を管理しています。 4.動画検索 ・ Youtube APIから取得した動画を表示させることができます。 ・ 検索フォームからキーワードを入力して動画を検索することができます。 開発を通じて学んだこと ・firebaseの使い方 　認証、デプロイといったバックエンドの実装がfirebaseを使って出来るようになりました。 ・Vuexの使い方 　最初はVuexについて苦手意識がありましたが、実際に使用してみると色々な機能が実装できることが分かりました。 ・Vue.jsにおけるSPAの作り方 　SPAの下準備から各ページ作成・Vou-router調整ができるようになりました。 今後実装していきたい機能 ・ 条件を絞り込んだ検索機能 ・ いいね機能 ・ お気に入りをストックする機能 参考にした教材 公式ドキュメント ・axiosを利用したAPI使用例 ・認証付きの簡易チャットを作る！ 　⇒ アプリを作成する為に、まずは公式のドキュメントを参考にしました。 Vue.jsにおけるSPAの作り方 ・Vue.js】【SPA】の作り方をわかりやすくまとめてみた【初心者向け】 　⇒ SPAについて詳しく記載されたサイトです。 created, mountedのライフサイクルフック vue.jsのcreatedとmountedの違いを目で見て理解 ⇒ vue.jsのcreatedとmountedの違いが判りませんでしたが、このサイトを見て理解が深まりました。 Vue.js参考書籍&動画学習　 ・Vue.jsのツボとコツがゼッタイにわかる本 　⇒ Vue.jsの事が丁寧に解説されており、Vue.jsの初心者にとってはちょうど良い内容かと思います。 　 ・Udemy 超Vue.js 2 完全パック (Vue Router, Vuex含む> 　⇒ Vue JSの基礎から、仮想DOM、Vue CLIを使った開発方法などVue.jsの全体的な内容を学ぶことができました。 反省点 ・axiosを利用したHTTPリクエストやサーバーサイドの知識を深めていく必要があると感じました。 ・これまで、GitHub DesktopでGitHubにアクセスしてましたが、今回はコマンドプロンプトを使用してコードを管理しました。 　ただやり方がわからず、もっと理解を深めていく必要があると感じました。 ・Vuexを使用した状態管理についてもっと学習していきます。 最後に Vue.js初心者で、いろいろコードの間違いがあると思いますので、ご指摘いただけると助かります。 最後まで読んでくださり有難うございました。

はじめに 20代半ばに差し掛かると、結婚する友人が出始めませんか？ 巷ではこれを「第1次結婚ウェーブ」と呼ぶようで、 最近ではご祝儀に加えて、ギフトを贈る人が多いようです。 ただ、ギフト選びって本当に悩みますよね。 そんな「第1次結婚ウェーブ」渦中の方の悩みを解決してくれるサービス 『Best Gifter』を開発しました 実装中のエラー討伐の道のりは下記のブログにまとめてみました。 同じようなエラーにぶち当たっている方のエラー解決の一助となれば幸いです。 コードロード｜エラー討伐ブログ サービス概要 アプリのURL：https://www.best-gifter.work PC・タブレット・スマートフォンに対応しています。 Best Gifter 対象：第1次結婚ウェーブ（20代半ば）渦中の方 場面：新郎新婦へ、結婚祝いのギフトを選ぶ時 悩み： どんなジャンルが適しているのか いくらくらいが常識の範囲内なのか？ いくつか厳選したけど本当にこれでいいのか？ を1つずつ解消してくれるサービスです。 このサービスを作った背景 仲良くしている友人が24歳で結婚し、結婚祝いを贈ろうと思ったときに、「なにを？」「いくらで？」「これで良いのかな...？」といった疑問があった実体験からです。 自分にとっては結婚する友人はたくさんいるかもしれませんが、結婚する友人からしたら人生で一度きりの出来事かと思います。最高の思い出にスパイスを施してあげたい！という想いから開発しました。 望む未来 第1次結婚ウェーブ渦中の20代半ばのみなさんが、 新郎新婦へ最高のギフトを贈り、みんなハッピーになれることを祈っています? 使い方 機能は大きく分けると3つあります。 キーワード検索 ギフトを贈りたい相手との間柄別検索（目玉機能！?） アンケート投稿/投票（目玉機能！?） 1. キーワード検索 こちらがトップページになります。 キーワードを入力すると検索画面に飛びます。 例えば、「タオル」と入力してみます。 （希望の価格帯が決まっていれば、価格も検索条件に入れることができます） すると、結婚祝いに適した「タオル」の関連商品が表示されます。 自分で設けた「タオル」の検索条件以外にも、裏では「結婚」というキーワードと、ギフト包装「あり」の検索条件をデフォルトで設けています。 vueのstoreから一部抜粋 function searchItem(keyword, genreId, minPrice, maxPrice, sort, changePage) { return axios.get("/v1/rakuten_apis/search", { params: { keyword: "結婚" + " " + keyword, genreId: genreId, minPrice: minPrice || 1000, maxPrice: maxPrice || 150000, sort: sort || "standard", giftFlag: 1, imageFlag: 1, page: changePage || 1, }, }); } 「並び替え」で検索結果の順番を変更することができます。 商品をホバーすることで、「楽天市場へ」ボタンと「お気に入り登録」ボタンが出現します。 「お気に入り登録」ボタンをクリックすると、マイページに保存されます。 「楽天市場へ」ボタンをクリックすると、楽天市場の商品ページにジャンプします。 2. ギフトを贈りたい相手との間柄別検索（目玉機能！?） ギフトを贈りたい相手との間柄ごとに検索ができます。 間柄は「友人」「親族」「同僚」「上司」の4パターンを設けています。 「友人」にギフトを贈ることを例にとってみます。 こちらも同じくトップページから検索ができます。 「友人」であれば、「10,000〜30,000円」で下記のジャンルから選ぶのがおすすめ！ということが、ひと目で分かるようにしたことがこだわりポイントです。 例えば、「インテリア・雑貨」をクリックしてみると、検索ページに飛びます。 検索条件は自動的に「インテリア」「10,000円〜」「〜30,000円」となっています。 もちろん再度、検索条件を設けることも可能です。 3. アンケート投稿/投票（目玉機能！?） 自分でギフトをいくつか選んでみたは良いものの、最後一つに絞れない！というときに使う機能です。流れは下記の通りです。 自分で考えたギフトを３つまで選択肢として設けて、アンケート投稿する（匿名で投稿） 別の誰かが自分のアンケートに対して、投票してくれる（ワンクリックで匿名で投票） 投稿/投票ともに、匿名となっていることがポイントです。 TwitterやYouTubeで、見ず知らずの人のアンケートでも、ワンクリックで匿名だから、と、手軽に投票してあげている人は多いのではないかと思い、その心理をここで利用してみました。 まずは「投稿画面」です。 下記のように、ギフトを贈りたい相手の情報を入力し、現状考えているギフトを3つまで選択肢に設けることができます。 そしてこちらが「投票画面」です。 先程自分で投稿したアンケートが掲載されています。 同じくギフト選びに迷っている人が、みんなのアンケートを参考にしたい時があるかと思います。 アンケート結果を見るためには、投票することが条件となっており、閲覧されるごとに投票数が蓄積されていき、重みのあるアンケート結果になっていきます。 さらに、アカウント作るのは面倒だけど、手っ取り早くアンケートだけ見て参考にしたい・・・という方向けに、トップページからアンケート投票画面へ飛ぶボタンも設けました。 下記のように、ログインしていない状態からでもアンケート投票を行うことができます。 マイページ お気に入りに登録した商品や、投稿したアンケート結果を確認できます。 過去に投稿したアンケートの削除（削除ボタン） お気に入り登録の解除（★マークをクリック） 使用技術 バックエンド Ruby 2.7.2 Rails 6.0.3.6 RSpec 3.10.1 楽天商品検索API（外部API） 機能における主要なGem counter_culture 2.7.0（投票数カウント） sorcery 0.16.0（ログイン） JWT 2.2.2（トークン発行） rakuten_web_service 1.13.0（楽天商品検索API） httpclient 2.8.3（ネットワーク通信） capistrano 3.16.0（自動デプロイ） unicorn 6.0.0（アプケーションサーバ） フロントエンド Vue 2.6.12 vuex 3.6.0 Vue Router 3.4.9 axios 0.21.1 vee-validate 3.4.5 vue-poll 0.1.8（アンケートの投稿/投票） CSSフレームワーク Buefy 0.9.4 Bulma 0.9.1 ER図 インフラ構成図 開発期間 デプロイまでの所要時間は400〜450時間（3.5ヶ月）ほどかかりました。 現職（IT業界とは全く別業界です）を続けながらの開発であったため、 大まかに、平日は朝1.5時間・夜1.5時間、休日に8時間といったスケジュールでした。 苦労したところ たくさんありますが、特に瀕死状態になったエラーと、そこから学んだことを振り返っていきます（時系列順）。 1. 楽天APIの叩き方（実装期間：1ヶ月） そもそもどうやって外部のAPI叩くのか謎 楽天商品検索APIはRailsのキットが存在するらしく、ググって実装してみた。キットを使った実装方法は、ググればたくさん記事は見つかった。（※注意：キットからだと限られたJSONの階層データしか取得できない！） 実装はできたけど、RailsからどうやってVueに渡すのか謎 最初からVueで叩けばいいじゃんと気づく Vueで楽天商品検索APIを叩く場合の記事は全く見つからなかったので、ググりまくった結果、VueでHTTP通信を行うにはaxiosを使うのが通例らしいと知る。なんとかVueで叩くように変更できた。 あれ？Vueで叩こうとするとCSRF問題にぶち当たるじゃん... CSRFについてはこちらを参考にした。 CSRF問題は楽天APIサーバー側の問題だからどうしようもできないのでRails側で叩くしかないと知る。 最終的に、「Vueでformの内容（検索条件）をRailsに送って、受けとった検索条件をもとにRails側から楽天APIを叩いて、その結果をVueにJSONで返す」というように実装した。 こんな感じで行ったり来たりして1ヶ月かけてやっと実装できました。 結果どのようなコードになったかは、下記のブログにまとめてみました。 https://nakano-vil.com/code-rode/portfolio_vue_vuex_api_rakuten/ 学んだこと APIを扱うことにおいて、Vueではaxiosを、Railsではhttpclientを扱えるようにすることが大事 2. 楽天商品検索APIの商品検索のページネーション（実装期間：2週間） よくあるページネーションはkaminari等を使って、Item.all等で一度全てのデータを取り出して、そのうちから1ページに表示させたい件数を調整し、ページネーションするものだった。 が、しかし、楽天APIにおいては一度の通信で引っ張ってこれる件数が30件と決まっていたため、今まで学んだ理論ではページネーションが実装できなかった。つまり、普通にAPIを叩いても、一度のリクエストで「1〜30件まで」の検索結果しか取得できない。 例えば2ページ目を表示したければ、再度31〜60件目に該当するデータをAPIを叩いて表示させる必要があった。 ページネーションの「2」をクリックしたときに「2」をRailsのparamsに渡して、それを元に再度APIを叩きに行く（楽天商品検索APIでは、「2」を送ると「31〜60件まで」のデータを返してくれる）。 そしてページネーションの表示では、現在のページが「2」になるように認識させて、「前に戻るボタン」と「次に戻るボタン」ではちゃんと「1」ページ、「3」ページに移動させる必要があった。 結果、ググリ倒して同じような実装をしている記事を発見し、そちらを参考に実装した。こちらの記事。 学んだこと paramsや引数の扱い方。ググリ倒して似たような記事を見つけて、理解しながらカスタマイズする。 3. TwitterAPIで投票機能が使えない問題 元々は、機能の目玉としていたユーザーのアンケート機能をTwitterAPIで実装しようとした。 Webサービス側からTwitterAPIを通して、普通のコメントやSNS共有をTwitterに流す方法はいくらでもググれば見つかった。が、Webサービス上でアンケートを作成し、APIを通してTwitterのアンケート投稿を行う方法が全く分からなかった。 やっと見つけたのは、gem 'twitter'とは全く別のgem 'twitter-ads'というgemが存在するということ。 が、しかし、このgem 'twitter-ads'は企業アカウントであったり、承認されたアカウントでないと使用できないgemであるらしく、事実上、実装不可なことが分かった。 ちなみにtwitter-adsで実装したかったのはこの部分。 学んだこと 下調べは入念に。 4. Vueの'vue-poll'というライブラリでアンケート機能を実装（実装：3週間） TwitterAPIが使えなくなれば、このままだと、ただ商品を検索するだけの機能であり、どこにでもあるアプリ。どうしてもアンケート機能を取り入れたくググりまくった結果、vue-pollというライブラリを発見。 が、しかし、これを扱っている記事が全くなく、READMEに記載されているサンプルコードを真似して実装してみても、Vue上で「一時的な投票」ができるのみ。Railsと連携させて、「アンケートの投稿」「投票数をDBに保存」という大事な機能の実装がどうしてもできなかった。 そこで、READMEだけでなく、そのライブラリがどのように動いているのか？まで自力で調べるために、ソースコードまで見るようにし、なんとかヒントを見つけ実装することができた。 学んだこと ライブラリは便利！入れるだけで動く！ が、ブラックボックスとなっているため、ライブラリのソースコードまで確認し、どうやって動いているのか？まで理解すれば手探りで実装できるようになる。 5. 非同期通信でアンケートの選択肢が順番にならない問題（実装期間：1週間） Vueは画面遷移なくスムーズな表示の切り替えができて便利〜くらいの気持ちでいたが、それゆえの非同期通信問題にぶち当たった。「選択肢1」「選択肢2」「選択肢3」を投稿しても、投稿する度に順番が変わってしまう。（「選択肢3」「選択肢1」「選択肢2」の順番になったり） ただ、非同期通信に関してはググれば記事が溢れていたのでなんとかなった。 promiseやasync/awaitを駆使してなんとか順番通りにさせることができた。 でもよく考えると、カリキュラムのVue編でちゃんとasync/await扱ってたから、いかに理解せず進めていたのかというのを痛感し、反省した。 学んだこと 高校受験、大学受験、国家試験と、統計を把握してテクニックで解答するのと、答えを丸暗記するのでなんとか試験を乗り切ったので、長年の経験から、それが自分に合った勉強法だと思いこんでいた。 が、プログラミングに関しては違った。みんなが言うように手を動かして半べそかきながら自走するのが一番身に付く。人によるかもしれないが、自分の場合はそう感じた。 6. AWSにデプロイ（実装期間：2週間） No space left on device 容量が100％になり全くコマンドが打てなくなる問題にぶち当たった。 そもそもAWSに関しては、「記事を見ながらコピペした」レベルだったので、エラーの際にどこを見ればいいか？のあたりをつけることすらできなかった。 結果、ググリ倒して少しずつ点と点を繋げていく作業をしていたところ、RUNTEQのみなさんがアドバイスを下さり助けていただきました。ありがとうございました！ 学んだこと ターミナル上での操作に慣れないといけない。全く分からないからといってコピペは禁物。 対処法は下記のブログで記録しました。 https://nakano-vil.com/code-rode/no_space_left_on_device/ 7. Capistranoが全然実装できない問題（実装期間：2週間） こちらも正直、記事を見ながら見様見真似でコピペしていたのが仇となった。とりあえず自動デプロイ便利そうだから実装しちゃおっとという軽い気持ちで取り組んではダメ。絶対。 unicornとはなんなのか、nginxとはなんなのかがほんわりしていた状態で取り掛かったので手間取った。 とはいえ、ここまでで自作アプリを開発して3ヶ月経っている。開発当初よりはlogの見方や当たりをつけることが出来るようになり、手探りでなんとか実装できた。 でも結局最後はRUNTEQ校長の菊本さんに助けていただきました。ありがとうございました！ 学んだこと logはダイイングメッセージ。$ tail -f XXXX.logがめっちゃ便利。 工夫したところ ロゴ 濃いめ 中間 明るめ インパクトがあり、使い回しやすいロゴを高校の後輩に作ってもらいました。 ロゴはサービスの顔なので、「シンプルで、華やかなものを！」と依頼し、サービスのイメージにぴったりのロゴを作ってくれました。大満足です！ デザイン Buefy/Bulma Bootstrapっぽさはあまり好みではないので、ほかにオシャレに仕上がりそうなフレームワークを探し、結果、BuefyとBulmaで装飾しました。 （※最初、全てBuefyを使っていましたが、Buefyの仕様上、クリックイベント等の挙動が本来のものと変わってしまったので、form部分はBulmaをメインに使用しています。） UI/UXの向上 「ぱっと見で何ができるか分かること」に拘りました。 シンプル且つ機能的にするために、ボタンの配置、ホバー効果、検索フォーム等において、自分がよく利用するサイトを参考にしました。自分がよく利用するということは、自分にとって使い勝手がいいサイトだと思うので、大いに活用させていただきました。 hoverアニメーションや、サイトの色味は日頃からTwitterで心惹かれたツイートを保存しておき、参考にさせていただきました。 Webデザイナーの小林さん@pulpxstyleの図解ツイートが本当におしゃれでマネしたくなるものばかりです！参考にさせていただき、ありがとうございました！ 今後実装したいこと 実際に使っていただいたユーザーさんからの声を取り入れてブラッシュアップしていきたい所存です！ ご要望がありましたら、本記事、もしくはTwitterのDMにてご連絡いただけますと幸いです?‍♂️ 4/29時点で、現在、私自身が実装したいと考えていることは下記の通りです。 N+1問題 アンケートの投票数をDBから取得するときは下記のコードとなっています。 includesを使えばいいと思い、一度修正を行ってみましたが上手くいきませんでした。 ですのでデータ数が少ない現状では実装をスキップしています。 ただ、データ数が多くなったときにはDBに負荷がかかるはずなので、このN+1問題を解消する予定です。 def index @answer_counts = Answer.group(:questionnaire_choice_id).count render json: @answer_counts end webmockによるAPIのテスト RSpecでテストをする際、楽天商品検索APIをテストする箇所で、テストが通るときもあれば、エラーになることもあります。 外部APIを叩いているため、毎回レスポンスが違うことや、連続でAPIを叩くため制限がかかってしまうためです。 せっかくCircleCIを用いているので、mockを施す予定です。 おわりに 本当に仲の良い友人だからこそ、「適当なギフトは贈りたくない！日常的に使えて、いつまでも幸せな家庭であってほしい！」と悩みまくった結果、思いついたサービスでした。 人を幸せにしたい！という私の想い・個性が反映されたサービスになったのではないかと思っています。 ちなみに当時の私は、丸の内を探し歩き「女性も振れるIH対応の最強の鉄中華鍋」を贈りました? 本サービスを開発中、使ってみたいAPIや、あったら便利だな〜というサービスを思いついたので、早速そちらにも取り掛かりたいです。 以上、ご覧いただきありがとうございました！ 宣伝 私が所属しているプログラミングスクール「RUNTEQ」にて、超有益な記事がアップされました！ これを発見できた方は本当にラッキー過ぎます・・・ これでエモーショナルに語れる愛のこもったサービスを開発できるはずです！ https://blog.runteq.jp/programming-career/portfolio/4287/

Vue.jsとは Evan You氏の個人プロジェクト 2014年にリリースされた比較的新しいフレームワーク 2015年にはPHPフレームワークのLaravelのフロントエンジンとして採用され、知名度が上がった 2016年後半にリリースされたバージョンでは仮想DOMを採用したことにより、レンダリングパフォーマンスを向上させた Adobeや任天堂、LINEやGitLabで使われている なぜVue.jsなのか 学習コストの低さ スケールの柔軟性 公式ドキュメントの充実 が多くの人々に支持されているのではないかと思われる 導入のしやすさと学習コストの低さ Vue.jsは必ずしもwebpackなどのハンドルツールやコンパイルを必要としていない ファイルを1つ読み込むだけですぐにコードを書き始めることができる スケールの柔軟性 Vue.js本体はviewに関わる面倒な処理を人間に代わって管理することが仕事 スクリプトタグで読み込むスタンドアロン版を使用してページの一部だけをインタラクティブ化するなど、小さな要件に気軽に導入できる 拡張機能や開発サポートツールも数多く提供されていてシングルページアプリケーションのような大きなプロジェクトにも対応できるフレームワークとして注目されている ドキュメントの充実 Vue.js本体のドキュメントではなく、スタイルガイドやエコシステムといった公式ドキュメントの多くが日本語に翻訳されている Vue.js日本ユーザーグループによってサポートされている Vue.jsのキーコンセプト 構造の本体はDOMではなく、Javascriptのデータである データが存在してそのデータの状態に適したDOMを構築する データの状態によって描画は更新されたときには自動的にアクションを起こしたり、振る舞いが変わったりする。このようなデータを中心とするアプリケーション設計のことを「データ駆動」と呼ぶ テンプレート DOMを構築する手段として一般的に「テンプレート」を使用する HTMLベースになっているためエディタとの親和性が高く、エンジニアとデザイナーの共同作業を円滑に行うことができる テンプレートとロジックを関連づけるのが「ディレクティブ」という機能で、テンプレート内では独自の属性で記述する <div v-if="show">Hello World!</div> v-から始まるディレクティブ 先程のコードに v-ifと出てきたが、Vue.jsには v-bindや v-keyといった見慣れない属性が登場する この v-から始まる属性は先述の「ディレクティブ」都呼ばれ、主にデータバインディングを行うために使用される ディレクティブの値はJavascriptの単一な式ということがポイント このような書き方は仮想DOMを作るための単なるテンプレート記法で、DOMへ反映される前にVue.jsによってコンパイルされ、その後は内部でのみ利用される ①<div key="id"></div> ②<div v-bind:key="id"></div> ①と②はどちらもkey属性にidという値を指定したものだが、内容は異なる ① 単純に「id」という文字列を表す ② v-bind:key つまり名前が v-で始まるディレクティブになっているため、値は「idというJavascriptの変数」を表す　厳密に言えばプロパティ データバインディング データと描画を同期させる仕組みのことを「データバインディング」と呼ぶ HTMLで作られたUIを操作するのに必要不可欠なのが、DOMの更新や状態の管理 ライブラリを利用せずにJavaScriptでテキストを更新したいときは次のように書く必要がある var el = document.getElementById('text') // 要素を探す el.innerText = '新しいテキスト' 　　　　　　　　//要素を更新する 一見するとシンプルに見えるが、更新する場所が多くなればなるほどこの処理が増えていくため、テキストの更新だけで処理の大半を埋め尽くしてしまう。面倒な作業の上にちょっとしたミスでバグを生み出す要因になりかねない。 DOMの更新はフレームワークに任せる そこで注目を浴びることになったのがデータバインディング型のライブラリやフレームワーク データバインディングはJavaScriptのデータとそれを使用する場所を紐付け、データに変化があれば自動的にDOMを更新する Vue.jsもデータバインディングに関する多くの機能を持ち、ディレクティブによってHTMLを扱う時と同じ感覚でそれらの機能を使用することができる（HTMLタグにv-から始まる属性を記述するため） コンポーネント指向の画面構築 Vue.jsの「コンポーネント」は、機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組み コンポーネントのデフォルト機能としてHTMLとJavaScriptをセットにできるが、ので.jsを使用できる環境ならJavaScriptとHTML、さらにCSSをまとめることができる（環境構築の際にNode.jsを入れるので基本入っている状態） このようにセットしてしまえば、関連するソースコードを容易に見つけることができる ロジックをほとんど描かなくても、単にHTMLのコーディングを効率化するためだけにコンポーネントを利用することもある コンポーネントをネストしてページの構造化をすることも可能 コンポーネントが複雑に構造化された場合は「Vuex」や「Vue Router」といった拡張機能を導入することで目的に応じたスケールアップもできる 総括 普段はサーバーサイドを担当してますが、ふとしたきっかけでフロントエンドを学びたいと思って今流行りのVue.jsに手を出してみました。確かに理解しやすさと運用のしやすさは中々良いと思っています。 javascriptのフレームワークはVue.jsが初めてなので他のフレームワークとの比較はできませんが、これだけ見ると運用コストも高くないように思えます。 参考文献 改訂2版 基礎から学ぶVue.js [2.x対応! ] Vue.js: The Documentary

以前も起こったがどう解決したか忘れてしまっていたのでメモ 開発環境 エディタ VSCode フレームワーク Vue2 言語 Typescript 現象 import A from '@/A.vue';の形式でコンポーネントをインポートしようとすると、コンパイルエラーになる エラーは出ているが、この状態でnpm run serveしても問題なく動作する 原因 VSCodeで開くフォルダが原因 ts.config.jsonが直下に存在するフォルダを開く必要がある plactice ← エラーが出ているときはこのフォルダを開いていた ├── vue-typescript ├── sample ├── vue-ts-plactice ← VSCodeの「フォルダを開く」からこのフォルダを開く必要がある |── node_modules |── public |── src |── package.json └── ts.config.json

概要・気づき編 ポートフォリオ Log: https://portfolio-studyapp.web.app/ アプリ概要 用途 自分が取り組んだことを記録して視覚化 使い方 取り組み時間、場所、集中力、内容を記録 記録した内容をユーザーごとに管理 カレンダーとデータを同期 場所ごとにグラフを用いて集中力を視覚化 特徴 SPA（シングルページアプリケーション） Firebase(BaaS)を使用したフロントエンドのみの実装 ニューモーフィズムを取り入れた最新のデザイン 作成理由と意図 理由 ポートフォリオ VueとFirebaseを使ったバックエンドレスなフロントエンド開発 ユーザー毎のデータ管理の実装 意図 作成決定までのフロー 作りたいものがない→何を基準に作りたいものを決定するべきか→自分の一番身近なものに目を向けよう→プログラミングの勉強→解決すべき課題は？→計画を立てるのが苦手でいつも挫折している→勉強した後に記録をするようにして見える化を図り逆説的に計画が立てれるようにならないか 意識したこと 新しい知識はほどほどにして学んだ内容をフルに活用する Vueの機能を網羅的に使いwebアプリケーションの最低限の機能を備える 作ってみて感じたこと 教材をやるより楽しい 非同期処理の理解が深まる 次作るものへの意欲が湧く 成功体験を得ることができる 追加機能を付けてみたくなる CSSのbox-shadowは結構コピペ VueのCSS設計について学ぶことができる 教材を使って勉強するより圧倒的に身に付く Vueのライフサイクルについて深く勉強できる 実体験を通じたGitの勉強をすることができる 一つのコードを書く上でも計画を立てることの重要さを知る Array型はかなり便利だと知る（頼り過ぎていいものか模索中） vuetifyの一部導入は結構めんどくさい（やるなら全てマテリアルデザインにしたほうがいい） 抜粋 追加機能を付けてみたくなる アプリケーションとは最低限の機能を実装した上で、プラスアルファによって進化していくものだと感じた。完成形を先に決める必要はなく、今後どのように展開させていくのか考えることこそが重要で、作ってみないとこの考えには至らなかったと痛感している。今後追加してみたい機能は後述する。 実体験を通じたGitの勉強をすることができる 今までなんとなくGitを使用していたが重要さについては理解できていなかった。教材をやるときは流れが全て決まっているため履歴を管理する必要がなかったからだ。今回全ての工程を自分で管理してみて履歴管理とブランチを作ることの重要さを痛感した。 例えばDBとの通信をaxiosからFirebaseのメソッドに変える時、色々なコンポーネントやファイルを書き換える必要があったため挙動がうまくいかない可能性がある。その時ブランチを切ることでリスクを回避することができた。 VueのCSS設計について 教材でやるときはあらかじめクラスが振られているため考える必要がなかったが、今回自分でコンポーネントの管理をする必要があったためCSS設計について初めて疑問を持つことができた。親コンポーネントにscopedが振られてない時の挙動や子コンポーネントでのクラスの付け方、レスポンシブ対応の時にどのようにファイルを分けるのか考えるきっかけになった。 次回 技術選択編

プロローグ Nuxt.jsを触り始めて三ヶ月弱くらいですが、 色々と使い方を覚えてきたので、メモとして記録を残します。 また、今書いているコードが先輩たちがつくりあげてきたおかげで便利にコードがかけるんだなと、調べていくうちにわかったりしたところがあったので、さらに理解を深めるために備忘録として残します。 不備不足だったり、理解が浅くて説明不足なところがあるかと思いますが、 勉強して更新していきたいとは思っています。 この記事で何ができるようになるか 今回は、Nuxt.jsを触り始めた頃右も左も分からず、全くコードが読めなかったときから、今は「ここがこうなってるからここが動いて・・・」とゆっくりながら順を追って読めるようになったので、その経験をもとにそれぞれのコードがなにをしているか解説していきます。結果として、Nuxt.jsが少し読めるようになるかと思います。 解説 Vueファイルは下記の３つの構成になっていて、それぞれ役割があります。 ブロック 用途 < template > HTML < script > JavaScript < style > CSS それぞれの関数に関して詳しくは調べていただければと思います。 あくまでも読み方がわかるようになるを重点にコメントにて解説を書いていきます。 hello.vue //ここがHTML部分で、どのように表示したいか書きます。 <template> <div> <p>{{ name }}</p> <!-- 上記に関しては下記の[詳しい解説]にて説明します。 --> <button @click="console">コンソールを開いて確認しよう</button> <!-- ボタンを設置した際に、そのボタンがクリックされた時、consoleというメソッドが実行されます。 --> <!-- どのような内容が実行されるのかは、scriptブロックに記載します。 --> </div> </template> //ここまで //ここがJavaScript部分で、どのように動かしたいかを書きます。 <script> export default { data () { return { name: "チューリップ" //下記の[詳しい解説]にて説明します。 } }, watch: { //watchプロパティというもので、データなどの変化を監視するものです。 }, mounted() { //初期化の中の決められたタイミングで実行される関数です。ここに記載したメソッドは最初に実行されます。 }, methods: { //ここにメソッドを書いていきます。 　　console()　//templateのbutton @click="console"で書いたメソッドです。 { console.log("ボタンがクリックされたよ") } //上記のように、console(){}内に実行したい内容を書くことで、 　//templateで書いたボタンがクリックされたときに、console(){}内の処理が実行されます。 //上記だと、開発ツールを開いてボタンをクリックすれば「ボタンがクリックされたよ」とconsole上で表示されるかと思います。 } } </script> //ここまで //ここがcss部分で、どのようなレイアウトデザインにしたいか書きます。 <style lang="scss"> p { text-align: center; font-size: 20px; color: red; } </style> //ここまで 詳しい解説 <p>{{ name }}</p>で何を行っているのかというと、scriptブロックのdataにあるnameを読み取って、「チューリップ」と出力させています。 Vue.jsなどのドキュメントや初心者用の教材を見たとき、それなら直接<p>チューリップ</p>と書けばいいのに、なんでそんな回りくどいやり方をするんだろうなんて思っていました。 しかし、<p>チューリップ</p>だけ出力させたいならそれでもいいものの、ログインするユーザーに合わせて<p>ひまわり</p>や<p>あじさい</p>など出力したい場合はどうすればいいのでしょう？ そのときに、dataにあるnameにそれぞれの花の名前が入ったデータを格納してれば、<p>{{ name }}</p>とするだけで、データに保存してある名前を出力させることができます。 また、一覧としてチューリップ・ひまわり・あじさい・・・などと表示することもできます。便利ですね。 じゃあどうやって、dataにデータを格納するのか、どうやって一覧にデータ一覧を表示させるのかは別の記事で書こうと思います。 今の段階では、name: "チューリップ"としているので、<p>{{ name }}</p>とすると「チューリップ」が表示されますが、dataをうまく使うことで自由に表示することができます。 {{}}は、マスタッシュ構文というようで検索すると詳しい解説がありますので、ぜひ読んでみてください。 おわりに 壊滅的にNuxt.jsができなかったので、templateとscriptの関係性さえわかっていない状態でした。 しかし、templateで書いたものがどのようにscriptで動いているのかがわかれば、あとは関数やメソッドなどを理解できればある程度動くものがつくれるようになるんじゃないかと思います。 さらに、dataの使い方がわかれば、表示させたいデータや保存したいデータを自由自在に使えるのでよりよいアプリケーションが作れるようになるかと思います。