Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
日付と時刻をTで繋ぐ表記方法 - MEMO:はてな支店
日付と時刻を両方表現したい場合は2008-05-16T11:25:30+09:00 つまり日付と時刻をTでつなげる。 これが世界的スタンダードとしてISO8601とRFC3339に定められた日付と時刻の表現方法。 有名どころの言語やらデータベースその他ミドルウェアはすべてこれに沿った表記を解釈し入出力できるようになっている。 プログラマのみなさんは覚えておいて損はないというか絶対覚えておいたほうがいい。 日付がスラッシュ区切り（YYYY/MM/DD）だったりするソフトやらライブラリやらが巷に散見されるが、まったくおすすめできない。 http://neta.ywcafe.net/000851.html というわけで普段使っている言語でどの程度対応しているか調べてみた。 ISO8601とRFC3339があがってるけどW3CDTFも検索キーワードに入れた方が良さそう。 ちなみに、HTTP,SMT
Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
エンジニア向けチートシート集 - Qiita
はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい人 コードを書くテクニックを知りたい人 VsCodeチートシート はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。 VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカット
RedwoodJS を Ruby on Rails と比較してみる
RedwoodJS RedwoodJS は JavaScript/TypeScript で構築されたフルスタック Web アプリケーションフレームワークです。RedwoodJS プロジェクト自体は Tom Preston-Werner 氏 (GitHub 創設者であり Gravatar や Jekyll などの作成者) が中心となり始まりました。 私自身もつい最近になって同じ職場の @sakitoさんに存在を教えてもらったばかりです。 RedwoodJS は、READMEから抜粋するだけでも、次のような機能を持ちます。 フォーマット・ディレクトリ・ビルドなどに関するデフォルト構成 単一ファイルによるルーティング定義 GraphQL Client / API (with Serverless deploy) の構築 ページ・レイアウトなどのジェネレータ CRUD 操作に特化した Scaffo
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る
「iCARE Dev Meetup #18」�で発表した資料です https://icare.connpass.com/event/201662/
blograils.com - このウェブサイトは販売用です！ - blograils リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
mrubyをWebAssemblyで動かす（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Tom Black — Ruby on WebAssembly 原文公開日: 2018/04/28 著者: Tom Black 日本語タイトルは内容に即したものにしました。 要約: WebAssemblyがやってきました！やってみたい方は本記事のwasm gemをお試しください。 2018年の世界へようこそ。最も興奮を呼び起こすイノベーションがコンパイラ界隈にも巻き起こりつつあります。ARやVRや機械学習など先端を行く話題はいくつもありますが、ソースコードを機械が実際に理解できる形に変換する役割を担うコンパイラの歴史に比べればまだまだ新顔です。コンパイラの復権は主にLLVMのおかげです（LLVMはモジュール形式のコンパイラインフラストラクチャプロジェクトです）。LLVMの重要性については、Wiredの2013年の記事に的確な指摘が
Turbolinksをオフしないためにやった事 - Qiita
この記事は Turbolinks v2.2.0 時点のものです Turbolinks Classic is now deprecated Rails4系で使われていたTurbolinksはturbolinks-classicと命名が変更されました。 Rails5ではVersion 5 として turbolinks のversion ~> 5.0 が使われます。動作としては似てますが内部の実装が大きく変わっているので注意してください。 Turbolinksとは TurbolinksはRails4.0からデフォルトで導入されたgem railsアプリケーションを 簡単に pjaxっぽくすることが出来る。 ajaxとhistoryAPI(popState, pushState)を利用して画面遷移 Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する csrfトー
【Rails】【Turbolinks】ページを移動した時にJavascriptが起動しない | エビのテックブログ
今回はRails（4以降）で、Turbolinksが原因でjavascriptが動かない・起動しない現象について説明します。 結論から言うと、Turbolinksによってサイトの画面遷移が高速化する一方で、jsのDOMContentLoadedなどのイベントが発火しなくなるので、turbolinks:loadに変更すれば良いです。 このJSを document.addEventListener('DOMContentLoaded', function(){ 〜処理〜 }); 以下のように変更しましょう。 document.addEventListener('turbolinks:load', function(){ 〜処理〜 }); 目次 TurbolinksとはなにかJavaScriptへの影響と対処 1.Turbolinksとはなにか Turbolinksとは、以下の２つの機能を持った
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に最近ハマって
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. 入力をやめるとリダイレクトする 次記事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で地図を表示する無料で最短の道 - Qiita
How to load asset_pack_path images into .vue · Issue #1256 · rails/webpacker