vue.js勉強備忘録

何もわからない状態からのスタート

vue.jsってなんぞ

要するにいい感じになるライブラリ。とりあえずjQueryっぽいやつだと思っておけばいい。

ライブラリを読ませておいて組み込んでいく。jQueryと違ってjs的な記述になるんだけど、それでもvue.jsなりの書式はあるのでその辺を理解して触る必要がある。jQueryに手を出してjsをわかったつもりになってる人間には覚えることとか理解することが多いので結構たいへん。

IE非対応(極論)

vue.jsのバージョンによりIE非対応(2系だとIE8以下NG)であったり、記述を頑張らないとIEでちゃんと動かなかったり、そういうのがある。

【Vue.js】IE11でうまく表示されない(真っ白)原因と解決策 | マコブログ
Vue.jsを使ってプログラムを書いたものの「IE」だと何も表示されず真っ白の画面、他のブラウザで動作するのにIEでは動かない時は以下の問題が考えられます。「原因①:関数定義が省略記法である」「原因②:アロー関数を使用している」「原因③:バッククォートを使用している」

後数日でIEのサポートが終了する。とても待ち遠しいんだけど、多分サポート終わっても継続して使う人はいる。レギュレーションに沿えば度外視していいんだけど、世間的にはどうなんだろう。とはいえ既にvue.jsは流行ってるわけで、強行突破してもいいんじゃないかと思う。だけど、クライアント案件だとここのところの説明をするのめんどくさいなーって。どうしてるんでしょうね。

jsは末尾で読ませる

vue.jsのライブラリは<head>で読み込んでいいんだけど、各種組み上げた内容はベタ打ちだろうが外部ファイルだろうが対応するhtml上のタグより後に記述する必要がある。

jQueryだと全部<head>にぶち込めるので、それで慣れちゃってると躓く。

<div id="test">
    {{test01}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
    el: '#test',
    data: {
        test01: 'あああああ'
    }
})
</script>

参考

重ね重ねだけどjQueryで慣れきってると応用があんまり効かないので、無理せずに初心者向けの内容を読んで勉強するのがいい。その点、この記事はとても良かった。

初めてのVue.js「入門編」基礎から学ぼう!サンプルコードで丁寧に解説(郵便番号から住所の自動取得をやってみる) | 株式会社ウェブ企画パートナーズ

dataを増やす

連想配列のアレで増やしていける。

<div id="test">
    {{test01}}
    {{test02}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
    el: '#test',
    data: {
        test01: 'あああああ',
        test02: 'いいいいい'
    }
})
</script>

const単位で分ける

const以外の書き方もあるのでこれに限らないんだけど。constで複数作り込む場合はこんな感じで切り分けてやっていく。

こんな感じ。

<div id="testA">
    {{test01}}
</div>
<div id="testB">
    {{test01}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
const vm = new Vue ({
    el: '#testA',
    data: {
        test01: 'あああああ'
    }
})
const vm2 = new Vue ({
    el: '#testB',
    data: {
        test01: 'いいいい'
    }
})
</script>

elの指定先を替えてるのでdataのkeyが被ってても問題ない。

出力内容を色々いじりたいならcomputed

「関数の戻り値」を使う場合はこうなる。

<div id="test">
{{testDate}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
    el: '#test',
    computed: {
        testDate: function(){
            return new Date();
        }
    }
})
</script>

当然出力内容には手を入れられる。

        testDate: function(){
            return new Date().toISOString().split("T")[0].replaceAll("-", "/");
        }

所詮はjsであるということ

jsで処理したものをhtml上に表示してるだけなので、反映されるまでは元のタグが表示される。

クリックとかで発火させるならいいんだけど、ページ読み込み時の動作を仕込むのはやっぱりしんどい。cssとかで読み込み時にフェードインを仕込むとかして過程を視覚的に排除するのがいいかも。

