Screenreaders please follow this link This website needs Javascript to function. No attempts have been made to support older webbrowsers like Internet explorer and Edge 15. I recommend: Firefox
Ferro - No more Html with Opal-Ferro
Screenreaders please follow this link This website needs Javascript to function. No attempts have been made to support older webbrowsers like Internet explorer and Edge 15. I recommend: Firefox
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
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
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
「Javaの方針転換」リスクに関する考察 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「Java捨ててC#にでも振ったほうがいいのかなあ」 なんて聞かれ、 「nodeとかあるしJSのがまだマシじゃないすかね、というかOracleから逃げた結果がMS行きってどうなんすか」 とか答えたあと、もう少し考えてみたほうが良さそうだなあ、と思ったので考えてみる。 なお、筆者は諸事情でこれまでJava仕事が多かった人種ではあるものの、基本的にJava嫌いかつOracle嫌い1であるため、考察には強いバイアスが掛かっている可能性が高いことを申し添える。 TL; DR 「Javaは捨てたほうがいいんじゃないのか」という発想は間違っていない
【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 Rails 5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより 公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました（せめてファイル名の頭に番号でも振ってくれれば...）。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要 ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。 上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ
新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳）｜TechRacho by BPS株式会社
新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳） 新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳） 新しいRailsフロントエンド開発（3）Webpackの詳細、ActionCableの実装とHerokuへのデプロイ（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Evil Front Part 2: Modern Front-end in Rails 原文公開日: 2017/12/12 著者: Andy Barnov、Alexey Plutalov サイト: Evil Martians 前書き 本記事は、フロントエンドのフレームワークに依存しないRailsプレゼンテーションロジックを現代的かつモジュール単位かつコンポーネントベースで扱う方法を独断に基いて解説するガイドです。3部構成のチュ
フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する - Qiita
「俺の最近のRailsのJS開発環境」 for フロントエンドエンジニア TL;DR 「片手間のJS」ならhogehoge-railsで大丈夫（e.g. browserify-rails, sass-rails, etc.） 「本気でJS書く」ならsprocketsから切り離す（e.g. SPA, etc.） 迷えるフロントエンドエンジニアに愛の手を ※ 個人の見解です はじめに 本記事の内容は個人の見解であり、所属する組織の公式見解ではありません． 本職は学生，片手間にRailsエンジニア，そのさらに片手間に過激派フロントエンドエンジニアやってる人間の戯言です． 『俺の最近のRailsのJS開発環境を教えてやる』を受けて，フロントエンドエンジニアの視点から見たRailsのJS環境を考察してみた記事になります． 元記事をdisっているわけではなく，むしろリスペクトしたうえで視点を変えてみた
React.jsチュートリアルをReact.rbで書いてみる - Qiita
ということでいつものシリーズです。今回はちょっと異色かも。 React.rb って何？ Opal を知っていますか？ Ruby を JavaScript にコンパイルしてくれるコンパイラです。Opal を使えば JavaScript のアレとかコレとかそういったことにイライラすることはなく、Ruby でさくっと JavaScript を実装できます。Rails や Sinatra にも対応しているので安心です。 そんな Opal 上で動く 100% pure Ruby な React.js の実装が React.rb です。ええ、パクリです。Web サイトもドキュメントも全てパクリです。オリジナルの React.js のサイトやドキュメントが CC BY 4.0 という原作の著作権表示さえしていればパクってもいいっていうライセンスなので、本当にパクっています。サイトデザインだけではなく、H
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 の導入に関しては、こちらが参考になります。 この内容を踏まえた上で、その先の設計周りについて考察していきます。
Atomに静的コード解析を導入する手順 - Qiita
概要 AtomにはLinterとatom-lintの2つの静的コード解析用パッケージがある。 導入自体はatom-lintの方が簡単だが、個人的にLinterの方が動作が望ましかったので、ここではLinterを導入する手順についてまとめる。 （コミュニティ自体はどちらも活発だと思うので、好きな方を導入すればよい） 手順 ここでは、例としてRuby/SCSS/CoffeeScriptのLinterを導入する。 他言語についても手順は同様。 Linterのインストール 各言語用のLinter用プラグインのインストール 各言語用の静的コード解析ライブラリのインストール 静的コード解析ライブラリのパスの設定 1. Linterのインストール AtomのSettingsから「linter」と検索すれば簡単にインストールできる。 https://atom.io/packages/linter 2. L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
rails/webpacker
Opalを使ったRailsアプリケーションを作った時に自動生成されるサンプルコードを動かしてみる - Qiita
Rails 5 で Opal を使う - Qiita