0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Mac+DockerでphpStormを使いWordPressテーマを一から作る(1/3)

Last updated at Posted at 2020-07-11

先日、2009年から愛用していた懐かしの白いMacBook(Early 2009)を卒業して、MacBook Air2020(1,1GHz i5クアッドコア+SSD 512GB+16GB RAM)に乗り換えました。

先代はメモリを8GBまで増設して内臓HDDもSSDに換装してなんとか延命をしており、普段使用するアプリケーション(Photoshop CCの最新版とかphpStormとかableton Liveとか)はほぼストレス無く使えていました。

現在はうつ病の療養中で無職のためこれまでやってきてなかった事をしたいと思い、今更ながらSassなどこれまで業務の中で触れなかった技術を学ぼうと思い、まずはVirtualBox+CentOSで環境を作ってみたのですが、公式リポジトリのCentOSのバージョンが7系でphpも5.4系とかなり古いものでした。

そこでDockerを使ってみようとしたところ、旧マシンではOSのアップデートがSierra(10.12)で止まってしまっており現行バージョンのDocker Desktopが使えなかったので、例の一人10万円給付金を使ったMacBook Air2020の購入へと至りました。

...と前置きが長くなりましたが本題に入りたいと思います。
本稿は長くなるので3回に別けて投稿したいと思います。

ゴール

Docker Desktop for Mac でWordpress環境を作り、スターターテーマのunderscores(_S)を使ったテーマ開発ができるようにする。
cssはSassを使い、phpStorm側でコンパイルが出来るようにする。
ついでにphpMyAdminも使えるようにする。

前提条件

  • MacOS Catalina(10.15) ※セットアップとデータ移行が済んだ状態
  • phpStorm(2020.1)

#ステップ

  • XCodeのインストール(1/3)
  • Homebrewのインストール(1/3)
  • node(npm)+node-sassのインストール(1/3)
  • Docker Desktop for Mac のインストール((2/3)
  • Docker-composeによるコンテナの構築(2/3)
  • underscores(_s)でのスターターテーマの作成とファイルの設置(3/3)
  • phpStormでのSassウォッチャーの登録(3/3)

Xcodeのインストール

まずはXCodeをインストールします。
これは後にHomebrew経由でnodeを導入し、さらにnode-sassを導入するための前準備です。

AppStoreからXcodeを検索してポチればOKです。
2020-07-10-11.18.20.jpg

インストールにはそこそこ時間が掛かるので、しばらく放っておきましょう。自分は1時間くらい掛かったような。

もしくはターミナルから以下のコマンドでもインストールできるようです。

$ xcode-select --install

Homebrewのインストール

インストールが完了したら次はHomebrewのインストールを行います。
HomebrewをはMacOS向けのパッケージマネージャーで必要なものをコマンドで簡単にインストールできる、というものです。
これにより後のnodeのインストールを行います。

公式サイトによれば以下のコマンドでインストールが可能なようです。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

インストールが完了したらバージョンを確認し、以下のようにバージョンが表示されればOKです。

$ brew --version
Homebrew 2.4.3
Homebrew/homebrew-core (git revision 06581; last commit 2020-07-07)

node(npm)+node-sassのインストール

続いてHomebrew経由でnode(npm)をインストールします。
npmとはnodeのパッケージ管理ツールの事です。

$ brew install -g node

インストールが済んだらバージョンが正常に表示されるか確認しましょう。

$ node -v
v14.5.0

無事、インストールできたようです。
npmのバージョンは以下のコマンドで確認できます。

$ npm version
{
 npm: '6.14.5',
 ares: '1.16.0',
 brotli: '1.0.7',
 cldr: '37.0',
 icu: '67.1',
 llhttp: '2.0.4',
 modules: '83',
 napi: '6',
 nghttp2: '1.41.0',
 node: '14.5.0',
 openssl: '1.1.1g',
 tz: '2019c',
 unicode: '13.0',
 uv: '1.38.0',
 v8: '8.3.110.9-node.23',
 zlib: '1.2.11'
}

私の環境では以上のような結果になりました。
npmのインストールが確認できたら、今度はnpmでnode-sassをインストールします。

$ npm install --global --save-dev node-sass

特にエラーらしきものが出ていなければOKでしょう。

``

以降は次のエントリーに続きます。

2回目書きました。
[Mac+DockerでphpStormを使いWordPressテーマを一から作る(2/3)][1]
[1]:https://qiita.com/jszk/items/053bd5cc36f14268fcaf

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?