You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています(参考記事『Google社内の標準言語としてTypeScriptが承認される - Publickey』)。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules(ES Modules = importやexport文のこと)をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
はじめに フロントエンドへスプラトゥーンを決めるために、Rails プロジェクト内で JavaScript を楽に良い感じに分離する方法を考えてみました。 先人たちが様々な方法を提示してくださっていましたが、設定が大掛かりだったり、何種類かのツールを活用したりと、自分にはどうもハードルが高かったため、より簡単な方法を模索しました。 TL;DR Initial commit で、この記事でこれから行う設定をコミットしています。 necojackarc-sandbox/rails_with_webpack 特徴 Sprockets の良い所はそのまま活用 導入ツールは実質 WebPack のみ 設定項目が少なく簡単 おそらくほぼメンテナンスフリー 概要 以下のような流れで、JavaScript のコーディング、ビルド、配信を行います。 frontendディレクトリ以下で JavaScript
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう!、さらば! farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
先に言っておくと、IE11は死ぬ。 何がしたいか 前提として、現代では ES Modules を除けばほとんどのモダンブラウザ(IE11を除く)でES2015は実装が終わりつつあり、IE11のような特定の環境を除けばほんのすこしの変換でES201xのコードが動く。うまくやれば、コンパイル時間もbabelの起動時間も短縮できる。何度も言うがIE11は死ぬ。 それと、先週リリースされたChrome55でasync/awaitがデフォルトで有効になった。これで何ができるかというと、babel で async/await をコンパイルすると、CPS変換で巨大なスイッチ文に変換してとにかくコードが読みづらいという問題があって、それをネイティブの機能を使うことで解決できる。(ソースマップもよくわからんところに吹っ飛んで使えなかった) このアプローチを試みた際の問題 browserify/webpack
はじめに みなさんにdisられて久しいsprockets氏ですが、メリットはそのままこれまでの問題を解決してくれるsprockets-commonerという素晴らしいgemを見つけたので紹介します。 sprockets-commonerとは sprockets-commonerとは、Railsコミッターも在籍するShopifyで作られたsprocketsの拡張gemです。 このgemの機能の中でも特に嬉しいのは以下の2つの機能です。 1. node.js/ESnextでフロントエンドを書けるようになる sprockets-commonerを入れると、sprockets管理下のJSファイルをbabelでトランスパイルしてくれるようになります。 そのため、node.js/ESnextでフロントエンドを書けるようになります。 一応、sprockets次バージョンの4でもESnextは書けるように
こんにちは!12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい! フロントエンドのライブラリ管理にnpmを使いたい! で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました) 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く