マガジンのカバー画像

フロントエンジニアになるためのVue修行

18
ちょっとHTML/CSSをかじった程度の僕がプログラミングスクールで仕事終わりと週末にどう学び、何ができるようになったまとめたマガジンです。全然、分からないことがたくさんあるので… もっと読む
運営しているクリエイター

記事一覧

firebaseとvueの紐付け作業

firebaseとvueの紐付け作業どうやるんだっけ?って時の、忘備録。 firebase.jsonの設定{ "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/inde

タスクをバラして再スタート

議事録アプリを作ると決めてからすっごい時間がかかってしまった…けど、マインドマップでやること明確にしたら、なんかやれる気がしてきたので、今回はその共有です。 これが前回までのタスク。 正直、何から手をつけていいかわからないし、タスクが沢山あってやる気もだだ下がりでした… スパイク打ち →ログイン機能の仕組みを知る →学習中のUdemyで学ぶ=>2時間  →ログイン機能のサンプルプロジェクトを作る=>3時間 →上書き保存の仕方を調べる=>1時間  →サンプル作る=>2時

もう一度vuejsを学ぶ。5/26

まだ、理解できていないので、もう一度学び直します。その時にわかったことをまとめて、忘備録として行こうと思います。いま学んでいる人や、忘れちゃってるなという僕と同じようなプログラミング初心者に向けて書いていきます。 メソッドを使用して、データ内のmessageを表示する。<div id="app"> <p>{{ message }}</p> //data内のmessageに入っている’’を表示 <p>{{ sayHi() }}</p> //sayHiメソッドを使用。</div

firebaseを使ったログイン機能

おはようございます。firebaseを使ったログイン機能にはこんなにもやることがありそうです。 ログイン認証がSPA上でどう実現されるか理解する セットアップ ユーザー登録の機能実装 ユーザーログインの機能を実装 トークンがないとアクセスできないようにする プロジェクト全体でVuexを使用して使えるようにする トークンをヘッダーにつけてリクエストを送る。 ログイン状態に応じてリダイレクトをする処理を実装する ログイン状態に応じてナビゲーションバーの内容変更 トークンの有効期

タスクばらしで見える化する

今週から、アプリの制作事例を作るために、行動しようと思っています。そこで、自分にできていないこと、これからやるべきことの見直し、所要時間の把握をするために、「タスクばらし」をすべきと教えてもらったので、その明確化とやり方のシェアということで、noteに残していこうと思います。また、フィードバックをもらってどうなったか、実際にどれだけ時間がかかったのか、なども今後わかるようにしていけたらなと思っています。 ちなみに、タスクばらしとは ・30~40分で終わる物にする ・一つのタ

11週(4/22~)飛んで13週(5/5~)

おはようございます。 気づいたら3週間経ってました。コロナ自粛の中GWに向けて仕事が忙しく、急に寒くなってからポカポカしてきて環境が生活習慣が変化し、やらない習慣になってしまっていました、、、やれなくなっても、やり始めればいいと思い、今日から気を取り直してまたプログラミングの勉強をしようと思います! 前回までの宿題①意味を調べる。なぜ、この書き方をしているのか。 ↓JavaScriptを勉強している人は、気になる記述の仕方らしい。 const { title, descr

10週目(4/15~)

先週は本業が忙しく、休みも1日だったので捗ってませんが、宿題で進んだところをnoteに書いていこうと思います。 今週の宿題 ①意味を調べる。なぜ、この書き方をしているのか。 ↓JavaScriptを勉強している人は、気になる記述の仕方らしい。 const { title, description } = doc.data()objectショートハンドreturn { news } ②先週の宿題の続き 編集・削除でfirebase内のデータをupdate/dest

9週目(4/8~)クエリパラメータとは...

前週の宿題①news/newに登録フォームを作り、firebaseに保存 ②newsに登録結果の一覧表示(firebaseからデータを読み込む) ③firebaseのデータベースを削除する ④firebaseのデータベースを編集できる ⑤報告を逐一する 自力でできたこと(所要時間15時間)firebaseのデータベースにデータを保存し、それを読み込む。表示まではできず、そこから編集したり、削除したりするのも出来ませんでした。 学んだことscriptの表記の仕方/idの活用

8週目続き

わかったこと。 firebaseにて、データの取得をするには、 JavaScript側でfirebaseのデータベースをインポートし、 get()メソッドとforEach()でConsoleに表示する。 <script>import { db } from '~/plugins/firebase.js'export default { methods: { async onSubmit() { await db.collection('news').add

8週目になって、微妙と気づく。

まだまだ基礎ができてませんでした、、、 楽しようとして、端折ってコピペする感覚でfirebaseのことを理解しようとしていて、わけわからん状態に陥りました。だって、いろんな種類、見たことないメソッドがあるんだもん。なので、概念の理解からまずはしないとダメでした。というわけで、今日は、概念の理解をしっかり調べながらやろうと思います。 Firebaseとは何か?Cloud Firestore は、Firebase と Google Cloud Platform からのモバイル、

8週目(4/1~)

寄り道(前回までの内容でわかった内容)更新フォームの作り方でわかったこと: updateメソッドを使うということ。 フォーム内に薄い色の文字を入れるには↓ <input type="text" value="" placeholder="表示させたいテキストを記述" > 参考になったサイト 現状:paramsってなに?というところで詰まっている。 ルートコンポーネント??という状態。 7週目の宿題 firebaseのデータベースであるfirestoreにnews

7週目(3/24~)Vuexについて学んだ!

今週は本業が忙しく、時間が避けなかったので、 Zoom会議の予定は無い。 気づき ・storeにあった、コードがエラーを出していた。 ・buefyが無いと、b-input使えない、、、 再度、アプリ作成して始める。 わからないこと→解決内容 ・ボタンをクリックでどう他のページへ移動するか。 →<nuxt-link to="/news/new">news 追加</nuxt-link>でページ遷移できた。 ・CSSの装飾の仕方。 →<style>css</

6週目(3/17~)またまた進まず...

エラー画面のため、進まず、、、 今週はこれを解決するため、メンターとのZoom会議は延期。

5週目(3/10~)理由は不明。だが、できた...

3週目の課題 NEWSのAPI情報をasync/awaitを使って、データ入手し、リスト表示する。 前回詰まっていた所:デベロッパーツールのConsole内にデータが入ってきていなかった為、どうしたらいいか不明だった。 だが、 2、3日放置して新しく書き直したら正しく動き、データが入ってきていて表示ができた。理由は不明。だが、できた。 また、CSSで見た目を整えることに時間を作れなかったので、また今度作成する。 今週の内容 今回からはVuexの仕組みを使ってアプ