タイトル通りの話で, 今まで2年ちょいVue.js（含むNuxt.js）使いだった自分がReact + TypeScriptの組み合わせを覚えて仕事にしよう！...という目標に向けて何をしたかについてまとめました. React + TypeScriptの組み合わせでちゃんと開発したい&覚えたい人 Vue.js等, 他のJavaScriptライブラリ・フレームワークと二刀流を目指している人 SPA(Single Page Application)開発をちゃんとやりたい人 の参考になれば幸いです. なおコードスニペット的なのは一切ないです. が, これから学習する方の役に立つと嬉しいです. わたし（shinyorke）のJavaScript/SPA歴 昔から仕事や趣味⚾️開発でJavaScript, JQuery, Bootstrapは触っていました. JavaScriptは自力で調べながらどうにかやれます. 前職でVue.jsを2年近くやったのでSPAについてはそれなりに開発経験あります. Nuxt.jsでゼロベースからSPAを二回ほど実装・ローンチしました. npmとかyarnの意味はわかってます&環境もnvmで切り替えながらやれるレベルなのでそのへんのエコシステム周りは初心者ではないです（強くもないけど）. なお, Vue.jsのときにやったネタはブログにまとめています. https://shinyorke.hatenablog.com/entry/hello-nuxt-coreui https://shinyorke.hatenablog.com/entry/vue-django-hateoas https://shinyorke.hatenablog.com/entry/front-app-and-vuejs React + TypeScriptになれるまで やったことを時系列で. なお, まだ途中です！ Reactの公式チュートリアル 会社のつよつよフロントできるマンたちのオススメだったので素直に乗って写経しました. https://ja.reactjs.org/tutorial/tutorial.html ゲーム完成まで楽勝でいきました. 構成とかどういった意味なのか?的なのをチュートリアルと書いたコードを読みながら理解. ただ, 肝心なComponentのライフサイクルだの状態遷移だのといった所はわかったようなわかんないような?でした. 書籍を写経してSlack（っぽい）アプリを自前で実装する. ゲームよりも実践的なアプリを作ると慣れるかな?と思い, 昔読んだ書籍をもう一度掘り返しました. React, Angular, Vue.js, React Nativeを使って学ぶ はじめてのフロントエンド開発 2年ちょっと前の本なのでそのままのコードで動かんやろ...という不安はあったものの, まあ自己解決できるだろっていう謎理論でそのままスタート. サーバーアプリを作る（写経） 本編のSlack（風）チャット・クライアントアプリを作る前に, 書籍の説明通りチャットのサーバー部分をFirebase + Expressで作りました. これについては, ほぼ書籍通りの写経で完了. これは意外だった. 唯一, デプロイができなかったぐらいですかね. 無料プランじゃできないぞ的な（おそらく書籍リリース時はできてた）. ただ, デプロイできなくてもローカルサーバーとして立ち上げて開発できたので別に困らなかったです. ちなみにFirebaseをゼロから使うのは今回がはじめてでした. 思わぬ所で新しい道具を覚えた. 本丸のReact + TypeScript製チャット・クライアント開発 書籍を見ながらゼロから写経しました, 途中動かないとか色々ありました. 特にライブラリのバージョンがきつかった...書籍通りで動かん！と思い, https://github.com/okachijs/jsframeworkbook/tree/master/3_6_react こちらのpackage.jsonを見ながら調整. あとnodeのLTS（12系）じゃダメだったので8系に落として動かしました, この騒動で半日ほどドハマリ. これはまあしょうがないか... その後は順調に行きました, 型安全のJavaScriptは精神衛生上すごく良いというのがよくわかった. これからやりたいこと Vue.jsで作ったやつをReact + TypeScriptで写経して本格的に慣れるとか, 今いくつか作りたいネタがあるのでそれをReact + TypeScriptでやるとか. あと, 会社のプロダクトでいくつかReact + TypeScriptあるのでそこにコントリビュートとか考えています！
タイトル通りの話で, 今まで2年ちょいVue.js（含むNuxt.js）使いだった自分がReact + TypeScriptの組み合わせを覚えて仕事にしよう！...という目標に向けて何をしたかについてまとめました.
の参考になれば幸いです.
なおコードスニペット的なのは一切ないです.
が, これから学習する方の役に立つと嬉しいです.
なお, Vue.jsのときにやったネタはブログにまとめています.
https://shinyorke.hatenablog.com/entry/hello-nuxt-coreui
https://shinyorke.hatenablog.com/entry/vue-django-hateoas
https://shinyorke.hatenablog.com/entry/front-app-and-vuejs
やったことを時系列で.
なお, まだ途中です！
会社のつよつよフロントできるマンたちのオススメだったので素直に乗って写経しました.
https://ja.reactjs.org/tutorial/tutorial.html
ゲーム完成まで楽勝でいきました.
構成とかどういった意味なのか?的なのをチュートリアルと書いたコードを読みながら理解.
ただ, 肝心なComponentのライフサイクルだの状態遷移だのといった所はわかったようなわかんないような?でした.
ゲームよりも実践的なアプリを作ると慣れるかな?と思い, 昔読んだ書籍をもう一度掘り返しました.
React, Angular, Vue.js, React Nativeを使って学ぶ はじめてのフロントエンド開発
2年ちょっと前の本なのでそのままのコードで動かんやろ...という不安はあったものの, まあ自己解決できるだろっていう謎理論でそのままスタート.
本編のSlack（風）チャット・クライアントアプリを作る前に, 書籍の説明通りチャットのサーバー部分をFirebase + Expressで作りました.
これについては, ほぼ書籍通りの写経で完了. これは意外だった.
唯一, デプロイができなかったぐらいですかね. 無料プランじゃできないぞ的な（おそらく書籍リリース時はできてた）.
ただ, デプロイできなくてもローカルサーバーとして立ち上げて開発できたので別に困らなかったです.
ちなみにFirebaseをゼロから使うのは今回がはじめてでした. 思わぬ所で新しい道具を覚えた.
書籍を見ながらゼロから写経しました, 途中動かないとか色々ありました.
特にライブラリのバージョンがきつかった...書籍通りで動かん！と思い,
https://github.com/okachijs/jsframeworkbook/tree/master/3_6_react
こちらのpackage.jsonを見ながら調整.
あとnodeのLTS（12系）じゃダメだったので8系に落として動かしました, この騒動で半日ほどドハマリ.
これはまあしょうがないか...
その後は順調に行きました, 型安全のJavaScriptは精神衛生上すごく良いというのがよくわかった.
Vue.jsで作ったやつをReact + TypeScriptで写経して本格的に慣れるとか, 今いくつか作りたいネタがあるのでそれをReact + TypeScriptでやるとか.
あと, 会社のプロダクトでいくつかReact + TypeScriptあるのでそこにコントリビュートとか考えています！
vue.jsでA-Framを使用した時に出た警告 Consoleに警告が出てけすのに消すのに手こずるたのでメモ A-Frameは、のなどの専用タグを使用します。 vueファイル内に書くと以下のような警告が出ます。 [Vue warn]: Unknown custom element: <a-entity> - did you register the component correctly? For recursive components, make sure to provide the "name" option. scriptの中に以下を追加する。(使用するa-〇〇をすべて追加) <script> Vue.config.ignoredElements = [ 'a-scene', 'a-entity', 'a-camera', 'a-box', 'a-ring', 'a-asset-items', 'a-assets', 'a-cursor', 'a-text', 'a-light', ] </script> 以上。
vue.jsでA-Framを使用した時に出た警告
Consoleに警告が出てけすのに消すのに手こずるたのでメモ
Console
A-Frameは、のなどの専用タグを使用します。 vueファイル内に書くと以下のような警告が出ます。
[Vue warn]: Unknown custom element: <a-entity> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
scriptの中に以下を追加する。(使用するa-〇〇をすべて追加)
script
<script> Vue.config.ignoredElements = [ 'a-scene', 'a-entity', 'a-camera', 'a-box', 'a-ring', 'a-asset-items', 'a-assets', 'a-cursor', 'a-text', 'a-light', ] </script>
以上。
なぜ必要か Nuxt.jsでは/pagesディレクトリ内にvueファイルを作成すると自動でパスを作成してくれる機能がある。 しかし、pages/user/settingsみたいにuserパスを使わずsettingsパスのみを使いたい場合にもuserパスが使われてしまうので、使用できないようにする。 やり方 使用したくないパスのファイルに以下を記述 /pages/user.vue <script> export default { // 追加 validate ({ route }) { return route.name !== 'user' } } </script> 解説 validate() はパスのアクセスを管理するメソッド。このメソッドによって使用したくないパスの管理ができる。 route.name !== 'user' はルート名が’user’ではない時にパスを通す。 これで/userにアクセスしても４０４エラーが表示される
Nuxt.jsでは/pagesディレクトリ内にvueファイルを作成すると自動でパスを作成してくれる機能がある。 しかし、pages/user/settingsみたいにuserパスを使わずsettingsパスのみを使いたい場合にもuserパスが使われてしまうので、使用できないようにする。
使用したくないパスのファイルに以下を記述
<script> export default { // 追加 validate ({ route }) { return route.name !== 'user' } } </script>
validate() はパスのアクセスを管理するメソッド。このメソッドによって使用したくないパスの管理ができる。
route.name !== 'user' はルート名が’user’ではない時にパスを通す。
これで/userにアクセスしても４０４エラーが表示される
はじめに はじめまして、cryptoboxと申します。 メーカーで設計開発職をしている新卒一年目のモノです。 私は現在勤めている会社にインターン経由で早期に内定を頂き、愚かにもロクに自己分析もせず入社を決定してしまいました。 現在はそれをすごく後悔していて、本当に自分がやりたいことは何か見つめ直したとき、人々の悩みを解決して感動を与えるアプリ/サービス開発を仕事にしたいと思うに至りました。 そんな動機でプログラミングの勉強を始め、未経験ながら３か月ほどでアプリを作りきることができました。 そこで今回は開発したアプリの紹介と、作っている過程でぶつかった困難、そしてそれをどう乗り越えたかをまとめたいと思います。 つくったアプリ ブックレビューサイト「CloudCritic」 サイトURL（PCとスマホに対応） https://cloud-critic.web.app/home アプリ制作のきっかけ 課題意識 アプリ制作のきっかけは私が日頃から感じている１つの思いと現状のレビューサイトにおける２つの課題意識です。 １つの思いとは、 世の中の本には埋もれている（もっと評価されるべき）名作が多すぎる！ということです。 私は本を読むことが好きで、小説や漫画を結構多く読んでいます。そんな中、漫画「鬼滅の刃」を原作としたアニメが大ヒットしとんでもないブームになりました。 そこで私が思ったことは「『鬼滅の刃』めちゃくちゃ面白いけど、世の中には『鬼滅の刃』レベルにもっと流行っていい本がいっぱいあるのに！！」ということでした。 そんな世の中にあまり知られていないけど物凄く面白い本を、もっといろいろな人に知ってほしいと日頃から思っていました。 また、現状のレビューサイトにおける課題意識とは以下の２点です。 レビューの敷居の高さ ５段階評価への疑問 それぞれ具体的に説明します。 ->レビューの敷居の高さ 商品レビューをしたことがある人は、商品に対する自分の意見を言語化するのって意外と難しいと感じたことがある人も多いんじゃないでしょうか？ 自分もその一人で、面白い本を読んでその感想を語りつくしたいけど、語彙力が無くて全然文字にできない！と感じていました。 ->５段階評価への疑問 レビューサイトでよくある５段階評価が作品を正当に評価できているかに疑問を感じていました。 なぜなら５段階評価だと、ストーリーはとても面白いのに絵があまりうまくないといった漫画の評価が３．５とかになってしまうのです。 ストーリーが著しく面白いのであれば、絵がうまくないといったポイントで減点される必要はないと考えていて、５段階評価ではない別のシステムで作品評価ができないかと考えていました。 解決策 この１つの思いと２つの課題意識を一挙に解決できるシステムを考えたとき、以下のアイデアが生まれました。 ・ユーザーが作品に対してタグを付けられる ・そのタグに対して「いいね」できる ・また作品を「タグ検索」できる ユーザーがレビューを書くのではなく、頭に思い浮かんだ断片的な言葉をタグとして作品につけることでレビューの敷居を低くします。 また、タグに対して「いいね」をすることで、作品を５段階で評価するのではなく、作品の良い部分や好きな部分を個別に評価できるというシステムにしました。 さらに作品をタグ検索できるようにし、例えば「もっと評価されるべき」とタグのついた作品を簡単に検索できるようにしました。 機能紹介 ということで実装した機能を紹介していきます。 ①タグに「いいね」でレビュー 作品にタグを付けて「いいね」することで評価できます。 ②ワードクラウド タグネームといいね数に応じてワードクラウドを生成。 作品の評価されているポイントが一目でわかります。 ③タグ検索 同じタグのついた作品を検索できます。 ④コメント機能 コメントの作成/編集/削除ができます。 ⑤ランキング 総合いいね数のランキングが見れます。 ⑥書籍検索 ⑦プロフィール編集 ⑧ログイン メールアドレス、もしくはGoogle、Twitter、Yahooアカウントでログインできます。 また１クリックでお試しログインできるテストユーザーログイン機能も用意しています。 困難だった事と乗り越えた方法 モチベーション維持 自分はかなり飽き性で何かを初めても１ヶ月以上続くことはめったにありません。 今回アプリ開発をするにあたって最も気を使ったのがモチベーション維持です。具体的には以下の事を行っていました。 ①開発を習慣化する 毎日、ご飯を食べ終わったら最低でも１行コードを書くということをしていました。やる気は作業をしているうちに出てくるもので、作業を始めるときがやる気の出ない最も辛いタイミングです。この始めるタイミングのハードルを限りなく低くすることで習慣化に成功しました。コードを書くことが習慣になってくると逆に書かないと気持ち悪いくらいになってきて毎日続けることができるようになっていきます。 ②未完成でも友達に見せる まだ完成していなくても友達に「いまこんなの作ってるんだー」と見せると結構「すごいね」とか言ってもらえてモチベーションになりました。完璧なアプリを見せてドヤりたいのもあるのですが、未完成でも好反応をしてくれる人は多いので見せてみるのはオススメです。 ③MENTAを使う 開発していると「こんなゴミアプリ誰が使うんだ」とか「なんでこんな簡単な実装ができないんだ」と自分を責めてしまう事が良くありました。独りでやっているとどうしてもメンタルがヘラっていき作業が捗らなくなることがあります。これは恐らく悩みを共有できたり相談できる人がいない為起こることなんじゃないかと考えました。そこでMENTAを使うことで自分のメンターを作ることにしました。MENTAは開発の相談をするために使う人が多いかと思いますが、メンタルケアをしてもらうためにも使えるのでおススメです。 エラー&エラー&エラー 今回開発を進めていくうえで数えきれないほどエラーに遭遇しました。出てきたエラーに対処を施してもその対処法が原因で別のエラーが出てくることもあり、ふて寝した日は数知れず。しかしエラーに対処していくうちに自分なりの対処フローが出来上がっていき、最初よりは時間を無駄にすることなく進めることができるようになっていきました。具体的なフローは以下のような感じです。 ①エラー文を読み原因の仮説を立てる ②仮説が正しいと仮定して、原因を潰すように処理を書き換える 【②がうまくいった場合】 対処完了。エラーの内容/原因/対処法をメモしておく。こうすることで同じエラーが出たときスムーズに対応できるようになる。 【②がうまくいかなかった場合（基本的にはうまくいかない）】 ・仮説をたてなおす（console.logで可視化してみる） ・仮説が立てられない場合エラー文で検索してGoogleを頼る ・MENTAに頼る 書いてみると当たり前の事をしているにすぎないことに気づきました。でも今のところの対処法はこんな感じです。 非同期処理 JavaScriptの非同期処理に大変苦労しました。正直未だによくわかっていません。 これを理解していないため、Firebase Authでユーザーを管理する際にハマりまくりました。 自分の場合はJavaScriptのドキュメントを読んでも理解できなかったのでこの記事を読んでなんとなく理解した後、他の人のGitHubのソースコードを読むことで少しわかるようになりました。ただ現在も勉強中です。 レスポンシブ対応 アプリ開発をMacBookAirで行っていたのでPCの画面上だと大丈夫なのですが、スマホで見るとデザインが崩れてしまっていることがよくありました。 CSSフレームワークにVuetifyを使っていたので、Vuetifyのグリッドシステムのドキュメントを読んでレスポンシブ対応できるようにしていきました。 ただ自分にとってグリッドシステムは理解が難しく、デザインをある程度思い通りにできるようになるまで１０回以上ドキュメントを読み直したと思います。 CSSをあまり深く勉強していない為、Vuetifyの前にCSSをしっかり勉強する必要があるなーと思っています。 使用した技術 アプリを開発するにあたって使用した技術をまとめておきます。 Nuxt.js（フロントエンド） Vuetify（CSSフレームワーク） Firebase Auth（認証） Cloud Firestore（データベース） Cloud Storage（画像アップロード） Firebase Hosting（ホスティング） axios（HTTPクライアント） GoogleBooksAPI（API） vue-word-cloud（ワードクラウド） vue-js-modal（モーダル） おわりに 未経験ながらなんとかアプリを作りきることができました。 といっても改善点は山積みでいまだに修正を繰り返しているのが現状です。やることが無限にありすぎてアプリ開発に終わりってあるの？と疑問に感じています。 ただ、自分の頭の中のアイデアをこうしてカタチにできたことに喜びを感じていますし、開発自体はとてもたのしかったです。（気づいたら深夜を周ってることもザラでした） これからもずっと開発を続けていきたいと思っています！ ■参考 本記事を作成するにあたって以下の記事を参考とさせていただきましたm(_ _)m 【初アプリ】未経験がFlutterで肉牛繁殖農家のためのアプリを作ってみた ゴリゴリのSIerのSEが個人開発でWebサービスを作ってみた
はじめまして、cryptoboxと申します。 メーカーで設計開発職をしている新卒一年目のモノです。
私は現在勤めている会社にインターン経由で早期に内定を頂き、愚かにもロクに自己分析もせず入社を決定してしまいました。 現在はそれをすごく後悔していて、本当に自分がやりたいことは何か見つめ直したとき、人々の悩みを解決して感動を与えるアプリ/サービス開発を仕事にしたいと思うに至りました。
そんな動機でプログラミングの勉強を始め、未経験ながら３か月ほどでアプリを作りきることができました。
そこで今回は開発したアプリの紹介と、作っている過程でぶつかった困難、そしてそれをどう乗り越えたかをまとめたいと思います。
サイトURL（PCとスマホに対応） https://cloud-critic.web.app/home
アプリ制作のきっかけは私が日頃から感じている１つの思いと現状のレビューサイトにおける２つの課題意識です。
１つの思いとは、 世の中の本には埋もれている（もっと評価されるべき）名作が多すぎる！ということです。
私は本を読むことが好きで、小説や漫画を結構多く読んでいます。そんな中、漫画「鬼滅の刃」を原作としたアニメが大ヒットしとんでもないブームになりました。
そこで私が思ったことは「『鬼滅の刃』めちゃくちゃ面白いけど、世の中には『鬼滅の刃』レベルにもっと流行っていい本がいっぱいあるのに！！」ということでした。
そんな世の中にあまり知られていないけど物凄く面白い本を、もっといろいろな人に知ってほしいと日頃から思っていました。
また、現状のレビューサイトにおける課題意識とは以下の２点です。
それぞれ具体的に説明します。
->レビューの敷居の高さ 商品レビューをしたことがある人は、商品に対する自分の意見を言語化するのって意外と難しいと感じたことがある人も多いんじゃないでしょうか？
自分もその一人で、面白い本を読んでその感想を語りつくしたいけど、語彙力が無くて全然文字にできない！と感じていました。
->５段階評価への疑問 レビューサイトでよくある５段階評価が作品を正当に評価できているかに疑問を感じていました。
なぜなら５段階評価だと、ストーリーはとても面白いのに絵があまりうまくないといった漫画の評価が３．５とかになってしまうのです。
ストーリーが著しく面白いのであれば、絵がうまくないといったポイントで減点される必要はないと考えていて、５段階評価ではない別のシステムで作品評価ができないかと考えていました。
この１つの思いと２つの課題意識を一挙に解決できるシステムを考えたとき、以下のアイデアが生まれました。
・ユーザーが作品に対してタグを付けられる ・そのタグに対して「いいね」できる ・また作品を「タグ検索」できる
ユーザーがレビューを書くのではなく、頭に思い浮かんだ断片的な言葉をタグとして作品につけることでレビューの敷居を低くします。
また、タグに対して「いいね」をすることで、作品を５段階で評価するのではなく、作品の良い部分や好きな部分を個別に評価できるというシステムにしました。
さらに作品をタグ検索できるようにし、例えば「もっと評価されるべき」とタグのついた作品を簡単に検索できるようにしました。
ということで実装した機能を紹介していきます。
作品にタグを付けて「いいね」することで評価できます。
タグネームといいね数に応じてワードクラウドを生成。 作品の評価されているポイントが一目でわかります。
同じタグのついた作品を検索できます。
コメントの作成/編集/削除ができます。
総合いいね数のランキングが見れます。
メールアドレス、もしくはGoogle、Twitter、Yahooアカウントでログインできます。 また１クリックでお試しログインできるテストユーザーログイン機能も用意しています。
自分はかなり飽き性で何かを初めても１ヶ月以上続くことはめったにありません。
今回アプリ開発をするにあたって最も気を使ったのがモチベーション維持です。具体的には以下の事を行っていました。
①開発を習慣化する 毎日、ご飯を食べ終わったら最低でも１行コードを書くということをしていました。やる気は作業をしているうちに出てくるもので、作業を始めるときがやる気の出ない最も辛いタイミングです。この始めるタイミングのハードルを限りなく低くすることで習慣化に成功しました。コードを書くことが習慣になってくると逆に書かないと気持ち悪いくらいになってきて毎日続けることができるようになっていきます。
②未完成でも友達に見せる まだ完成していなくても友達に「いまこんなの作ってるんだー」と見せると結構「すごいね」とか言ってもらえてモチベーションになりました。完璧なアプリを見せてドヤりたいのもあるのですが、未完成でも好反応をしてくれる人は多いので見せてみるのはオススメです。
③MENTAを使う 開発していると「こんなゴミアプリ誰が使うんだ」とか「なんでこんな簡単な実装ができないんだ」と自分を責めてしまう事が良くありました。独りでやっているとどうしてもメンタルがヘラっていき作業が捗らなくなることがあります。これは恐らく悩みを共有できたり相談できる人がいない為起こることなんじゃないかと考えました。そこでMENTAを使うことで自分のメンターを作ることにしました。MENTAは開発の相談をするために使う人が多いかと思いますが、メンタルケアをしてもらうためにも使えるのでおススメです。
今回開発を進めていくうえで数えきれないほどエラーに遭遇しました。出てきたエラーに対処を施してもその対処法が原因で別のエラーが出てくることもあり、ふて寝した日は数知れず。しかしエラーに対処していくうちに自分なりの対処フローが出来上がっていき、最初よりは時間を無駄にすることなく進めることができるようになっていきました。具体的なフローは以下のような感じです。
①エラー文を読み原因の仮説を立てる ②仮説が正しいと仮定して、原因を潰すように処理を書き換える
【②がうまくいった場合】 対処完了。エラーの内容/原因/対処法をメモしておく。こうすることで同じエラーが出たときスムーズに対応できるようになる。
【②がうまくいかなかった場合（基本的にはうまくいかない）】 ・仮説をたてなおす（console.logで可視化してみる） ・仮説が立てられない場合エラー文で検索してGoogleを頼る ・MENTAに頼る
書いてみると当たり前の事をしているにすぎないことに気づきました。でも今のところの対処法はこんな感じです。
JavaScriptの非同期処理に大変苦労しました。正直未だによくわかっていません。
これを理解していないため、Firebase Authでユーザーを管理する際にハマりまくりました。
自分の場合はJavaScriptのドキュメントを読んでも理解できなかったのでこの記事を読んでなんとなく理解した後、他の人のGitHubのソースコードを読むことで少しわかるようになりました。ただ現在も勉強中です。
アプリ開発をMacBookAirで行っていたのでPCの画面上だと大丈夫なのですが、スマホで見るとデザインが崩れてしまっていることがよくありました。
CSSフレームワークにVuetifyを使っていたので、Vuetifyのグリッドシステムのドキュメントを読んでレスポンシブ対応できるようにしていきました。
ただ自分にとってグリッドシステムは理解が難しく、デザインをある程度思い通りにできるようになるまで１０回以上ドキュメントを読み直したと思います。
CSSをあまり深く勉強していない為、Vuetifyの前にCSSをしっかり勉強する必要があるなーと思っています。
アプリを開発するにあたって使用した技術をまとめておきます。
未経験ながらなんとかアプリを作りきることができました。
といっても改善点は山積みでいまだに修正を繰り返しているのが現状です。やることが無限にありすぎてアプリ開発に終わりってあるの？と疑問に感じています。
ただ、自分の頭の中のアイデアをこうしてカタチにできたことに喜びを感じていますし、開発自体はとてもたのしかったです。（気づいたら深夜を周ってることもザラでした）
これからもずっと開発を続けていきたいと思っています！
■参考 本記事を作成するにあたって以下の記事を参考とさせていただきましたm(_ _)m
【初アプリ】未経験がFlutterで肉牛繁殖農家のためのアプリを作ってみた ゴリゴリのSIerのSEが個人開発でWebサービスを作ってみた
問題点 vuetifyのv-data-tableにて、全てのヘッダからソートを消した後スマホで表示すると変な空白行がヘッダに残ってる。 色々スタイル等いじって消そうとしたけど中々うまく動いてくれない。 解決策 v-data-tableにヘッダ非表示にするプロパティあったので、それをスマホの時にonにしてやる。 <!-- :hide-default-header="$vuetify.breakpoint.xs"の部分が追加箇所 --> <v-data-table :headers="headers" :items="desserts" :hide-default-header="$vuetify.breakpoint.xs" ></v-data-table> わかりづらいけど、ちゃんと消えてます。
vuetifyのv-data-tableにて、全てのヘッダからソートを消した後スマホで表示すると変な空白行がヘッダに残ってる。 色々スタイル等いじって消そうとしたけど中々うまく動いてくれない。
v-data-tableにヘッダ非表示にするプロパティあったので、それをスマホの時にonにしてやる。
<!-- :hide-default-header="$vuetify.breakpoint.xs"の部分が追加箇所 --> <v-data-table :headers="headers" :items="desserts" :hide-default-header="$vuetify.breakpoint.xs" ></v-data-table>
わかりづらいけど、ちゃんと消えてます。
Vue.jsをいじっていて、何気なく使っているcomputedプロパティですが、methodsでも同じようなことできるよなあと常々感じていました。今回はそのモヤモヤを解消するために、いろいろ調べてみたところ、挙動に決定的な違いがあることが分かったので、今回はこの二つの挙動について、備忘録としてまとめていきたいと思います。 computedとmethodsを用いて似たような挙動をするものを作成 下記のように、v-onディレクティブを用いて、ボタンを押すたびにカウントアップできるアプリを作成しました。それに、computedプロパティとmethodsを用いて、5以下の場合は「5以下」と、5よりも大きくなれば「5より上」と表示されるようにしてみました。 See the Pen QWNxWNp by Yasunari Fujiwara (@yasunari-fujiwara) on CodePen. コンソールを確認すると、ボタンを押すたびに、methodsもcomputedもそれぞれ一回ずつ呼ばれて処理をしているのが分かります。意図する処理ができているっぽいですが、実際は決定的な違いがあるようです。 違いが分かりやすいように、もう一つ別のボタンを作成して、その挙動をコンソールで確認します。 See the Pen WNwyvRe by Yasunari Fujiwara (@yasunari-fujiwara) on CodePen. 別のカウントアップボタンを押すときの挙動に注目します。コンソールを見ると、ボタンを押すたびにmoreThanFiveMethodが呼び出されているのが分かります。つまり、methodsは、テンプレートの中身が変わり、再描画された瞬間に呼び出されるということです。一方で、computedプロパティは参照先のデータが変わったときのみ、つまりここではthis.numberで指定したnumber変数の中身が変わったときのみ、呼び出されるということです。 computedプロパティとmethodsはどう使い分ければよいか？ computedプロパティとmethodsの決定的な違いとは「呼び出されるのが、データの参照先が変更したときか、テンプレートの中身が変更したときか」というものでした。今回作成したアプリは、カウントアップボタンを押すたびに5より大きいか判定するという処理の回数が多く、かつ参照先のデータに対してのみ処理がしたかったので、computedプロパティがを用いるのが適切でした。そのため、参照するデータ先が、つまり依存関係にあるプロパティが高い頻度で変更される場合にはcomputedプロパティを用いるのが適切だと考えられます。また、反対にmethodsの場合は、それほど頻度が高くなく、クリック時などの一括で処理を行うときに用いるのが適切だと考えられます。 参考サイト https://dev83.com/vue-computed-methods/ https://www.e-loop.jp/knowledges/1/
Vue.jsをいじっていて、何気なく使っているcomputedプロパティですが、methodsでも同じようなことできるよなあと常々感じていました。今回はそのモヤモヤを解消するために、いろいろ調べてみたところ、挙動に決定的な違いがあることが分かったので、今回はこの二つの挙動について、備忘録としてまとめていきたいと思います。
下記のように、v-onディレクティブを用いて、ボタンを押すたびにカウントアップできるアプリを作成しました。それに、computedプロパティとmethodsを用いて、5以下の場合は「5以下」と、5よりも大きくなれば「5より上」と表示されるようにしてみました。
See the Pen QWNxWNp by Yasunari Fujiwara (@yasunari-fujiwara) on CodePen.
コンソールを確認すると、ボタンを押すたびに、methodsもcomputedもそれぞれ一回ずつ呼ばれて処理をしているのが分かります。意図する処理ができているっぽいですが、実際は決定的な違いがあるようです。 違いが分かりやすいように、もう一つ別のボタンを作成して、その挙動をコンソールで確認します。
See the Pen WNwyvRe by Yasunari Fujiwara (@yasunari-fujiwara) on CodePen.
別のカウントアップボタンを押すときの挙動に注目します。コンソールを見ると、ボタンを押すたびにmoreThanFiveMethodが呼び出されているのが分かります。つまり、methodsは、テンプレートの中身が変わり、再描画された瞬間に呼び出されるということです。一方で、computedプロパティは参照先のデータが変わったときのみ、つまりここではthis.numberで指定したnumber変数の中身が変わったときのみ、呼び出されるということです。
computedプロパティとmethodsの決定的な違いとは「呼び出されるのが、データの参照先が変更したときか、テンプレートの中身が変更したときか」というものでした。今回作成したアプリは、カウントアップボタンを押すたびに5より大きいか判定するという処理の回数が多く、かつ参照先のデータに対してのみ処理がしたかったので、computedプロパティがを用いるのが適切でした。そのため、参照するデータ先が、つまり依存関係にあるプロパティが高い頻度で変更される場合にはcomputedプロパティを用いるのが適切だと考えられます。また、反対にmethodsの場合は、それほど頻度が高くなく、クリック時などの一括で処理を行うときに用いるのが適切だと考えられます。
https://dev83.com/vue-computed-methods/ https://www.e-loop.jp/knowledges/1/
