- 投稿日:2020-09-13T22:39:40+09:00
EC2作成直後の状態から最速でVue.js(CDN版)のWebサイトを立ち上げる
はじめに
超・初心者向けシリーズ。
とりあえずVue.js始めてみたいけどどんな感じでやってみたらいいの?な人向け。以下の通りに実行していけば、S3の静的Webサイトホスティング上でVue.jsのHello Worldが動く。
手順
1. yumのアップデート
$ sudo yum update2. Node.jsのインストール(npmがNode.jsに含まれる)
Vue.jsの静的解析はESLintという強力なlinterがあるので、それを動かすためにnpmを入れておく。
Node.jsについては、予め、rpm.nodesource.com でサポートバージョンを確認しておく。今回は、記事を書いたタイミングでサポートされている14をインストールする。
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - $ sudo yum install -y nodejs3. ESLintのインストール
なんか色々インストールしているが、「とりあえずこれを静的解析に入れておけばかなり良い感じにチェックしてくれる」なものを入れている。
$ npm init -y $ npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue4. ESLintの設定ファイル(.eslintrc.yml)の作成
rulesの
no-undef: warn
は今回の記事では不要だが、CDN版でaxiosを動かそうとするとエラーが出てしまうので…….eslintrc.ymlextends: - 'plugin:vue/recommended' - 'plugin:vue/essential' - 'standard' env: browser: true rules: no-undef: warn globals: Vue: true5. ESLint実行の設定
ESLintの実行はそのままだと面倒なので、
npm run lint
で実行できるようにしておく。
npm init -y
した時に作成される package.json の以下の部分を書き加えるpackage.json(前略) "scripts": { "test": "echo \"Error: no test specified\" && exit 1" ★この行を消して "lint": "eslint contents/*.js contents/*.html" ★この行を書き加える }, (以下略)6. おためしコンテンツを作成
contents/index.html<html> <head> <meta charset="utf-8"> <title>Vue TEST</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="/app.js"></script> </body> </html>contents/app.jsconst app = new Vue({ el: '#app', data: { message: 'Hello World!!' } }) app.$mount('#app')7. S3バケットを作成
…の前にコンフィグ設定
$ aws configure AWS Access Key ID [None]: xxxxxxxxxxxxxxxxxxxx AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Default region name [None]: ap-northeast-1 Default output format [None]: json今度こそバケットを作成
$ aws s3 mb s3://neruneruo-vuejs-test-bucket $ aws s3 ls静的Webサイトホスティングの設定
$ aws s3 website s3://neruneruo-vuejs-test-bucket --index-document index.htmlファイルをアップロード
$ aws s3 cp contents/index.html s3://neruneruo-vuejs-test-bucket/index.html --acl public-read $ aws s3 cp contents/app.js s3://neruneruo-vuejs-test-bucket/app.js --acl public-readこれで、静的WebサイトホスティングのURLにアクセスしたら「Hello World!!」が表示されたはずだ。
あとは、ガンガン
npm run lint
しながら Vue.js の世界を堪能しよう!
- 投稿日:2020-09-13T16:35:20+09:00
vue/composition-api@1.0.0-beta7で入ったBREAKING CHANGESについて解説する
vue/composition-api@ 1.0.0-beta7で入ったBREAKING CHANGESについて解説します。
その変更はこちらのURLに記載されています。
https://github.com/vuejs/composition-api/releases/tag/v1.0.0-beta.7
<template>
内でRef型の変数がUnwrapされるのは、setup()で返したオブジェクトのroot level
に限るという内容です。どういうことか
composition apiのsetup()では、
<template>
内で扱いたいリアクティブな値をオブジェクトにまとめてreturn
します。return { loading: ref(true), hogeState: { loading: ref(true) } }この場合、
vue/composition-api@1.0.0-beta7
以前では、以下のように<template>
を書くことが出来ました。<span>{{ loading }}</span> <span>{{ hogeState.loading }}</span>
Ref<T>
であれば、本来は値を取り出すために.value
しなければいけないのですが、<template>
内であればUnwrapされてT
型の値が取り出せるのでスマートに書けるということでした。これが、
vue/composition-api@1.0.0-beta7
以降では、root level
しかUnwrapされなくなるので以下のように書かないといけません。<span>{{ loading }}</span> <span>{{ hogeState.loading.value }}</span>…明らかに書きたくない書き方になりましたね。
所感と対策
個人的にはこの変更はポジティブだと思っています。
そもそもネストした箇所に
Ref<T>
があるということは、setup()
内に複数のreactive
なStateがあるなどで、root level
にまとめることが難しかったりややこしいという状況だと思います。// あり得るとしたら、複数のhooksを使っているなどの理由で、同じ名前のRefが生えてしまって仕方なくネストしているとかでしょうか return { hogeState: { loading: ref(true) }, fugaState: { loading: ref(true) } }その場合、コンポーネントのサイズが大きすぎるでしょうから分割したり、それが難しければ以下のように名前を変更してstateを扱えば済むので、そのように工夫する方が設計的には嬉しいように思います。
const { loading: hogeLoading } = useHoge() const { loading: fugaLoading } = useFuga() return { hogeLoading, fugaLoading }個人的には1コンポーネント1Stateで済むように、useHogeのサイズ感を適宜インフラ層を用意するなどして工夫することが大事だと考えます。
まとめ
composition-apiを既に使っている方で、ネストしたオブジェクトにRef型の変数を入れていそうだなと思う方はなるべく早くアップデートして要チェックです。
そうでない方は、頭の片隅にでも入れておいていただければと思います!
よろしければTwitterのフォローお願いします!
https://twitter.com/Meijin_garden
- 投稿日:2020-09-13T16:29:03+09:00
Vue.js 準備段階
Vue.js
macでやっています。自分用手順メモ
1.フォルダを作ったら
置く場所:MAMPのhtdocs2.その後、ターミナルで
npm i
でインストール
→package.jsonに書かれたライブラリが自分のローカルにインストールされる。3.インストールされたら、ターミナルで
gulp
と入力すると
ブラウザにlocalhostが表示される。Babelとは?
package.jsonに入っている。
ES6(バージョンみたいなものだと思ってる)や、それ以上の次世代JavaScriptを
ES5に書き換えてくれるNode.js製のツールのこと。
こっちでES5に適した書き方にしなくても、勝手に変換をしてくれる。
全てのブラウザが最新のJavaScriptを理解できるわけではないので、
Babelを使ってES5に書き換える。参考
WindowsでVue.jsを触ることがあったら、この記事を参考にしよう
https://qiita.com/C_HERO/items/318fe65871f8e53e8c80
Node.jsとnpmについての話。わかりやすかった
https://qiita.com/lelouch99v/items/05f973df9c54cec23419
- 投稿日:2020-09-13T15:47:55+09:00
docker上のVue.jsのvue uiを使う
docker上にVue.jsのコンテナを立てたけど、
vue ui
を使いたくなった。
デフォだとlocalhostかつ8000で立ち上がる。オプションを指定するだけ
非常に簡単
vue ui
の後にいろいろオプションを足せる/usr/src/app$ vue ui -h Usage: ui [options] start and open the vue-cli ui Options: -H, --host <host> Host used for the UI server (default: localhost) -p, --port <port> Port used for the UI server (by default search for available port) -D, --dev Run in dev mode --quiet Don't output starting messages --headless Don't open browser on start and output port -h, --help output usage informationひとまず8080はdev用にのportとして置いていて、一応このデフォポートを使えるように8000もdocker-comose.ymlの時点で繋げた。
localhostだとdockerの外から見にいけないので、hostを
0.0.0.0
にして起動する。$ vue ui -H 0.0.0.0 ? Starting GUI... ? Ready on http://0.0.0.0:8000これでhttp://localhost:8000/を見に行くと表示されている。
-P, —port でportを8080のすればそれでもいける。
以上、備忘録。
- 投稿日:2020-09-13T14:37:10+09:00
Vueで行が選択可能なテーブルを作る
作るもの
<template> <table> <thead> <th> <label class="form-checkbox"> <input type="checkbox" v-model="isSelectAll" @click="select"> </label> </th> <th>ID</th> <th>ユーザー名</th> <th>画像</th> <th>作成日</th> </thead> <tbody> <tr v-for="user of users" :key="user.id"> <th> <input type="checkbox" :value="user" v-model="selected"> </th> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.image }}</td> <td>{{ user.date}}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { users: [ { id: 1, name: 'jhin', image: 'https://image.test.com', date: '2020/09/10' }, { id: 2, name: 'ahri', image: 'https://image.test.com', date: '2020/09/11' }, { id: 3, name: 'yasuo', image: 'https://image.test.com', date: '2020/09/12' }, ], selected: [], isSelectAll: false, }; }, methods: { select() { this.selected = []; if (!this.isSelectedAll) { for(let i in this.item) { this.selected.push(this.items[i].id); } } } }, }; </script>チェックボックスの
v-model
に配列を指定することがポイント。チェックが入ると
:value
で指定したuser
オブジェクトが配列のselected
に挿入されます。console.log(this.selected) /* チェックされたカラムの情報が配列に挿入される [ { id: 1, name: 'jhin', image: 'https://image.test.com', date: '2020/09/10' }, ], */非常に簡単。
- 投稿日:2020-09-13T11:21:59+09:00
ブラウザで画像圧縮してアップロード Vue.js
参考ページ
○ https://blog.capilano-fw.com/?p=3578
→サンプルコードそのままでも使える
× https://qiita.com/nobu17/items/64f51d43827424db4b6a
→調整が必要。高機能Vueの用意
参考ページの通り
Laravelのコントローラ
ファイル名の変更などはお好みで。
public function resize_ajax(Request $request) { if($request->has('images')) { foreach ($request->images as $key => $photo) { // $photo->store('images'); // storage/app/imagesフォルダに保存 $file_name = $photo->getClientOriginalName(); $photo->storeAs('images', $file_name); // storage/app/imagesフォルダに保存 } } return $request; }以上
formDataやaxiosの知識がないとつまずきましたが、
参考ページのとおりにやればできました。
- 投稿日:2020-09-13T10:37:54+09:00
【UI5】Vue.jsではじめるUI5 Web Components
はじめに
UI5 Web Componentsを学んでみようと思ったきっかけは、SAP Communityに投稿された以下の質問でした。
質問
最近S/4のプロジェクトに参画しましたが、評価の結果Fioriはあきらめることにしました。理由は遅すぎるからです。GUIと比べるとユーザの生産性が30%も落ちます。
SAPは当初GUIをUI5に置き換えようとしていたと記憶していますが、進捗はあまりよくないようです。
UI5の将来はどうなるのでしょうか?UI5のプロダクトオーナーは顧客のユースケースを知っているのでしょうか。UI5はVueみたいに軽くなるのでしょうか?回答1(抜粋)
SAP FioriはSAP S/4HANAやその他で一貫したユーザー体験を提供するためのデザインコンセプトです。別の側面は、どのUI技術を使ってこの体験を実装するかということです。SAPUI5とUI5 Web Components(Angular, React, Vueの上で動く)はよい選択肢です。
回答2(抜粋)
UI5の将来については、UI5をAngularJS, React and Vueで再利用できるwebcomponentsとして進化させるために多くの投資がすでに行われています。こちらをチェックしてみてください。https://sap.github.io/ui5-webcomponents/
興味深いのは、UI5のパフォーマンスが悪い件は否定せずに(※)「UI5 Web Componentsという選択肢もあるよ」と提示しているところです。私もUI5アプリを立ち上げたときに最初の描画までに時間がかかる印象は持っています。
では、代替案として提示されているUI5 Web Componentsとはどんなもので、どうやって使うのでしょうか?
この記事では、UI5 Web Componentsの概要紹介のあと、Vue.jsにUI5 Web Componentsを組み込んでみたいと思います。※もちろんUI5自体のパフォーマンス向上のため、UI5ライブラリにも色々な改善が行われています。例えば、レンダリング処理の改善や非同期に処理できる部分を増やすなど。
UI5 Web Componentsとは
Web Componentsとは、「WebページやWebアプリケーションの中で新たに、再利用可能でカプセル化された独自のHTMLタグを作成するためのWebプラットフォームのAPI」です。(Web Componentsとは何か?より引用)
UI5 Web ComponentsはWeb Componentsの考え方に基づき、Fiori Design Guidelinesに対応したUIエレメントを、フレームワークに関係なく使用することができるように開発されたものです。
たとえば以下のようなHTMLタグを書くだけで、FioriのDate Pikcerが配置できます。
<ui5-date-picker></ui5-date-picker>
フレームワークに依存しないので、Vue, Angular, Reactなどのフレームワークと一緒に使うことができます。
UI5 Web Componentsの良いところ
SAPUI5と比較してUI5 Web Componentsには以下のような良い点があります。
①パフォーマンスが良い
去年のUI5Conで、SAPUI5とReactベースのUI5 Web Componentsを比較したセッションがありました。Google Lighthouseでパフォーマンスの評価を行ったところ、SAPUI5が30に対してUI5 Web Componentsは95と、かなりの差をつけていました。
https://youtu.be/5gUHpN_0uGY?list=PLVf0R17F93RXT2tzhHzAr-iiYTmc9KngS&t=620②フレームワークに依存しない
UI5 Web ComponentsはVue, React, Angularなどの既存のフレームワークの中で使うことができるので、これらの技術をすでに知っている人にとっては学習コストが少なくて済みます。Fundamental Stylesとの違いは?
ここで思い出すのが、@monamonaさんが紹介されていたFundamental Stylesです。Fundamental Stylesも、Vue, React, AngularのアプリをSAP Fiori風のUIにしてくれるのでした。UI5 Web ComponentsとFundamental Stylesは何が違うのでしょうか?
こちらに私の聞きたいことが質問されていました。それによると、
Fundamentalsはスタイルシートと、そのCSSを使ってHTMLがどのように見えるべきかについての推奨事項のセットです。HTMLを書くのと、ユーザの操作に応じてHTMLを更新するのはあなたのタスクです。
一方、UI5 Web Componentsはデザインだけでなく構造と機能も新しいHTML要素にカプセル化されているので、他のHTML要素と同じように内部的な動作を意識せずに使うことができます。
つまり、UI5 Web Componentsは完全に機能するUIコントロールであり、通常のHTMLタグと同じように使うことができます。Fundamentalsはデザインにフォーカスしており、必要に応じた機能の実装はあなたにゆだねられています。つまり、
- Fundamental StylesはFioriらしい見た目にするためのスタイルシート
- Web Componentsは見た目と動作をカプセル化したHTML要素
ということのようです。
Vue.jsとUI5 Web ComponentsでHello World
UI5 Web Componentsには、Angular, React, Vueの簡単なチュートリアルが用意されています。私はどれもやったことがなかったので、一番簡単と思われたVueではじめることにしました。Vueに関しては以下の動画を見ただけです。
https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/ではさっそく、Vueのチュートリアルに沿ってUI5のボタンをHTMLぺージに表示させてみましょう。
1. Vue CLIをインストール
npm install -g @vue/cli2. プロジェクトの作成
vue create ui5-web-components-application cd ui5-web-components-application
npm run serve
を実行すると、ポート8080でアプリを表示することができます。
3. UI5 Web Componentsを追加する
npm install @ui5/webcomponents --save4. UI5 Web ComponentsをVue ignoredElementに追加する
main.jsに以下のコードを追加します。
Vue.config.ignoredElements = [/^ui5-/];5. 使用するコンポーネントをインポートする
App.vueのscriptタグの中に以下を追加しました。
import "@ui5/webcomponents/dist/Button"6. アプリケーションでインポートした要素を使用する
App.vueに
<ui5-button >Hello world!</ui5-button>
を追加します。<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <ui5-button >Hello world!</ui5-button> </div> </template>7. ボタンにアクションを追加する
このままだと押しても何も起こらないので、ボタンを押したときにダイアログが表示されるようにします。
7.1. ダイアログ用のコンポーネントをインポート
import "@ui5/webcomponents/dist/Dialog"7.2. テンプレートにダイアログを追加
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <ui5-button >Hello world!</ui5-button> <ui5-dialog id="hello-dialog" header-text="Welcome"> <p>Hello!</p> <div slot="footer" class="dialog-footer"> <div style="flex: 1;"></div> <ui5-button id="closeDialogButton" design="Emphasized" @click="onClose">OK</ui5-button> </div> </ui5-dialog> </div> </template>7.3. ボタンを押したときのアクションとダイアログを閉じるアクションを追加
<ui5-button @click="onButtonClick">Hello world!</ui5-button>export default { name: 'App', components: { HelloWorld }, data() { return { dialog: null } }, methods: { onButtonClick() { this.dialog = document.getElementById("hello-dialog") this.dialog.open() }, onClose() { this.dialog.close() } } }おわりに
以上、簡単でしたがVueでUI5 Web Componentsを使用してみました。HTML5とJavaScriptがわかれば比較的簡単に使えることがわかりました。
この先、ODataのバインディングや画面遷移をどうやるのか、オンプレS/4にデプロイできるのか、なども気になる点です。新しい発見があったらまた記事を書きます。参考