Rails:Stimulusの初期ファイル構成について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 記事を書いた理由 Stimulus-Sortableを利用してドラックアンドドロップを実装したのですが、その時Stimulusのファイル構成がどんな感じになっているかわからなかったので、その備忘録です 環境 Rails 8 Ruby 3.3.6 stimulusとは何か Javascriptのフレームワークです CSSにおけるBootstrap、RubyにおけるRuby on Railsと同じです 何ができるのか HTML要素にデータ属性を追加して、JavaScriptのコントローラーと関連づけ、HTML要素を良い感じに操作できます そ
Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに
Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。 Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7 — Ruby on Rails (@rails) December 15, 2021 Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。 Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパ
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
Vanilla JSのメリット フレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。 それは動作が速いことです。 今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。 どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。 この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。 仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ
ES2019で追加されたflatMap()の使いどころ - Qiita
はじめに ES2019のアップデートで配列のメソッドflatMap()が追加されました。 はじめてflatMap()を見たときは「これはどんなときに使うのだろう」と思いました。 私のようにflatMap()をいつ使うのかピンと来ていない方も多いと思います。 しかし調べていくうちに色々使える事がわかったので、flatMap()の使いどころをご紹介します。 flat()とは まず事前知識として同じくES2019で追加されたflat()について説明します。 flat()は配列のメソッドで、自身の配列の次元を1つ下げたものを返します。 const example1 = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; example1.flat(); // 実行結果：[1, 2, 3, 4, 5, 6, 7, 8, 9] const example2 = [ 1, 2,
「WebExtensionsとテスト」というお話をしてきました | Folioscope
先日、WebExtensions Meetup #3 が開催され、そこで「WebExtensions とテスト」というお話をしてきました。 この発表では、 WebExtensions のテストの方法と、Vim Vixen が取り組んでいることについてお話しました。 WebExtensions とテスト - Speaker Deck この記事では発表資料をかいつまんで、より詳しく説明してゆきたいとおもいます。 それでははじまりはじまり〜。 はじめに まずは自己紹介。 WebExtensions 歴は 1 年ちょいです。 メインで開発してる WebExtensions は「Vim Vixen」です。 Vim Vixen の開発をスタートしたきっかけは、XUL 製だった Vimperator が使えなくなったからです。 開発を始めて 1 年が経ち、現在はユーザー数も 10,000 を超えるほどに
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
「Node.js 10.0」リリース、3年間のサポートが提供される新安定版 | OSDN Magazine
Node.js Foundationは4月24日、Node.jsの最新安定板となる「Node.js 10.0.0」を発表した。V8非依存のモジュールAPIを目指すN-APIの完全対応など多数の機能が加わっている。 Node.jsはJavaScript実行エンジンおよびライブラリ集。GoogleのJavaScriptエンジン「V8」をコアとして採用し、イベント駆動型のライブラリを提供する。米Joyentで開発された技術で、2015年よりNode.js Foundationでオープンソースプロジェクトとして開発が進められている。 Node.js 10.0はNode.js Foundationの誕生から7回目のメジャーリリースとなる。10月にはActive Long Term Support（長期サポート）ブランチとなる予定で、合計3年間サポートされる。 本バージョンでは、N-API（Node.
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
「CoffeeScript 2.0」リリース、最新ECMAScriptとの互換性を強化 | OSDN Magazine
プログラミング言語CoffeeScript開発チームは9月17日、最新版「CoffeeScript 2.0.0」をリリースした。ECMAScript（ES） 2015以降との互換性強化を中心とした機能強化が加わっている。 CoffeeScriptはJavaScriptをベースに拡張を加えたプログラミング言語。JavaScriptにコンパイルして利用できる。変換されたコードは読みやすく、JavaScriptと同等もしくはより高速に動くという。ライセンスはMIT License。 CoffeeScript 2.0は2010年に公開されたバージョン1.0に続く最新版。ES6またはES2015以降のJavaScriptへの対応を進めた。これらのモダンなJavaScriptシンタックスにコードを変換できるようになり、classキーワードを使ったクラス定義などを含むコードを出力できるようになった。 ま
確定ボタンを押す前に、すでにあなたの個人情報は抜かれている
確定ボタンを押す前に、すでにあなたの個人情報は抜かれている2017.06.27 20:175,683 Doga お前はもう…死んでいるっ！ と言われてもおかしくないような事実が発覚しました。寝る前にこの記事を読んでいる人は要注意。そわそわして眠れなくなるかもしれないから。 アメリカでは｢家を買おうかなぁ｣とか、｢今の家のローンの支払いを少なくした方がいいかなぁ｣なんて思っているときにQuicken Loansの｢mortgage calculator（ローン計算ツール）｣を使っている人は多いですよね。 そのたびにサイトでは｢手元に今いくら貯蓄があって｣、｢家の価値が今いくらほどなのか｣、｢あとどれくらいでそのローンを払い終えられるのか｣みたいな質問をカジュアルに投げかけてくるわけです。まぁそうやってQuickenはもしあなたがローンをすると、月に具体的にどれくらいの金額を彼らに負うことにな
出来る限り短く説明するReactJS入門 - Qiita
VTeacher 所属の Masaki Suzuki です。 ※各項目をできるだけ3行以内にまとめています デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。 「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。 React.jsとは React.jsはUIのパーツ（構成部品）を作るためのライブラリです。 FacebookがOSSとして公開しています。 初回投稿日：2015年06月21日 この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。 最新情報はこちら React Server Components 2021年からReactを始めるなら React Server Components 一択ではないか？ https://zenn.dev/rgbkids/articles/e58ef9b947b199
「JavaScript」を「ジャバスク」と略す人達 - Adventure
- はじめに - 世の中には少数派ではあるが「JavaScript」を「ジャバスク」と略す人達が居る。 今回記事を書くきっかけになったのはこちら 会社の同期が社内LTで「JavaScript」を「ジャバスク」と略したところ、一悶着あった後「ジャバスクの人」として認知された話は後世にも語り継いでいきたい。— ばんくし (@vaaaaanquish) 2017年2月12日 こちらをツイートした所、ジャバスクに関する知見が少し集まったので記事として残しておこうというもの。 - ジャバスクとは - ジャバスクとは、プログラミング言語であるJavaScriptの略称である。 JavaScriptは一般的に「ジェーエス」と略されるか、「ジャバスクリプト」と呼ばれる事が多いと思われる。 しかし、一部「ジャバスク」と呼ぶ層が居る。 その事実は「HTML5プロフェッショナル認定試験公式サイト」における「HT
Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと
Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと ベルギーのヘントで行われたAngularのイベント「NG-BE 2016」で、基調講演に登壇したGoogleのAngularチームリードIgor Minar氏は、Angularの次のメジャーバージョンアップが2017年3月に登場する「Angular 4」であることを明らかにしました。 「私たちはAngular 4を2017年3月にリリースする予定だ。本当に本当だよ（I'm being super honest with you guys!）。わけわからんなんて言わないで、大丈夫だって！（Don't freak out. It's going to be good）」（Igor Minar氏） Angular 4はAngular 2と互換性を維持し、そのまま移行できる
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
sprockets + rails-assetsを卒業して、npm + webpackへ移行 - ただのにっき(2016-05-19)
■ sprockets + rails-assetsを卒業して、npm + webpackへ移行 1年少々前、Webアプリのフロントエンド開発環境として暫定的にRails Assetsを使うことにしたのだけど、あれからjs界隈もしだいに落ち着いてきて*1、いろいろと勝ち組っぽいツールが決まってきた気がする。 そんなわけで、徐々にそっち方向へ移行してこうかな、と。とくにRails Assetsはサービス自体が終了の方向らしいので、まずはそのへんから。jsのパッケージマネージャとタスクランナーの勝ち組として、おれの観測範囲でみえてる感じだと: パッケージはpackage.jsonをnpmで管理するのが一番シンプル タスクランナーもnpmでいいよもう……という流れが強そう AltJSは使わずにES2015、ビルドにはWebpackとBabelの組み合わせ ってところか? 少し前に話題になった「1
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
GitHub、npmを買収 | スラド デベロッパー
Microsoft、JavaScriptエンジン「ChakraCore」のソースコードを公開
https://www.ossnews.jp/oss_info/article.html?oid=6404
