情報自炊

情報を血肉にしたい

「Vue.js&Nuxt.js超入門」で勉強するために流し読み

キーワードを拾いながら読んでいったのでここにメモ書き

www.amazon.co.jp

時代は「バックエンドからフロントエンドへ」

Addendum JavaScriptオブジェクト超入門

var 変数名;
let 変数名;
const 定数名;

関数は「値」。Vue.jsでは関数を値として扱うことがよくある。

function a() {
  return "hello";
}
let b = a;
let c = a();  // "hello"

アロー関数はVue.jsであちことで使われている。

function hello(getname) {
  alert("こんにちは、" + getname() + "さん!");
}
hello(()=>{ return "太郎"; }); // こんにちは太郎さん!
hello(()=>"花子"); // こんにちは花子さん!

クラス。Vue.jsではクラスを自分で作ったりすることはまずない。ただ、Vue.js側でクラスとして機能が用意されている場合がある。

class クラス名 {
  constructor ( 引数 ) {
    this.プロパティ = 値;
  }
  メソッド ( 引数 ) {
  }
}

モジュール。特にexport defaultはVue.jsで必要な機能を読み込む際の基本になっている。

export function MyObj() {
  ...
}
<script type="module">
import { MyObj } from "./script.js";
</script>
export default MyObj() {
  ...
}
<script type="module">
import myobj from "./script.js";
</script>

Chapter1

Vue.jsの特徴

  • リアクティブプログラミング
    • データが更新されると、自動的に画面の表示も更新
  • コンポーネントシステム
    • 再利用可能な部品で機能を実装
  • テンプレート
    • HTMLの延長上のような感覚で記述できる

プロジェクト プログラムの作成に必要なさまざまなもの(スクリプトファイルや、イメージなどのファイル、各種のライブラリやフレームワークなど)をまとめて管理するもの。

Chapter2

レンダリング 用意されたデータなどをもとに実際の画面表示を作成する処理のこと。

仮想DOM 「バーチャルなDOM」の仕組みのこと。仮想DOMは実際のDOMと対応しており、常に同じ状態になるように働く。

Chapter3

コンポーネント 一言で説明するなら「名前のついた再利用可能なVueオブジェクト」。

実際のアプリづくり。「計算アプリを作ろう」

Chapter4

応用が記載されている。

Chapter5

Nuxt.js Nuxt.jsはサーバサイドレンダリング。 データ管理ライブラリが組み込まれている。 ルート管理。 プロジェクトの生成ビルド。

アプリの作成。「メモアプリを作ろう」

Chapter6

axios HTTP通信のための機能を提供するパッケージ。

Firebase