2018/10/11

デザイナーにもオススメ!シンプルですぐできるSass(SCSS)開発環境構築

ファミコン風CSSフレームワーク(NES.css)を開発するために、Sassの開発環境を整えたので共有したい。

ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。

しかし、Sassを使う上で避けては通れないものがある。
SassからCSSに変換する「コンパイル」だ。

フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツールに拒否反応を示されてしまってはもったいない。

そこでシンプルで設定ファイルが少なく、かつある程度自動でなんでもやってくれるSassの開発環境をステップバイステップで構築していく。

この記事を書くにあたり使ったツールは以下のとおり。
  • Node.js環境
    • npm@5.2.0
    • node.js@8.11.4
  • SassをコンパイルしてCSSを出力する
    • node-sass@4.9.3
    • rimraf@2.6.2
  • ベンダープレフィックスを自動的に付加する
    • postcss-cli@6.0.0
    • autoprefixer@9.1.5
  • コーディングスタイルを統一する
    • stylelint@9.5.0
    • stylelint-config-recess-order@2.0.0
    • stylelint-config-standard@18.2.0
    • stylelint-scss@3.3.1
  • 自動フォーマットする
    • prettier-stylelint@0.4.2
    • clean-css-cli@4.2.1
  • コミット時にコーディングスタイルをチェックする
    • husky@1.0.0
    • lint-staged@7.3.0
  • エディタで保存時に自動フォーマットする
    • VSCode@1.27.2
    • prettier-vscode@1.6.1

2018/09/18

gvm使用時にvscode-goで「Cannot find "go" binary. Update PATH or GOROOT appropriately」が出たときの解決方法

新しいMBP2018(High Sierra)にしてからGo言語(以下、golangと呼ぶ)の開発環境構築をしていた。そのとき、VSCodeのMicrosoft謹製のgolang用拡張機能(vscode-go)を使って、golangを書こうとしたときにかなりハマった。

ハマった点はいくつかあるのだが、今回は「Cannot find "go" binary. Update PATH or GOROOT appropriately」というエラーがでたときのことに絞って書こうと思う。

私の開発環境は以下のとおり。
  • macOS High Sierra
  • gvm@1.0.22
  • go@1.11
    • gvmでインストールする
  • VSCode@1.27.x
  • vscode-go@0.6.89

2018/09/03

Dockerコンテナ内のNginxからホストOSのlocalhostにアクセスする

開発するサービスが増えてくると、同じホスト名だけどパスによって違うサービスを表示したいことがある。たとえば、https://example.comならRailsで作ったメニューページ、https://example.com/serviceならNuxt.jsで作った別サービスといった具合だ。

できれば環境はローカルマシン内だけで完結させたいので、DockerコンテナにNginxでリバースプロキシを立ててパスによってlocalhostの違うポートにプロキシしたい。しかし、Dockerコンテナ内でlocallhostにアクセスしようとすると、コンテナ内のゲストOSのlocalhostにアクセスしてしまう。

ということでDockerコンテナ内からホストOSにアクセスする方法とまとめる。


環境は以下の通り。

  • macOS High Sierra
  • Docker CE Version 18.06.0-ce-mac70 (26399)
  • Nginx(Dockerコンテナ内)