Ruby on Rails のアセットパイプラインの挙動を環境ごとに学ぶ

アセットパイプラインとは、Ruby on RailsにおいてJavaScriptファイル、スタイルシート、画像等(これらを総称してアセットと呼ぶ)を管理する仕組みのこと。 以下のバージョンで確認した。 Ruby 2.5.1 Rails 5.2.1 まずはプロジェクトの作成。 $ rails new …

webpack@4 で出力するファイルをリビジョン管理する

ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値(リビジョン)を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回…

webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う

この記事を読んでいて知ったのだが、CSSを抽出する目的でextract-text-webpack-pluginを使うのは非推奨になったらしい。 qiita.com github.com webpack@4では mini-css-extract-plugin というプラグインを使うことが推奨されている。 というわけで、その使い…

Prettier に再入門する

2017年に登場し、あっという間にJavaScriptコードフォーマッタのスタンダードになったPrettier。 github.com 非常に簡単に導入できるのだが、それゆえに、よく分かっていなくても使えてしまう。 導入時に設定ファイルをコピペするだけでどうにかなってしまう…

ESLint に再入門する

JavaScriptを書く上で必須のツールであるESLintだが、自分はあまりちゃんと理解していない。 最初に設定してしまえばその後はあまり手を加えないし、加えるときも都度調べて対症療法的に対応しているから、基礎は分かっていない。 取り敢えずairbnbをextende…

「みてねのMeetup #2 for サーバーサイド/SRE」に行ってきた

今年の目標であった転職を果たしてしまいモチベーションが下がっているので、勉強会でも行ってみるかという気持ちになっている。 手始めに、このイベントに行った。 mixi.connpass.com 知っているサービスだし、年収800万円以上でプログラマを募集しているよ…

『まつもとゆきひろ コードの未来』を読んだ

同僚に借りて読んだ。 www.nikkeibp.co.jp 雑誌の連載をまとめたものであり、テーマに一貫性はなく、広く浅く様々な話題を扱っている。 出版が2012年だから、内容は古い。CoffeeScriptが紹介されていたり、NoSQLに対する評価がかなりポジティブだったり。 し…

rails generate で余分なファイルが生成されないようにする

Railsの5.2.1でバージョン確認している。 rails generate(generateはgに省略可能)コマンドを使うとモデルやコントローラーを生成することが出来るが、CoffeeScriptのように不要なファイルもある。 特に手早くサンプルを作ったり学習目的でアプリを作ったり…

Rails で画像のアップロード機能を実装する

CarrierWaveというライブラリを使うことで、簡単にRailsアプリに画像アップロード機能を付け加えることが出来る。 github.com ここではCarrierWaveを使うための具体的な手順を書いていく。 動作確認はRuby 2.5.1、Ruby on Rails 5.2.1、macOS 10.13.6で行っ…

direnv を使った環境変数の管理

以前、Node.jsで環境変数を管理する方法として、dotenvについて書いた。 numb86-tech.hatenablog.com だがdirenvを使えばもっと簡単に環境変数を管理できることを知った。 github.com この記事の内容はmacOSの10.13.5で動作確認している。 セットアップ home…

『Webプログラミングが面白いほどわかる本 環境構築からWebサービスの作成まで、はじめからていねいに』を読んだ

N高等学校のプログラミング学習教材の一部を書籍化したもの。 N高のプログラミングコースがすごいというのは聞いていたし、「Webアプリケーションフレームワークを学ぶ際にそのチュートリアルでやろうとしている操作や背景にある技術がわかる本」という切り…

bundler を使った RubyGems の管理について

環境。 OSはmacOS High Sierra(10.13.5)。 Ruby自体のバージョン管理はrbenv(1.1.1)で行う。 rbenvについては以下を参照。 numb86-tech.hatenablog.com グローバルインストール RubyではRubyGemsという仕組みを使ってパッケージ管理を行う。扱われる一つ一つ…

rbenv を使った Ruby のバージョン管理について

最初に環境を書いておくと、OSはmacOS High Sierra(10.13.5)。 homebrewインストール済み。 RubyやRailsを触り始めたのだが、初心者なのでとにかく躓く。 bundle installでエラー、rails newでエラー、rails sでエラー、foreman startでエラー……。 その都度…

『プログラミングの基礎』を読んだ

ゴールデンウィークを使って読み進めて、ようやく読み終わった。 浅井健一『プログラミングの基礎』サイエンス社 タイトル通り、プログラミングの基礎を学んでいく。言語はOCaml。 リストや木構造などの簡単なデータ構造やアルゴリズムについても学んでいく…

