Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK） create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。 いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄 よってこれからはNowとは言わずVercelと呼ぶことにします。 最近刀剣乱舞（ゲームの方）に復帰したんですけど、 イラスト回収状況がゲーム内で分からなすぎたのでメモ帳を作りました。 この時点はCodesandboxでVueテンプレートから作ってました。 周回しながら捏ねてたらイメージが固まったので、このままデプロイしてもよかったんだけど、ローカルで作り込みたかったのでNuxt.jsに移植した。 それをVercelでデプロイしたのがこちら。 状況の算出とかはふいんきでやっつけたから間違ってる
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回は、一番最初のInstallationです。 はじめに 互換性の注意 最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。 Vue.js uses ECMAScript 5 features that are un-shimmable in IE8 ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プ
こんにちは。さかいです。 Google Analyticsのタグを設定する際に、HTMLのヘッダーにタグを仕込めばいいかなぁと思っていたのですが、Single Page Application(以下 SPA)かぁ。 あれっ！？最初にページを読み込んだ後ってページ遷移しなくない！？その時のページビューって、正しく計測できるの！？… などの疑問が生まれましたので、実際に設定してみようと思います。 やってみること Vue.jsで構築したSPAで、 ページビュー数 イベント(クリックイベント） を測定する。 事前準備 Google Analyticsで測定するには、トラッキングIDが必要ですので、Googleアカウントにて取得・設定しておいてください。 利用ライブラリについて ウェブサイトで測定するには、gtag.jsまたはanalytics.jsが利用できそうです。 また、Vue.jsからGoo
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
Lessons by WebAssembly app in production on CDN Edge Computing Service
ユニットテストの書き方メモ。 サンプルコードのテストランナーはJestです。 jest.config.js ルートにおいとけばとりあえず動くと思うコンフィグ。 testEnviromentはjest-environment-jsdom-global、 アセットのスタブにjest-transform-stubを利用する。 const path = require('path'); module.exports = { verbose: false, // 実行中に各テストを報告するかどうか testPathIgnorePatterns: [ '/node_modules/' ], moduleFileExtensions: ['json', 'js', 'vue'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-je
![[Vue/Nuxt] Vue Test Utils の コードスニペット集](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fs0.wp.com%2Fi%2Fblank.jpg)
[Vue] ページネーション機能の作り方とコンポーネント作成入門 からの続き。 続きなので前の記事で作ったやつがないとできません！ 引き続きCodeSandboxでやります。 ローカルに環境作った方はそちらでどうぞ。 CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきました？ これ、テストを実行して結果を表示してくれる便利機能です。 今回はこの機能を使えるようにします！ 【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません インストール Vueのテストには 公式の Vue Test Utils を使います。 テストランナーはJestを使います。 Add Dependency ボタンを押すとインストール用のモーダルが出るので、 必要なものを検索してDependenciesに追加します。 @vue/test-utils vue-te
![[Vue.js] ページネーション機能の作り方（弐）コンポーネントのテスト作成入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b190f87c3235eebeeba6810e4a69fa67f181295/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2019%2F03%2Fvue-patination-tutorial2-1.png)
Vue のプラグインを作成する方法なんですが、 「install メソッドを持つオブジェクトを定義する」 ただこれだけなんです。 定義したプラグインはご存知のとおり、Vue.use メソッドで使用します。 Vue.use メソッドを使ってプラグインを使用すると、プラグインのinstall メソッドが呼ばれるって感じです。 install メソッドの第一引数は Vue コンストラクタ、第二引数はオプションのオブジェクトになります。 一番簡単なプラグインの例はこんな感じ。 const MyPlugin = { install(Vue, options) { console.log(`${options.hello}${options.world}!`) } } Vue.use(MyPlugin, { hello: 'こんにちは', world: '世界' }) // こんにちは世界! プラグイ
[PHP] ページング機能の仕組みとか作り方とか が今年で10周年！ 今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。 2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの？という視点でまとめてみました。 環境構築は面倒くさいのでCodeSandbox使います！ なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。 ※以下ソースすべてES5以上の構文多用してます。 ドキュメントへのリンクを貼ってますので詳細はそちらを確認してください。 CodeSandboxにGithubアカウント（なかったら作る）でログインしたら、 ダッシュボードでCreate Sandboxを選択して、フォーク元になるVue.jsのサンドボックスを
![[Vue.js] ページネーション機能の作り方とコンポーネント作成入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe002d6b0c5185378b2650858f1994a9fb507b0b/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2019%2F03%2Fvue-pagination-tutorial3.png)
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
