Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化｜TechRacho by BPS株式会社
こんにちは、hachi8833です。新シリーズ「Vue.jsの使い方」では、BPS Webチームのakioさん作のVue.jsのサンプルコードを順次掲載いたします。公式サイトのサンプルコードが全体に散らばっていてちょっと探しにくかったので、やりたいこと別の最小限のサンプルが欲しくて作ったとのことです。 Vue.jsのドキュメントをひととおり読んだことがあり、すぐ動かせる最小限のサンプルコードを探している方を対象としています。また、Vue.jsをまだやったことのない方でも、このサンプルコードを動かしてみることでVue.jsでどんなことができるか雰囲気をつかみやすくなると思います。 Vue.jsそのものについて詳しくは、公式サイトの「Vue.js」あたりからご覧ください。 次の記事: 04: 双方向データバインディングを使ってみる 01. 手元で Hello, World してみるには？ 10
Vue.jsサンプルコード（39）画像の配置や背景をスライドバーで簡単に調整する｜TechRacho by BPS株式会社
前記事: 38. 入力をやめるとリダイレクトする 次記事: 40. 簡易漫画ビューアを作る 40. 画像の配置や背景をスライドバーで簡単に調整する Vue.jsバージョン: 2.5.2 画面をリロードすると最初に戻ります。 ポイント inputに割り当てた変数からtransformの書式を作るだけでできます。 const vm = new Vue({ el: "#app", data: {s: 1.0, x: 0, y: 0, a: 0, c: "#ADFF2F", b: 64}, computed: { transform: function() { return `scale(${this.s}) translate(${this.x}px, ${this.y}px) rotate(${this.a}deg)` }, }, }) 前記事: 38. 入力をやめるとリダイレクトする 次記事
Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門 - Qiita
はじめに この記事では Ruby on Rails と Vue.js を使って WEB アプリケーションを作成しながら、必要な技術について説明しています。 私自身は Rails を使う機会が多いのですが、Vue.js を勉強する目的で学んだことをまとめたものです。 そのため Rails は既に触ったことがあり、Vue.js を初めて使ってみたいという人に向けて入門となる情報です。 ここで紹介したコードはGitHubに公開しています。 またRuby on Rails, Vue.js によるモダン WEB アプリケーション 実践編 (その1)を執筆しているので、興味がありましたら合わせてご覧ください。 この記事で作成するアプリケーションについて この記事では以下の環境で動作することを確認しました。 Ruby on Rails: 5.2.2 (Rails: 6.0.0 でも確認済) Ruby:
Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた - Qiita
はじめに 業務で使っているわけではないのですが、個人的にコツコツVue.jsの勉強をしています。 今回は今まで勉強したことを整理する意味合いも兼ねて、チュートリアルのようなものを作成したいと思います。 見ていただいた方の参考になれば嬉しいです。 また、JavaScriptに関しては書き慣れていないので、もしもっと良い書き方などありましたらご意見いただけると幸いです。 なお、テストコードはまだ書けておりません。。。 次回の記事で各コンポーネントのユニットテストを書きたいと思っています。 2017/09/20 追記 試しに書いたテストコードの差分を、記事の最後に追記しました。 作るもの 簡単なTODOアプリです。 （どっかのサービスに似ていると言わないでください。。。） TODOの管理はRailsのAPIで実施します。 前提条件及び環境 Ruby、Rails、Node.jsの環境をご用意くださ
webpacker/webpack.md at master · rails/webpacker · GitHub
Configuration Webpacker gives you a default set of configuration files for test, development and production environments in config/webpack/*.js. You can configure each individual environment in their respective files or configure them all in the base config/webpack/environment.js file. By default, you don't need to make any changes to config/webpack/*.js files since it's all standard production-re
Yarn
超高速 Yarn はダウンロードしたパッケージをキャッシュするので、再ダウンロードは不要です。さらにリソースを最大限利用できるように処理を並列化するので、インストール時間はかつてないほど高速です。
Rails 5.2で Webpacker + Vue.jsを使ってSPAを実現 - Qiita
VueCLIでのSPAではなくRails内でVueを一部だけ利用するという方法をご紹介します。 VueJSのGetStartedが終了していてRailsのチュートリアルも終了している人が対象です。 概要説明 通常のSPAとどう違うのかという所だけ簡単に触れておきます。 一般的なSPAはgulpやgruntを使ってHTMLを生成してAJAXでサーバーサイドアプリケーションに連携するのが普通です。 デメリットとして下記のようなものがあげられます。 ✗ OAuth認証の場合には処理が複雑 ✗ サーバーサイドレンダリングで利用している共通のデザインなどの使い回しが面倒 ✗ 画像やその他リソースのキャッシュ対策が面倒 Railsの一部としてSPAを組み込む場合には上記のデメリットが解消する事とよりセキュアなアプリ開発が実現できます。 ○ OAuthなどの認証機能はRailsのものを流用できる ○ e
Vueのテンプレートでassetsのimageを使う（rails + webpacker） - 継続的ブログ
assets/images 下の画像をVueのtemplate内で使いたい。 erb内でなら image_tag で行けるが、digestついてるので単に <img src="assets/images/image.png" />とはできない。 解決法 調べたらいくつか方法はありそうだったが、webpackerのドキュメントを読むと、 config/webpacker.yml の resolved_paths を利用すればいいっぽい。 github.com Note: Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of whole parent directory if you just
Vue.jsとamCharts 4を使って地図を表示する - Qiita
はじめに この記事ではvue-cliがインストールされていることを前提に話を進めていきます。 各ライブラリのバージョンは下記の通りです。 vue-cli: 3.7.0 @amcharts/amcharts4: 4.4.6 @amcharts/amcharts4-geodata: 4.1.5 「amChartsVue.jsとamCharts 4を使って地図を表示する パート2」書きました。 パート2では地図の一部だけを表示・除外する方法を紹介しています。 amChartsとは？ いろんな種類のチャートとマップが使えるJavaScriptライブラリです。 詳しくは公式サイトのDemosを見てみてください。 The Productタブを覗いてみると amCharts 41つで地図を含むいろんなチャートを使えるようになります！ React, Angular, Vue, Ember等で動くように設計
From data to Viz | Find the graphic you need
From Data to Viz leads you to the most appropriate graph for your data. It links to the code to build it and lists common caveats you should avoid. What kind of data do you have? Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities. Alternatively, check the complete decision tree.
注意！IE11で使えない最新JavaScritコード（ES6）
さてさて、前回の記事、完全な手順！VueJSで自動ページ送りする方法では、ES6を使ってページ送り機能を実装してみましたが、その際ふと疑問に思ったことがありました。 それは、 インターネットエクスプローラー11（IE 11）だと、どんなES６の記述ができるんだろう？？ というものです。 IEといえば、当のマイクロソフトでさえedgeへの移行をすすめている、もはやレガシーなブラウザですが、未だに一定数以上のシェアを持っていることから、どうしても古いJavaScriptの書き方をせざるを得ないのが現状です。（BableとかはIEへの対応という意味合いが大きいですね） そこで！今回は、実際にIE11でES6の主要な書き方を実行し、うまくいくかどうかをひとつずつ検証してみます。（そして、せっかくなのでedgeでも検証してみました。） ぜひ開発の参考にしてみてください。 「ひさびさにVirtualB
JavaScript による動的スクリプティング - ウェブ開発の学習 | MDN
このモジュールを始めるにあたって、JavaScript の事前知識は必要ありませんが、このコースの前のモジュールを読み終えている必要があります。少なくとも HTML や CSS の基礎はやっておくべきです。 JavaScript とは MDN の初心者向け JavaScript コースへようこそ！この最初の記事では JavaScript を高い視点から見ていき、「それは何ですか？」「それで何ができますか？」などの質問に答え、 JavaScript の目的があなたに受け入れられるものであるかを確認します。 JavaScript の最初の一歩 これで JavaScript の理論や、 JavaScript で何ができるかを学んだと思いますが、完全に実践的なチュートリアルを通して、 JavaScript の基本的な機能を学ぶことができます。ここでは単純な「数字当てゲーム」を順を追って作っていきま
JavaScript とは - ウェブ開発の学習 | MDN
JavaScriptとは何か、そしてウェブサイトにどのように組み込まれるのか。 JavaScript でできること。 ウェブページに JavaScript を追加すること。 JavaScript でコメントを書く。 JavaScript はウェブページに複雑な機能を実装することを可能にするスクリプトまたはプログラミング言語です。ウェブページがただそこに座って静的な情報を表示する以上のことをする場合、タイムリーなコンテンツの更新、操作可能な地図、アニメーションする 2D/3D グラフィック、スクロールする動画ジュークボックスなどがある場合、 JavaScript が関わっていることは間違いないでしょう。 これはウェブ標準技術のレイヤーケーキの 3 層目であり、そのうちの 2 種類(HTMLとCSS)は学習領域の他の部分で詳しく述べました。 HTML はマークアップ言語で、これを使ってウェブコ
【Javascript】複数のチェックボックスの全選択・全解除 - Labyrinth of Wisdom
入力フォームでよくある、全選択・全解除のチェックボックスのサンプルです。 色んな方法がありますが、今回は<input>の属性nameが全て同じだった場合を記載しています。 参考ページに色んな方法が書いてあるので、状況に応じて使いこなしてみてください。 全て選択 TEST1 TEST2 TEST3 TEST4 <form name="form"> <label> <input type="checkbox" name="all" onClick="AllChecked();" />全て選択 </label> <p> <label> <input type="checkbox" name="test" value="TEST1" onClick="DisChecked();" />TEST1 </label> <label> <input type="checkbox" name="test"
チェックボックス全部を一括ON/OFFする機能を作る方法 - JavaScript TIPSふぁくとりー
《2017年6月9日 2:30 PM 公開/更新》 チェックボックス全部を一括ON/OFFする機能を作る方法 [入力フォーム] チェックボックスがたくさんある場合は、全部のチェックボックスを一括してON/OFFできる機能を用意しておくと便利です。チェックボックスのON/OFFを切り替えるには、checkedプロパティの値にtrueまたはfalseを格納するだけです。ループを使って一括処理させましょう。 チェックボックス全部を一括ON/OFFする機能が用意されていると便利 チェックボックス全部を一括ON/OFFする機能を作る方法 チェックボックス全部を一括ON/OFFする機能が用意されていると便利 フォーム内にたくさんのチェックボックスが存在する場合、そのすべてを一括してON/OFFできるボタンを用意しておくと便利な場合があります。 例えば、データの一覧を表示していて削除対象にチェックを入れ
複数のチェックボックスをjQueryで数える - まるでちょんまげハリウッド
jQueryを使って、チェックされているチェックボックスの数を数えるとき、 $(input :checked).length こいつを使って、チェックされてるかどうかがわかります。 でも、同じページ内で、ここのチェックボックスと、ここのチェックボックスは分けて数えたいんだよな、ということはありませんか？ 私には、ありました。 $(input :checked).length にすると、そのページ内の全部のinputタグでチェックされてるものを取得しちゃうので、 たとえば 辛い食べ物 で好きなもの カレー 唐辛子せんべえ 地獄ラーメン 甘い食べ物 で好きなもの チョコ アイス 宇治金時 というチェックがあるとして、 辛い食べ物、甘い食べ物で、分けようと思っても、分けられないんですよね・・・。 最初、「inputタグ」に、クラス名をつけて、「 :checked 」だけ数えようとしたけど、ダメで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Documentation
rails/webpacker
vue-svg-loaderを使って画像をcomponent化させる - Qiita
https://codeday.me/jp/qa/20190129/192491.html