Redux Middleware の仕組みと作り方

Redux の機能を拡張し、非同期処理などを書きやすくする仕組みである Redux Middleware について書いていく。 この記事で使っているライブラリのバージョンは以下。 redux@3.7.2 react-redux@5.0.7 react@16.2.0 react-dom@16.2.0 Redux の基本については、…

ウェブエンジニアがサーバーを管理していくための初歩

インフラについて調べていたので、その備忘録。 調べていく上で重視したのは、概念や概要を知ること。細かい知識はあとでいくらでも調べることが出来るが、土台となるものがなければ調べることすら出来ない。 「公式ガイドやハウツー記事に従って設定したけ…

『はじめよう! プロセス設計 ~要件定義のその前に』を読んだ

同僚に借りて読んだ。 三部作の二番目のようだが、前作を知らなくても特に問題なく読めた。 「設計」や「要件定義」という言葉がタイトルに入っているが、本書の内容はシステム設計などに限定されるものではなく、もっと普遍的なことを扱っている。 仕事とは…

webpack@4の splitChunks を使って CommonsChunkPlugin から移行する

この記事では、webpackのv4で追加されたsplitChunksを使って、v4で削除されたCommonsChunkPluginから移行する方法を書いていく。 使っているパッケージのバージョンは以下の通り。 webpack@4.1.0 webpack-cli@2.0.10 CommonsChunkPlugin とは CommonsChunkPl…

webpack@4のmodeとminimize(UglifyJS)

webpackではv4から、modeというオプションが追加された。 それに伴いminimize(コードの圧縮)の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-web…

webpackでCSSやSASSを使う

webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scrip…

Reactをv16に上げるために行ったこと

去年の9月、Reactのv16がリリースされた。 自分も、15.xからバージョンアップする機会があった。 破壊的変更もいくつかあるが以前からアナウンスされていたし、あまり難しくはないはず。 何より、公式が丁寧なドキュメントやツールを用意しているから、それ…

フロントエンドでバイナリファイルを扱うためのBlobオブジェクトとFileオブジェクト

このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 c…

『Real World HTTP』を読んだ

欲しいものリストから送って頂き、読んでいた。ようやく読了。 Webを支えるプロトコルであるHTTPについて、メソッドとはというところから始まり、HTTP/2に関する話題まで、幅広く網羅している。 主にクライアント側の視点で書かれている。 O'Reilly Japan - …

Higher-Order Components と Recompose の初歩

Higher-Order Components(以下、HOC)は、Reactのコンポーネントを作る際のパターン。 HOCを使うことで、複数のコンポーネントで使っている処理を共通化したり、SFCにライフサイクルメソッドを追加したりすることが出来る。 基本的な構造 HOCは、以下のような…

Fetch API を Stub にしてテストする

SPAなどは特にそうだと思うけど、fetchを使って非同期にAPIを叩き、その結果に基いて部分的にビューを書き換える、というのはよく行われる。 そういう時に面倒なのがテスト。 fetchはwindowオブジェクトに入っているからテスト環境には存在しないし、そもそ…

Enzymeのv3でshallowすると自動的にcomponentDidMountが呼ばれる

Reactのバージョンを16に上げるのに伴いEnzymeのバージョンを3にしたら、一部のテストが壊れた。 調べたところ、v3からshallowの挙動が変わったことが原因だった。 https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md#life…

Reactのコンポーネントにpropsを渡さない場合のFlowの書き方

Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Compo…

『わかばちゃんと学ぶ Git使い方入門』を読んだ

同僚にお借りして読んだ。 わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 全くの初心者向けに、GitやGitHubの使い方を解説した本。 漫画の主人公も、プログラマではなく「Web業界に憧れる大学生」。 コマンドラインではなくGUIで操作…

Node.jsで任意のサイズの画像を生成するスクリプトを書いた

縦横サイズかバイト数、あるいはその両方を指定できる。 画像を操作するプログラムを書いていて、その検証用の画像を簡単に用意できるようにしたい、というのが作った動機。 既に似たようなツールは存在するのかもしれないが、勉強になりそうだから自分で作…

async/awaitを使った非同期処理の書き方

ES2017で仕様に入ったAsyncFunctionとawait単項演算子。 これらを使うと非同期処理を同期的に書くことができ、非同期処理のループもシンプルに書けるようになる。 この記事の内容は全てNode.jsのv8.6.0で動作確認している。 非同期処理の基礎はこちら。 Asyn…