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…

ReactとCanvasで画像のリサイズや回転を行う

Canvasを学ぶ必要があり、その練習として作ってみた。 ただの習作だから別に公開する必要はないのだが、いろいろあり、仕事以外でもコードを書いて公開していこうと思うようになった。 そのほうがちゃんと続けられるだろうし。 職場では他のホスティングサー…

定数に対してFlowの型を設定する

定数に対してFlowの型を設定する場合、工夫というか、トリッキーな書き方をしないと上手く動かない。 業務で必要になり調べ、GitHubのIssueで解決策を見つけたのだが、日本語の資料や記事は見当たらなかった。 ちょっとした小ネタだが、誰かの役に立つかもし…

入社からの半年間でコードレビューで指摘されたことのまとめ

実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我…

Flowのnullチェックとanyへのキャスト

Flowはnullに対するチェックが厳しく、nullを想定していない場所にnullを渡したり、nullが渡される可能性があったりすると、エラーを出してくれる。 例えば以下のコードでFlowを実行すると、エラーが出る。 // @flow type Owner = { name: string, age: numb…

ReactのコンポーネントにFlowの型をつける

以前の記事でFlowの導入が完了し、Reactを使って書いたコードに型を付けることが出来るようになった。 ここからは実際に、Reactのコンポーネントに型を付けていく。 Flow導入の記事はこちら。 なお、この記事を書いている環境のFlowのバージョンは、0.46.0。…

配列の最大値を取得する ES2015版

JavaScriptで、配列の最大値を取得する方法について。 最初に答えを書いておくと、Math.max(...targetArray)。 旧来はapplyを使うのが主流だった? Math.max()を使うと、数値の中から最大のものを取得できる。 Math.max(6, 8, 9, 7); // 9 しかしこれは、一…

nodebrewの再インストール

経緯 最近リリースされたnpm v5を試したくて、試行錯誤していた。 特にpackage-lock.jsonの挙動について、今までのnpm shrinkwrapと比較しながら勉強したかったので、$ npm i -g npm@4.0.0みたいな感じで、手元のnpmのバージョンをころころ変えていた。 そし…

ReactにFlowを導入して型チェックを行う

JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…

React Router v4 の基本的な考え方と使い方

React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: …