vue.js学習記録｜いしかわ

固定された記事

2022年3月21日 15:28

Vue.js勉強記録目次

■CHAPTER1 Vueを使ってみよう・1-1 Vue3のセットアップ・1-2より本格的なプロジェクト・1-3プロジェクトを作ろう■CHAPTER2 Vue3の基本をマスターしよう！・2-1 Vue3の基本的な仕組み-基本コードをチェックしよう
-Vue3の基本コードについて
-データの橋渡し
-Vue3のデータは活きている！
-mountedについて
-アロー関数について
-タイマーを停止する

もっとみる

いしかわ

2022年4月20日 13:02

Vue.js勉強記録その38 外部サービスを利用しよう 6-4 ver2

こちらの書籍で勉強中です。

今回は、googleアカウントによる認証です。前回同様、Firebaseのバージョン違いにより、書籍通りには動きませんでしたが、とりあえず認証はできる様になった？と思われます。

■AuthenticationにアクセスFirebaseのコンソールにアクセスし、左側のAuthenticationをクリック。

始めるボタンをクリック。

追加プロバイダから、Googl

もっとみる

いしかわ

2022年4月19日 18:47

Vue.js勉強記録その37 外部サービスを利用しよう 6-4 ver1

こちらの書籍で勉強中です。

今回は、Firebase SDKを使います。
ですが、Firebaseのバージョンが、こちらの書籍の時と変わっていて、書籍通りに記述しても動きませんでした。

ので、書籍の内容とは少し違う感じになります。

■プロジェクトにWebアプリケーションを追加するFirebaseの管理画面の、左上にある、「プロジェクトの概要」の右にある、歯車マークから、プロジェクトの設定をク

もっとみる

いしかわ

2022年4月2日 11:23

Vue.js勉強記録その36 外部サービスを利用しよう 6-3 ver2

こちらの書籍で勉強中です。

今回は、Realtime Databaseにデータを入力したり、削除したりします。

■FirebaseとREST API・データの追加axiosでデータを追加するときは、以下のような記述でできます。

axios.put(アドレス , オブジェクト);

このアドレスには、FirebaseのRealtime databaseの以下のようなURLが入ります。

htt

もっとみる

いしかわ

2022年3月29日 11:41

Vue.js勉強記録その35 外部サービスを利用しよう 6-3 ver1

こちらの書籍で勉強中です。

引き続きFirebaseです。今回は、データの検索です。

■FirebaseとREST API

・keyを指定して検索<template> <section class="alert alert-primary"> <h1>{{ data.title }}</h1> <p>{{ data.message }}</p> <div class="form-

もっとみる

いしかわ

2022年3月28日 11:30

Vue.js勉強記録その34 Slack投稿アプリを作ろうver2

こちらの書籍で勉強中です。

が、今回は少しテキストから離れてSlack投稿アプリを作ったので、備忘録的に作り方を残します。

大まかな流れは以下

1.slackのAPIから、アプリを登録し、ボットで投稿できるトークンを取得
2.そのアプリを、該当のSlackのチャンネルに追加
3.axiosを使ってSlackにアクセスし、投稿する仕組みを作る
4.routerを使って、各クラスのSlackに投

もっとみる

いしかわ

2022年3月27日 17:21

Vue.js勉強記録その33 Slack投稿アプリを作ろうver1

こちらの書籍で勉強中です。

Slackのワークスペースの、特定のチャンネルに、匿名で投稿する仕組みを作りたいと思ったので作ってみました。

今回は、一度テキストを離れて、Slack投稿アプリの作り方を備忘録的に書いていきます。

■そもそもなぜ作りたかったかまず、何故Slack投稿アプリを作りたかったのかを書いていきます。

僕の仕事は、ホームページの作り方を教える講師です。いわゆる職業訓練校の

もっとみる

いしかわ

2022年3月26日 13:16

Vue.js勉強記録その32 外部サービスを利用しよう 6-2 ver2

こちらの書籍で勉強中です。

今回は、前回作ったFirebaseのデータベースにアクセスして、値を取得します。

■FirebaseとREST API・axiosでデータベースにアクセスするindex.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.

もっとみる

いしかわ

2022年3月25日 14:22

Vue.js勉強記録その31 外部サービスを利用しよう 6-2 ver1

こちらの書籍で勉強中です。

今回は、googleのサービスである、Firebaseを使います。まずはアカウントを作るところからです。

■FirebaseとREST APIFirebaseとは、googleが提供しているクラウドのサービスです。

JSだけで、データベース、ユーザー認証などが使えるようになるサービスです。

・Firebaseの準備こちらにアクセスします。

使ってみるをクリック

もっとみる

いしかわ

2022年3月24日 14:13

Vue.js勉強記録その30 外部サービスを利用しよう 6-1 ver2

こちらの書籍で勉強中です。

今回は、axiosを使ってjsonデータを取得します。

■axiosで外部サイトにアクセス！・JSONデータを使ってみる
以下のサイトから、ダミーのJSONを使ってJSONデータを使ってみます。

JSONPlaceholderは、以下のようにデータを取得できます。

全データ（100件）所得
https://jsonplaceholder.typicode.com

もっとみる

いしかわ

2022年3月23日 14:18

Vue.js勉強記録その29 外部サービスを利用しよう 6-1 ver1

こちらの書籍で勉強中です。

今回は、axiosを使って外部サイトにアクセスします。

■axiosで外部サイトにアクセス！・axiosのインストールaxiosとは、外部のサイトにHTTP通信するためのパッケージです。使うには、まずaxiosのインストールする必要があります。

npm install axios

・基本的な使い方import axios from "axios";

インポート

もっとみる

いしかわ

2022年3月21日 12:26

Vue.js勉強記録その28 Vue3を更にパワーアップしよう 5-4

こちらの書籍で勉強中です。

今回は、メモアプリを作ります。少し長い記事になっちゃいそうです。。。さらに、テキストから少しだけ自分なりにアレンジした内容になってます。

■まずは各ファイルを連携させるいきなり全てのコードを全部書いてしまうと、動きがわからないので、少しずつ書いていきます。

まずは、ベースになるHTMLをちゃんと表示させるところまで。

Vuexと、vuex-persistedst

もっとみる

いしかわ

2022年3月19日 16:17

Vue.js勉強記録その27 Vue3を更にパワーアップしよう 5-3 ver2

こちらの書籍で勉強中です。

今回も、前回に引き続きVuexについてです。

mutationを呼び出す際に、オブジェクトで引数を渡す方法。
actionについて。
vuex-persistedstateについてです。

■Vuexによる状態管理・mutationの引数にオブジェクトを渡すmutationを呼び出す際に、

$store.commit({type:'mutation名',aaa:'

もっとみる

いしかわ

2022年3月18日 13:36

Vue.js勉強記録その26 Vue3を更にパワーアップしよう 5-3 ver1

こちらの書籍で勉強中です。

今回は、vuexというものを使います。どうやら、データを格納しておくことのできる場所のようです。

■Vuexによる状態管理・Vuexのインストールまず、Vuexをインストールしていきます。CDNで読み込むことも出来るらしいけど、今回はnpmを使ってインストールしていきます。

npm install vuex@next

・Vuexの基本Vuexは、「ストア」と呼ば

もっとみる

vue.js学習記録

記事一覧