Vue.jsを使いつつ、OpenStreetMapを表示する - Qiita
iOS専門で色々やってたはずが、万屋になってきた私です。 おはこんばんちわ。 直近で、Webサイト上で地図を表示して、選択したポイントの緯度経度を取得したいことがあったのですが、G【自主規制】を使うにも金がないので、OpenStreetMapを試しに使ってみることにした次第です。 OpenStreetMapとは OpenStreetMapとは、自由に利用できて、編集機能のある世界地図を作る共同プロジェクトです。 イメージ的には、Wikipediaの地図版がOpenStreetMapです。(以下、OSMと略) プロジェクト自体は、英国で2004年から始まり、日本では2008年から活動が始まっているようです。 現状、日本国内での普及はまだまだではありますが、世界的にみると発症のヨーロッパエリアに限って言えば、商用地図にも負けないほど内容が充実しているらしいです。 日本エリアの地図ですが、Goo
RailsアプリにVue.jsを導入してみた(Vue.jsでRailsのDBを受け取る) - Qiita
最近Vue.jsを勉強しはじめて、 なんとかRuby on Railsで書いた既存アプリのフロント周りをなんとかVue.jsで書き直してみたので自分用メモとして残しておきます。 今回の目標 画像のようにECサイト上でジャンル一覧から任意のジャンルをクリックすると、 RailsのDBから呼び出されたジャンルごとのアーティストが描画されるようにする！ 概要 どうやってこれを実装するのか RailsのデータベースをVue.jsで受け取るにはそのまま変数で渡すことはもちろん出来ません。 なので、RailsでAPIを作ってaxiosのgetメソッドでそこを叩いてVue側で受け取ることで繋がります。 まずVue.jsの導入 今回は既存のRailsアプリに後からVueを入れるやり方です。 Gemfileに
Docker + Rails6 + Vue の開発環境を建てる - Qiita
ほしいTodoアプリがない 自分の欲しいTodo機能をもったアプリが無い。 Todoistや、 Trello、 Microsoft Todoに、 sublimetext3のプラグインであるplaintasksなど、 世の中にはtodoを管理するアプリ・サービスが数あれど、 自分が欲しいtodo機能をもったアプリは存在してない。 ならば仕方ない。 「なければ作ればいいじゃない」だ。 ということで、Todoアプリを作ることにした。 ということで、今回は - Docker - Ruby 2.5.3 - Rails6 - MySQL - Vue の構成で開発することにした。 単にtodoアプリならば、 C# + ザマリンとかもありだし、 kotlinも面白そうだし、 DjangoやFlaskでもよかったのだが、 Railsの開発から離れて期間が経っているからリハビリしたいし、 vueに最近ハマって
GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
Webpacker has served the Rails community for over five years as a bridge to compiled and bundled JavaScript. This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity. For applications currently using Webpacker, th
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:
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
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
Rails と Vue.js の設計覚書 - Qiita
はじめに これは Rails の View と Vue を馴染ませるための設計指針になります。 Rails 5.1 で webpack や Vue が公式サポートされました。SPA の場合はあまり気になりませんが、スタンダードな Rails 構成に Vue を適用する場合は、Rails の View と Vue をどのように管理すべきか悩むことになると思います。本記事にはその対処例をまとめています。 環境 Rails 5.1+ Turbolinks 5.0+ webpack 2.0+ Vue 2.0+ Vuex 2.0+ 参考 【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita Rails と Vue の導入に関しては、こちらが参考になります。 この内容を踏まえた上で、その先の設計周りについて考察していきます。
webpackチートシート - Qiita
フロントまわりのツールは群雄割拠してる感がすごくて手を出せずにいたのですが、Rails5.1 で gem webpacker が導入されたこともあってwebpack/yarn構成に魅力を感じています。 今どきのモジュール/パッケージ管理したいので、まずはwebpackです。 概要 webpack = JavaScriptファイルのバンドラ モジュール単位に分離されたjsファイルをひとつのjsファイルにまとめる(バンドルする) 結合の過程で、jsファイルの依存関係を解決する CommonJS, AMD, ES6 Moduleなど復数のモジュールシステムに対応する 競合はrequire.js(依存解決), browserify(バンドル)など オープンソース, MITライセンス 導入 npmでインストールする。 プロダクション環境ではバンドルした状態で配置するわけなので、開発環境のみを指定する
ECMAScript2015(es6)の基本的な開発環境 - Qiita
サンプル JS側でCSVファイルを読み込んで、その内容を描画するサンプルを用意。 具体的には、csvファイルの1列目を読み込みtextareaに表示するサンプル。データがURL形式(http/https)かどうかチェックし、読み込む行数はtextareaのmaxlengthで指定された値に制限する。 コード 以下のファイルはすべて開発環境のルートディレクトリに配置する。 JSのコードについては、可能な限りES6で追加されているシンタックス（こちらを参考にした）を利用した。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのES6</title> </head> <body> <div style="margin: 20px" class="js-csv-read"> <div style="
webpack module bundler
Getting started by reading the documentation, which also contains an introduction and a tutorial.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で地図を表示する無料で最短の道 - Qiita
webpack初心者がJavaScriptをビルドするまでの手順 - Qiita