フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)
株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの
ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ
こんにちは、レシピ事業部プロダクト開発グループの渡邉（@taso0096）です。 クックパッドは最近、One Experienceというプロジェクトによって日本版とグローバル版のシステムが統合されました。 どちらのシステムもRailsで実装されているという点は同じですが、統合先となったグローバル版ではHotwireが使われていました*1。そのため、One Experience関連の開発ではHotwireが積極的に活用されています。本記事ではそんなHotwireの多くの機能が使われたデスクトップ版のサイドバーについてご紹介します。 デスクトップ版で表示されるサイドバー ちょっと複雑なサイドバー One Experienceに伴い、グローバル版にもともと存在したUIのまま移行するのではなく、いくつか画面構成の変更を入れる事になりました。特にデスクトップ版においては、自分のコンテンツにより素早く
Remove TypeScript - laiso
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
Turbo 8 is dropping TypeScript
By all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not after giving it five years. So it's with great pleasure that I can announce we're dropping TypeScript from the next big release of Turbo 8. The fac
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
苦しんで覚えるwebpackerのバージョン更新
webpackerのバージョン更新作業 現代のWeb Applicationのviewを作成する場合はReact・Vue、Angular等のライブラリを利用する事例が増えたと思います。それらのライブラリを利用する場合はビルドツール、多くはデファクトスタンダードになっているwebpackを利用しているかと思います。 Railsも例外ではなく、Railsのversion 6からはRails用にwebpackをwrapしたwebpackerがデフォルトでinstallされるようになっています。 webpackerの導入事例はよく耳にしますが、その後の更新作業を耳にすることは少ないです。 Railsを利用するからにはRails Wayに乗ることが重要であり、そのためにはRailsアプリケーションを継続的に更新していく必要はあります。webpackerに関しても例外ではありません。 今回はv4.3.
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Rails 6: the missing developer setup guide - DEV Community 💻💻 原文公開日: 2019/11/19（最終更新: 2019/12/17） 著者: Vincent Voyer 日本語タイトルは内容に即したものにしました。画像はすべて元記事からの引用です。 原文の目次は省略しました。原文の乱れは訳文で修正してあります。以下のRailsガイドもどうぞ。 Webpacker の概要 - Railsガイド 更新履歴: 2019/11/28: 初版公開 2021/05/06: 更新 👋皆さんこんにちは。本記事では私がRubyやRuby on Railsを学んだ一環として、ドキュメントに書かれていないことを全部盛りしました。RubyやRailsのエコシステムは初めてなので、皆さまか
クライアント側のJavaScriptを最小限にするHotwire
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。株式会社iCAREの技術顧問である前島真一氏がHotwireについて話しました。全2回。前半はHotwireのアーキテクチャとTurbolinksについて。 HotwireはWebアプリケーションを作るための新しいアプローチ 前島真一氏：Hotwireについて話します。前島です。ハンドルネームはwillnetや、netwillnetです。iCAREさんをはじめとして、いろいろな会社で技術顧問をしています。空いた時間を使って、「savanna.io」というお仕事情報SNSを開発しています。savanna.ioは、これから話すHotwireを利用して作っています。 Hotwireがどんなものかを簡単に説明
Re: Rails を主戦場としている自分が今後学ぶべき技術について
この記事は、 Rails を主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれ についてのアンサー記事です。 うなすけ君が Ruby on Rails で育ってきたように、僕も JavaScript とともに育ってきたという自覚があります。なので、これについて書くことは、ポジショントークは避けられない、という感覚があります。 冷静に比較しようとも思いましたが、やっぱり開き直って思いっきりポジショントークをすることにしました。そっちのほうが面白いと思うので。 自分の基本的な主張は、こちらの記事にあるとおりです。 Frontend Study #1: 基調講演 - Frontend 領域を再定義する 自分と Ruby on Rails 僕は、キャリアとしては Rails の会社で JavaScript を書いてきたことが多かったです。学生の頃は socket.io
SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ
こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発
Rails5.1のwebpack実装、webpacker gem簡単解説 - Qiita
はじめに DHHがRails5.1にwebpackを取り入れる意向を示し、その実装としてwebpacker gemを提案しました。 まだ最低限の方針が示されただけで機能は全然足りてませんが（コミットチャンスですよ！！）、どんな実装になっているか軽く見てみました。 リポジトリ, PR webpacker gem: https://github.com/rails/webpacker PR to Rails: Basic --webpack delegation to new webpacker gem 内容 注： あくまで2017/1/18現在の話で、これから多くの変更が入ることになります webpackのラッパーになっている webpackを用いたJSアプリの素地を作ってくれる webpackのコマンドをrakeコマンドでラップしている rake越しにやりたくない人は、webpackを直に
Rails アプリでファイルアップロードに Dropzone.js を使う - Qiita
概要 Dropzone.js という JavaScript ライブラリがクールだったので、これを Rails アプリケーションで利用する方法をご紹介します。 Dropzone.js について ドラッグ & ドロップによるファイルアップロード機能を提供する JavaScript ライブラリです。通信は Ajax で行われます。 この形式は PC 向けの Web アプリケーションでは結構見かけると思います。この Qiita でも使われていますね。 Dropzone.js 見た目は以下のとおりです。なお、デフォルトでは外枠は実線ですが、公式サイトのデモに合わせて CSS で破線にしています。 ここにファイルをドラッグ & ドロップするとこのようになります。プレビューとして、画像ファイルはサムネイルが表示され、ドキュメントファイルはファイルサイズやファイル名などの情報が表示されます。 また、画像フ
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
React on Railsの基本理念
原文: The React on Rails Doctrine ジャスティン・ゴードン(2016年1月24日) このドキュメントはRailsの基本理念(訳注: 日本語版)に対する拡張と補足です。まだそのドキュメントを読んでいない場合、先にそちらを読むことをお勧めします。 React on RailsのREADMEの中で述べているように、このプロジェクトの目的は、Ruby on RailsとモダンなJavaScriptのツールやライブラリを統合するための、強固で最適なフレームワークを提供することです。react_on_railsに何をいれるべきかを考えるとき、その機能が RailsとモダンなJavaScriptとの共通部分と関連があるかどうかを自問します。RailsのビューとReactコンポーネントを統合するためのビューヘルパーがよい例です。答えがイエスである場合、その機能はここにあるべきで
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
フロントエンド開発における革命とビルドプロセスについて - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、freeeでフロントエンドエンジニアをしている @joe_re です。 freee Engineers Advent Calendar 2015の4日目を書きます。 僕からはfreeeで現在進行中の革命について、フロントエンドのビルドプロセスを中心に書こうと思います。 革命 ってなんのこと？ というのはフロントエンドヤンキーこと @ymrl が 2日目で書いたので詳しくはそちらをご参照頂ければ幸いです。 背景 弊社ではRuby on Railsを主軸にしてWebサービスを作っています。 Railsは素晴らしいフレームワークで
Railsで昨今のJSのエコシステム(gulpとかそういうの)を使うにあたってこのようにしたというメモ - Qiita
ちょっと前に触ったサービスでRailsサービスでgulpとかbrowserifyとかそのあたりのモダンなJSツールを使いたくて、こんな感じにやってみたというメモです。 おおまかにいうと、gulpでビルドしたものを、asset pipelineに通すというだけ。 こんなことを考えていた 最初はsprocketsをいっそのこと外してしまおうかと思ったんだけど、そのサービスはasset_syncというassetをS3にあげるgem使ってたのと、digestまわりとかあって、それらは解決できなくはないけど、めんどくせえからそこはsprocketsに任せてもいいやと思ったので、結局外しませんでした。 また、JSまわりのツールsprocketsと連携してたりするgemがあったりするんですが、JSまわりツールのバージョンアップの早さにgemがついていけてないと感じたので、我慢して古いバージョン使うのが嫌
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 7のJavaScriptとの統合は素晴らしい - Hotwire、import maps、バンドラーとの統合、APIサーバー