body {
    animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

HTMLへの記述機会が多い

ここを見ればイメージが付くと思う。

テンプレート構文 — Vue.js
Vue.js - The Progressive JavaScript Framework

js、jQueryでいうdata属性的なものがvue.jsだと色々ある。良くも悪くもjsの記述だけで完結しないんで覚えることがいっぱい。うん、jQueryは行き当たりばったりでなんとかなるけど、こっちはちゃんとお勉強しておかないとまずい。

「ディレクティブ」

htmlタグに追加するvue.js独自の素敵なアレ。

【Vue.js】主要ディレクティブ一覧。実例ありの使い方まとめ
主なディレクティブ一覧ディレクティブ名内容v-bind単方向バインディング。dataオブジェクトの値を反映する。v-if真偽値がfalseの場合要素を非表示にする。v-showと違いDOMごと非表示にするため重い。v-elsev-ifの真偽

独自のアレなのでどういうのがあるか知って覚える必要がある。

ajaxが強み?

axiosやらなんやらがある。ページ遷移をせずに情報のやり取りができるのでなんか素敵な感じのサービスを組みたいってときに活躍しまくれる感じ。普段の制作ではyubinbango.jsとか既存のものを導入するだけなので、自分としてはあんまり関係ない話。だけど、なんか良さそうですね。

プロジェクト単位で開発ができる

git的なアレ。開発に必要な環境を揃えて組み上げて、WEBサーバーにアップできる形に書き出すとかそんなやつ。

Vue CLIでプロジェクトを作成する [Vue.js]
Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されています。Vue CLIは、Vue.jsのアプリケーションを開発するための前準備支援してくれるツールになりま

コンソールの操作はあまり好きじゃないのでアレだけど、「やってる感」は出るよね。

まあでも一般的なWEBサイトの構築には要らないかなと思う。ポータルサイトとかの大掛かりななんやかんやを作るときに活躍する感じか。ローカル環境で組んで完成したらサーバーにアップするみたいな。まあでも公開非公開の面で考えたらwpでカバーできるよねってことも。やってることはwpにプラグインをぶち込んでるのと大差ないというか。とはいえ優劣じゃなくて使い分けの話だと思うし、あとは好き好きとか長短とかのあれで開発速度も変わるし、選んでやっていこうねって感じですかね。

HTML要素を自作できる

自作と言い切ると語弊があるけど。独自の要素を作って、それを指定して操作できる。

<div id="test">
    <test-component/>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
Vue.component('test-component',{
    template: '<p>あああああ!</p>'
})
new Vue({
    el: '#test'
})
</script>

独自要素は以下の書き方でもOK。というかまあ、用途に応じてって感じ。

<test-component></test-component>

名称は好きに付けられるし既存に被ることはないだろうけど、ハイフンを使ったりして確実なユニークに持っていくのが無難。

出力するとこんな感じになる。

<div id="test">
    <p>あああああ!</p>
</div>

要するに置換。wpでいうショートコードみたいな。

この方法だとjsが反映する前に表示されるものは何もないので、ページ読み込み時に自動挿入するタイプを仕込みたいならオススメか。

検証で見ると反映後が表示されて、ソースを見ると反映前の独自要素が表示される。この程度で何だって話でもあるけど、ちょっとした秘匿テクニックとして使えるかもしれない。

まあそんな感じで、いい感じに組み上げたものにElementというものがある。

Element - The world's most popular Vue UI framework
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

詳しくはこの記事とか。

Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった | 綺麗に死ぬITエンジニア
JavaScriptのフレームワークである「Vue.js」、皆さんは使ってますでしょうか。学習コストの低さ、小規模案件での導入のしやすさ、大規模案件にも対応できる拡張性の高さから、最近はVue.jsばかりいじっています。今回は、そんなVue.js上で、すぐに高機能なU…

しっかり理解できるまでは環境準備もUIで操作したほうがいいと思うとだけ。

プロジェクト管理ができる

Vue.jsでプロジェクトを作ってWEBサイトを構築、そのままだとブラウザで閲覧できないので動く形に書き出してWEBサーバーにアップロード、って段取りでやっていくことができる。

それぞれビルド、デプロイ、リリースっていうのが一般的みたい。

ビルドとデプロイとリリースの違いについて - Qiita
個人的にあいまいなところがあるので、 まとめてみました。 Weblio辞書によると... ビルド 【英】build ビルドとは、コンピュータやソフトウェア関連の用語としては、ソースコードとしてコーディングされたソフトウェアを、...

旧バージョンに戻すことをロールバック。

プロジェクト作成方法

触ったほうがイメージが付きやすい。分かりやすい記事があったので、それに沿ってやっていくのがいい。

Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
Vue.js を vue-cli でシンプルに過不足なくスタートする はじめに 可能なかぎり、この通りやればできるようにシンプルで過不足なくコマンドをまとめていきます。 (2019.02) Vue CLI 3対応するため...

「vue ~」がエラーになる場合

powershellで勧めていくと「vue create my-project」で以下のエラーが出た。

vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\***\AppData\Roaming\npm\vue.ps1 を読
み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を
参照してください。
発生場所 行:1 文字:1
+ vue create my-project
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

powershellのセキュリティに引っかかって拒否ってるからで、緩和すれば解決する。

Set-ExecutionPolicy RemoteSigned -Scope Process
PowerShell vue : このシステムではスクリプトの実行が無効になっているため~ エラーの対処法 - Qiita
はじめに vueコマンドを実行したら以下のエラーが起きたときの自分ができた解決方法を記載します。(ぼくではできましたレベルの記事なので、ご参考程度に) エラー内容 vue : このシステムではスクリプトの実行が無効になって...

powershellを起動するたびにエラーになるので覚えておいた方がいい。

vue create my-project

プロジェクト作成にあたってY/Nとか選択とかあるけどYで通せばいい。

npm run serve

ローカルに鯖立てして「http://localhost:8080/」で閲覧ができる。当然ながらソースコードを表示させてるんで、編集するなら一旦停止させる必要がある。停止したいときは「Ctrl+C」、終了確認のメッセージが出るので「Y」を入れてEnter。

WEBサーバーにVue関連が入ってればこれをそのまま持っていけば表示されるんだろうけどそういうわけにもいかないので、ビルド・デプロイをやっていく必要がある。

npm run build

実行して生成される「./dist」の中身は通常のwebサイトと同じ構成なので、これをWEBサーバーにアップすれば表示される。されるんだけど、各ファイルへのリンクが「src=”/」みたいになってるのでドメイン直下じゃないとリンクが死ぬ。「src=”./」に置換して相対パスにしておくのが無難。これはお試しだからいいけど、本番環境だといちいち置換するのは手間を通り越してリスクなので調整が必要なら設定でそうなるようにしとくのがいい。

プロジェクトの削除

削除する場合はプロジェクトのディレクトリを削除するのが手っ取り早い。npmとかで色々インストールしたものはこのディレクトリに入ってるだけでwindowsのProgramfilesとかとは無関係。アンインストーラーを使ってどうのこうのってことにはならない。

Vue Element Admin

活用はすっ飛ばしてとりあえずブラウザで見れるまで持っていく。

GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin
:tada: A magical vue admin - GitHub - PanJiaChen/vue-element-admin: A magical vue admin...

cloneでもDLでもいいからGithubから引っ張ってくる。

DLした場合は「vue-element-admin-master.zip」を解凍して、中身を作業用ディレクトリに入れる。

コンソールを起動して該当ディレクトリに移動

cd ディレクトリパス

インストールする。結構待つ。

npm install

起動する。地味に待つ。

npm run dev

ブラウザが勝手に立ち上がる。IDPWはもともと入ってるのでそのままログイン。

Vue Element Adminの日本語化

端的に言って無理。readmeに書いてあるけど、現行バージョンではi18nに対応してない。なので英語と中国語が入り混じったものを使うことになる。どうしても日本語にしたければ旧版を使う。

GitHub - PanJiaChen/vue-element-admin at i18n
:tada: A magical vue admin - GitHub - PanJiaChen/vue-element-admin at i18n

インストール方法は同じ、自動で日本語表示になる。カスタマイズ前提で考えたら日本語で書いてるから何なんですかっていう気もする。

Element ui部分は現行版でも日本語化できる。日本語ファイルが同梱されてるので呼び出し部分を書き換えたらいい。

//import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持,无需额外引入,请删除该依赖
import jaLang from 'element-ui/lib/locale/lang/ja'

...

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
//  locale: enLang // 如果使用中文,无需设置,请删除
  locale: jaLang
})

だけどElement uiの領域はそんなにないので、変更した実感はほぼない。

コメント

タイトルとURLをコピーしました