TypeScript
JavaScriptを拡張して開発された新しいプログラミング言語です。
JavaScriptとなにが違う?
JavaScriptは実行時にデータ型を決める動的型付けです。
→コードディングの際はエラーに気付けない
TypeScriptではあらかじめ変数の型を定義する静的型付け
→未然にエラーを発見できる
フレームワークは?
JavaScriptと同じ。
・React
・Vue.js
Vue CLI
Vue Command Line Interface
コマンドラインを使ってVue.jsでの開発支援を行うツールのことを指します。
→開発に必要な機能をインストールしてくれる
webpack も一緒にインストールされる
scaffolding:アプリケーションを効率的に構築するためにある程度まで必要な状態を作ってくれること
webpack
CSSやJavaScript、画像などWebサイトを構成するあらゆるファイルを1つにまとめるモジュールバンドラー
ビルドツールとしても機能
バンドル:一つのファイルにまとめること
モジュールバンドル:モジュールをバンドルするツール
Vite
Vue.js向けのビルドツール
webpackとvite
webpack | vite | |
---|---|---|
初期設定と速度 | 初期設定が複雑でビルドが遅い | 初期設定が簡単でビルドが速い |
開発サーバー | 起動ちょっと遅い | 起動速い |
ツールの目的 | さまざまな用途で使用される 汎用的なツールで、 複雑なプロジェクトにも対応 |
特にVue.jsの開発に特化 |
firebase
Googleが提供するモバイルおよびウェブアプリケーションのための開発プラットフォーム
CDN
コード内に所定のURLを記述することでライブラリを導入できる仕組み
Vutify
ビューティファイ
WebアプリケーションのUIを設計できるCSSフレームワークの一種
JavaScriptフレームワークであるVue.jsに対応している
Nuxt
ナクスト
Vue.jsがベースになっているJavaScriptフレームワーク
Vue.jsをより使いやすくする機能を持っている
vue.js | nuxt | |
---|---|---|
レンダリング | SPA | SSR |
ルーティング | 手動で設定 | 自動で設定 |
サーバ機能 | なし | あり |
Vue Router
Vue.jsのプラグインの一つで、SPA(Single Page Application)のルーティング制御をする為のもの
ルーティング:リクエストされたURLに応じて,コンポーネントを選択して表示する仕組みのこと
Vuex
ビューエックス
Vue.js アプリケーションのための 状態管理ライブラリ
アプリケーション内でデータの受け渡しや管理が複雑な場合に導入すると良い
アプリケーション全体で使用されるデータ→Vuexで管理する
コンポーネントの内部のみで使用されるデータ→dataオプションで管理する
状態(state):アプリケーションが保存するデータのこと