30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

Steb by Step で剥がす Webpacker

この記事では、Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。 Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。 現時点ではWebpackerが使用しているwebpackのバージ…

Webpacker の基本的な仕組み

webpackではなく、Rails の gem であるWebpackerの話。 Webpackerを止める方法について書く予定だったが、前提であるWebpackerの説明だけで長くなってしまったので別の記事として切り出した。 脱 Webpacker についてはこちら。 numb86-tech.hatenablog.com r…

『WEB+DB PRESS Vol.107』の「実践CircleCI」を読んだ

職場にあったので何となく目を通してみたら、思ったより初歩から説明してあったのでちゃんと読むことにした。 gihyo.jp CircleCI、というかCIについてはほとんど何も知らないレベルだったが、ちゃんと入っていけた。 最後のほうは流し読みだから大した知識は…

Gatsby + CircleCI + AWS でサイトを構築した

サイトを作り直した。 それに伴い、デプロイのフローも整備した。 具体的には CircleCI でビルドを行い、S3 へのアップロードや CloudFront のキャッシュのクリアまで行う。 ソースは全部公開してあるので参考にどうぞ。 github.com 前提として、予めサイト…

Webpacker を使っている Rails アプリに Vue のユニットテストを導入する

真っ白な環境に Vue のユニットテストを導入する記事を以前書いた。 numb86-tech.hatenablog.com 今回は、Webpacker を用いて Vue を使用している Rails アプリに、Vue のユニットテストを導入する方法を書いていく。 rails newでプロジェクトを作成するとこ…

『RubyでつくるRuby ゼロから学びなおすプログラミング言語入門』を読んだ

タイトル通り、Rubyを使ってRubyインタプリタを作っていく面白いテーマの本。 プログラミング初心者も対象読者に入っているため、非常にコンパクトにまとまっており、140ページ程度でインタプリタを作れる。 RubyでつくるRuby ゼロから学びなおすプログラミ…

『Team Geek ――Googleのギークたちはいかにしてチームを作るのか』を読んだ

同僚に借りて読んだ。 ソフトウェア開発者を対象に、チームのなかでどのように振る舞うべきか、どのようなチームにしていけばいいのか、チームを守るために何をすべきか、チームリーダーの役割とは、といったものを説いていく。 非常に有名な本で、自分もタ…

Vue CLI を使わずに Vue のユニットテストを実行できるようにする

Vueのユニットテストを書こうと思い調べてみたが、ざっと読んだところ、Vue CLI の利用を前提にしている文書が多かった。 だが現実的には、何らかの理由で Vue CLI を使わない、使っていないというケースも多いはず。 そこで、Vue CLI を使わない環境でユニ…

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…