若手エンジニアの俺がフロントエンドのビルドを早くしてReactも導入しちゃった話 - SMARTCAMP Engineer Blog
またオレ何かやっちゃいました？ こんにちは！！！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドともに様々な技術的負債となる部分を抱えています。 また、その負債の中には普段の業務時間では手をつけにくいものもあるため、定期的に薪入れと呼ばれる開発改善日を設けています。 先月行われた薪入れはいつもよりも長い1週間の期間が設定されており、今回の記事ではその中で私が行ったフロントエンド改善の内容や、そこに至った経緯について説明します。 やったこと ビルドフロントの短縮 Reactの試験導入 BOXILのフロントエンドについて 現在のフロントエンドを改善するに至った経緯とその背景 フロントエンド負債の認識のすり合わせ 負債を話し合う会の開催 理想を話し合
Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets 原文公開日: 2019/12/13 著者: Younes SERRAJ サイト: CapSens -- フランスのFinTech系Web開発会社です タイトルは内容に即したものにしました。画像は元記事からの引用です。 2020/01/16: 初版公開 2021/05/13: 更新 皆さんはアセットやJavaScript周りの変更で消耗してませんか？npm、Babel、ES6、Yarn、Webpack、Webpacker、Sprockets、これらのどこがどう違うのかさっぱりわからなかったりしますか？ Rails 6アプリケーションでJavaScriptエコシステム全体がどのように機能しているかという
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のエコシステムは初めてなので、皆さまか
Rails: webpack(er)に乗り換える25の理由（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 25 reasons to switch to Webpack(er) - rossta.net 原文公開日: 2020/03/02 著者: I'm Ross Kaffenberger サイト: rossta.net webpack/Webpackerで使える有用なツールも本記事で多数紹介されています。 画像は元記事からの引用です。 最近こんなことをよく聞かれます。「webpackとかWebpackerで頑張る価値ってあるの？」 よい質問だと思います。そして私の短い回答は「イエス」です。 近年JavaScriptコミュニティにおける認知度が急上昇していることで、フロントエンド開発用のツール、開発エクスペリエンス、最適化に巨大なイノベーションが続いています。 Railsはかつて最前線に躍り出ていました。登場した当時のRailsアセッ
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
Webpacker v4で同一CSSなのにfingerprintが変わってしまう問題に対処する - Qiita
発生していた問題 Webpacker 4.0.2を使ったRailsアプリケーションを本番環境にデプロイすると、CSSやJSの内容を変更していないのに毎回fingerprintの値（application-a72ac9c7.cssのa72ac9c7の部分）が変わってしまう。 fingerprintがデプロイのたびに変わると、ブラウザのキャッシュ効率が悪くなるという問題が発生するが、それ以上に複数台のサーバーにデプロイするときにCSSのファイル名が一致しない問題の方が深刻だった。 なぜファイル名が一致しないのかというと、デプロイのたびにファイル名が変わるので、複数台のサーバーにデプロイしたときにもサーバーごとにファイル名が異なってしまうから。 アクセスしたタイミングによって参照するCSSファイル名が異なるため、CSSファイルの404エラーが発生し、画面の表示が崩れてしまうという問題が起きていた
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
webpack@4 で出力するファイルをリビジョン管理する - 30歳からのプログラミング
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値（リビジョン）を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回避できる。 手動でファイル名を更新することも可能ではあるが、ビルドの際に自動的に付与されるようにするのが一般的。 ここでは、webpackのv4でリビジョンを付与する方法を書いていく。 この記事で出てくるライブラリについては以下のバージョンで動作確認している。 webpack@4.23.1 webpack-cli@3.1.2 html-webpack-plugin@3.2.0 css-loader@1.0.1 mini-css-extract-plugin@0.4.4 clean-webpack-plugin@0.1.19 出力するファイルにハ
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動JavaScriptNode.jswebpackwebpack-dev-server 概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-d
RailsのVue.jsをWebpackerとJestでテストする（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Testing Vue.js in Rails with Webpacker and Jest 原文公開日: 2018/01/16 著者: Mario Saul 今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。とりあえず公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。 最後の段階でいくつかテストを書こうとしましたが、残念なことにWebpacker gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。 驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。 1. Jest
ゼロから始める TypeScript対応 Reactボイラープレート入門（前編） – FiNC Tech Blog – Medium
はじめまして。7月から業務委託として、FiNCのサーバーサイドエンジニアを担当している@yhirano55です。最近、来年3月に開催予定のRails Developers Meetup 2019の準備を始めました（次回は3トラック同時で進行する予定です）。 本記事では、Railsエンジニア向けに npm initから始める、TypeScript対応の Reactボイラープレートの作り方を紹介します。チームや組織で共通するボイラープレートがあると、SPA（Single Page Application）を量産する際に生産性が爆速になるのですが、ちょうど最近、Reactボイラープレートを作る機会を得まして、その過程で得られた試行錯誤を記事としてまとめてみました。 モチベーション Ruby on Railsを通してフロントエンドの実装をしていると、各種設定は、webpackerを使って簡単（暗黙
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails で Webpacker と aigis を使って スタイルガイドを作る — みんなのウェディングエンジニアリングブログ
Patreon
