2018-01-01から1年間の記事一覧
職場にあったので何となく目を通してみたら、思ったより初歩から説明してあったのでちゃんと読むことにした。 gihyo.jp CircleCI、というかCIについてはほとんど何も知らないレベルだったが、ちゃんと入っていけた。 最後のほうは流し読みだから大した知識は…
サイトを作り直した。 それに伴い、デプロイのフローも整備した。 具体的には CircleCI でビルドを行い、S3 へのアップロードや CloudFront のキャッシュのクリアまで行う。 ソースは全部公開してあるので参考にどうぞ。 github.com 前提として、予めサイト…
真っ白な環境に Vue のユニットテストを導入する記事を以前書いた。 numb86-tech.hatenablog.com 今回は、Webpacker を用いて Vue を使用している Rails アプリに、Vue のユニットテストを導入する方法を書いていく。 rails newでプロジェクトを作成するとこ…
タイトル通り、Rubyを使ってRubyインタプリタを作っていく面白いテーマの本。 プログラミング初心者も対象読者に入っているため、非常にコンパクトにまとまっており、140ページ程度でインタプリタを作れる。 RubyでつくるRuby ゼロから学びなおすプログラミ…
同僚に借りて読んだ。 ソフトウェア開発者を対象に、チームのなかでどのように振る舞うべきか、どのようなチームにしていけばいいのか、チームを守るために何をすべきか、チームリーダーの役割とは、といったものを説いていく。 非常に有名な本で、自分もタ…
Vueのユニットテストを書こうと思い調べてみたが、ざっと読んだところ、Vue CLI の利用を前提にしている文書が多かった。 だが現実的には、何らかの理由で Vue CLI を使わない、使っていないというケースも多いはず。 そこで、Vue CLI を使わない環境でユニ…
アセットパイプラインとは、Ruby on RailsにおいてJavaScriptファイル、スタイルシート、画像等（これらを総称してアセットと呼ぶ）を管理する仕組みのこと。 以下のバージョンで確認した。 Ruby 2.5.1 Rails 5.2.1 まずはプロジェクトの作成。 $ rails new …
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値（リビジョン）を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回…
この記事を読んでいて知ったのだが、CSSを抽出する目的でextract-text-webpack-pluginを使うのは非推奨になったらしい。 qiita.com github.com webpack@4では mini-css-extract-plugin というプラグインを使うことが推奨されている。 というわけで、その使い…
2017年に登場し、あっという間にJavaScriptコードフォーマッタのスタンダードになったPrettier。 github.com 非常に簡単に導入できるのだが、それゆえに、よく分かっていなくても使えてしまう。 導入時に設定ファイルをコピペするだけでどうにかなってしまう…
JavaScriptを書く上で必須のツールであるESLintだが、自分はあまりちゃんと理解していない。 最初に設定してしまえばその後はあまり手を加えないし、加えるときも都度調べて対症療法的に対応しているから、基礎は分かっていない。 取り敢えずairbnbをextende…
今年の目標であった転職を果たしてしまいモチベーションが下がっているので、勉強会でも行ってみるかという気持ちになっている。 手始めに、このイベントに行った。 mixi.connpass.com 知っているサービスだし、年収800万円以上でプログラマを募集しているよ…
同僚に借りて読んだ。 www.nikkeibp.co.jp 雑誌の連載をまとめたものであり、テーマに一貫性はなく、広く浅く様々な話題を扱っている。 出版が2012年だから、内容は古い。CoffeeScriptが紹介されていたり、NoSQLに対する評価がかなりポジティブだったり。 し…
Railsの5.2.1でバージョン確認している。 rails generate（generateはgに省略可能）コマンドを使うとモデルやコントローラーを生成することが出来るが、CoffeeScriptのように不要なファイルもある。 特に手早くサンプルを作ったり学習目的でアプリを作ったり…
CarrierWaveというライブラリを使うことで、簡単にRailsアプリに画像アップロード機能を付け加えることが出来る。 github.com ここではCarrierWaveを使うための具体的な手順を書いていく。 動作確認はRuby 2.5.1、Ruby on Rails 5.2.1、macOS 10.13.6で行っ…
以前、Node.jsで環境変数を管理する方法として、dotenvについて書いた。 numb86-tech.hatenablog.com だがdirenvを使えばもっと簡単に環境変数を管理できることを知った。 github.com この記事の内容はmacOSの10.13.5で動作確認している。 セットアップ home…
N高等学校のプログラミング学習教材の一部を書籍化したもの。 N高のプログラミングコースがすごいというのは聞いていたし、「Webアプリケーションフレームワークを学ぶ際にそのチュートリアルでやろうとしている操作や背景にある技術がわかる本」という切り…
環境。 OSはmacOS High Sierra(10.13.5)。 Ruby自体のバージョン管理はrbenv(1.1.1)で行う。 rbenvについては以下を参照。 numb86-tech.hatenablog.com グローバルインストール RubyではRubyGemsという仕組みを使ってパッケージ管理を行う。扱われる一つ一つ…
最初に環境を書いておくと、OSはmacOS High Sierra(10.13.5)。 homebrewインストール済み。 RubyやRailsを触り始めたのだが、初心者なのでとにかく躓く。 bundle installでエラー、rails newでエラー、rails sでエラー、foreman startでエラー……。 その都度…
ゴールデンウィークを使って読み進めて、ようやく読み終わった。 浅井健一『プログラミングの基礎』サイエンス社 タイトル通り、プログラミングの基礎を学んでいく。言語はOCaml。 リストや木構造などの簡単なデータ構造やアルゴリズムについても学んでいく…
Redux の機能を拡張し、非同期処理などを書きやすくする仕組みである Redux Middleware について書いていく。 この記事で使っているライブラリのバージョンは以下。 redux@3.7.2 react-redux@5.0.7 react@16.2.0 react-dom@16.2.0 Redux の基本については、…
インフラについて調べていたので、その備忘録。 調べていく上で重視したのは、概念や概要を知ること。細かい知識はあとでいくらでも調べることが出来るが、土台となるものがなければ調べることすら出来ない。 「公式ガイドやハウツー記事に従って設定したけ…
同僚に借りて読んだ。 三部作の二番目のようだが、前作を知らなくても特に問題なく読めた。 「設計」や「要件定義」という言葉がタイトルに入っているが、本書の内容はシステム設計などに限定されるものではなく、もっと普遍的なことを扱っている。 仕事とは…
この記事では、webpackのv4で追加されたsplitChunksを使って、v4で削除されたCommonsChunkPluginから移行する方法を書いていく。 使っているパッケージのバージョンは以下の通り。 webpack@4.1.0 webpack-cli@2.0.10 CommonsChunkPlugin とは CommonsChunkPl…
webpackではv4から、modeというオプションが追加された。 それに伴いminimize（コードの圧縮）の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-web…
webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scrip…
去年の9月、Reactのv16がリリースされた。 自分も、15.xからバージョンアップする機会があった。 破壊的変更もいくつかあるが以前からアナウンスされていたし、あまり難しくはないはず。 何より、公式が丁寧なドキュメントやツールを用意しているから、それ…
このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 c…
欲しいものリストから送って頂き、読んでいた。ようやく読了。 Webを支えるプロトコルであるHTTPについて、メソッドとはというところから始まり、HTTP/2に関する話題まで、幅広く網羅している。 主にクライアント側の視点で書かれている。 O'Reilly Japan - …
Higher-Order Components(以下、HOC)は、Reactのコンポーネントを作る際のパターン。 HOCを使うことで、複数のコンポーネントで使っている処理を共通化したり、SFCにライフサイクルメソッドを追加したりすることが出来る。 基本的な構造 HOCは、以下のような…
