見出し画像
Photo by golchiki

Webサイト開発の準備

今日も一日一学び

この度弊社に未経験デザイナーが入ってくるというので、彼女のためにまとめた内容をここに記しておこうと思います。htmlとcssによる詳細なコーディング方法なんかは別の記事にその役割を託すとして、PCの環境構築やソフトの設定などをまとめておきます。

事前準備

ツールのインストール

  • VSCode

    • CSS Formatter

    • indent-rainbow

    • Live Server

  • clipy（MacOS）

  • node.js

  • nodebrew（MacOS）

  • nodenv（MacOS）

  • ↑のパスを通す

  • MAMP(WordPressコーディングの場合)

VSCode

OSに応じたソフトをインストール。

インストール後は、下記3つのプラグインのインストールを推奨。

  • CSS Formatter

  • indent-rainbow

  • Live Server

また初期設定として、インデントをスペース2つ分にしておく。
VSCodeの設定（ウィンドウ左下のギアアイコン）を押下し、

  1. InsertSpaceにチェック

  2. TabSizeが2以外ならクリックして2に設定

clipy（MacOS）
クリップボードの履歴を複数保存しておけるソフトです。clipy自体はMacOS用ですが、ググればWindows向けのものも出てくると思いますよ。

node.js

node.jsはWEBサーバー上でJavascriptを動作させられるプログラムです。GulpやDockerを使う際に必要になるので、入れておいてもらいます。

しかしその前にHomebrewとNodebrewをインストールしてもらいます（MacOSユーザー）。

node.jsのバージョン管理ができる便利ツール。

Windowsの方もHomebrewからかな？試してないのでわかりませんが

また、プロジェクトごとに自動でNode.jsを切り替えられるようにするために、nodenvをインストールします
nodenv

インストールが終わったと思ったら、パスを通します。

パスを通す

M1 Macでは~/.zshrcを編集してパスを通します。Windowsの方はメモ帳から編集でしたっけね。すみませんがググってください。

export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"

nodenv -vをターミナルに打ち込み、nodenvがインストールできていることを確認します。

node.js

こちらからどうぞ

こちらもインストールが終わったと思ったら、node -vをターミナルに打ち込み、確認します。

Gulpの利用

初心者であれば、仕組みを理解するためにcssを書くのもいいと思いますが、仕事で使うのであれば、もはやcssを書く理由は見当たりません。ぜひscssを導入してください。scssがわからないという方は、一旦ググってまた戻ってきてください。

cssとGulpがどう関係しているの？という話ですが、まずGulpについて。
Gulpはタスクランナーです。ローカルファイルのコンパイルや移動、複製などの設定を、1つのjavascriptファイルで一元的に管理できます。

scssで書いたスタイルはそのままでは読めないので、cssにコンパイル（変換）する必要があります。SassをCSSに変換するコンパイラは色々ありますが、確認のたびに手動で変換するのは不便です。
ところがGulpを使えば、例えばscssを保存したタイミングでcssに自動変換するといった設定も可能なため、効率的です。


コーディング

デスクトップの任意の場所に、プロジェクトディレクトリを作成し、
ターミナルでそのプロジェクトディレクトリまで移動します。
あるいは、VS Codeでそのプロジェクトディレクトリを開けば自動でターミナルはそのプロジェクトディレクトリの場所にいます。

念の為もう一度バージョン確認

node -v

package.jsonファイルの作成

npm init -y

Gulp インストール

npm install -D gulp

次は、Gulpに必要なモジュールを`npm install -D`コマンドを使って、ローカルにインストールします。

  1. Gulp本体のgulpモジュール

  2. Sassコンパイラ（Dart Sass）のsassモジュール

  3. SassモジュールとGulpモジュールを連携するgulp-sassモジュール

  4. 最適化やコンパイルされる前のJavaScriptを保持したソースファイルを作っておける gulp-sourcemaps

  5. ファイルをリネームし、指定個所に移動できる gulp-rename

イッキ！イッキ！

npm install -D gulp sass gulp-sass gulp-sourcemaps gulp-rename

gulpfile.jsの作成

プロジェクトファイル直下に`gulpfile.js`というファイルを作成し、以下をコピペ。設定が気に食わない方は随時変更してください。フィードバックもありがたいです。

// gulpプラグインを読込
const { src, dest, watch, series } = require('gulp');
const gulp = require('gulp');
const rename = require('gulp-rename');
// Sassをコンパイルするプラグインを読込
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

/**
 * Sassをコンパイル
 */
const compileSass = (done) => {
  // style.scssファイル取得
  src('./dest/_scss/**/*.scss')
    // Sassコンパイル実行
    .pipe(sourcemaps.init())
    .pipe(
      // コンパイル後のCSSを展開
      sass({
        outputStyle: 'compressed',
      })
    )
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write())
    // cssフォルダー以下に保存
    .pipe(gulp.dest('./dest/common/css'));
  done();
};
/**
 * Sassファイルを監視し、変更があったらSassを変換
 */
const watchSassFiles = () => watch('dest/_scss/**/*.scss', compileSass);

exports.css = compileSass;
exports.default = series(compileSass);

// npx gulpコマンドで、watchSassFilesを実行
exports.default = watchSassFiles;

解説

  • `require('プラグイン名')` 使用するプラグインを読み込み

  • `gulp.src('取得するファイル')` タスクの対象となるファイルを取得。複数ファイルも指定できる

  • `pipe()` 1つひとつの処理をつなげる。たとえば前述のコードでは、`src()`で取得したSassファイルをコンパイルし、それを`gulp.dest()`で書き出している。`pipe()`メソッドはいくらでもつなげることができるので、連続した複数の処理を実装できる

  • `gulp.dest('保存先フォルダー')` 処理を行ったファイルを指定の場所に保存する

scssファイル群を用意

`dest`、 `_scss`、`style.scss`等のファイルを用意。階層構造は以下の通り。

project directory
|-- dest
|  |-- `_scss`
|  |  |-- `_index.scss`
|  |  |-- `_reset.scss`
|  |  |-- `_sw.scss`
|  |  |-- `style.scss`
|  |-- common
|  |  |-- css
|  |  |-- img
|  |  |-- js
|  |-- index.html
|-- node_module
|-- gulpfile.js
|-- package-lock.json
|-- package.json
|-- README.txt

style.scssで全体を定義し、機能やページ別にscssファイルを分けて記載。それをstyle.scssでimportしています。
style.scss例

$sp: 599px;
$sp_footer: 900px;
$sp_header: 1300px;

@mixin sp {
  @media (max-width: $sp) {
    @content;
  }
}
@mixin sp_footer {
  @media (max-width: $sp_footer) {
    @content;
  }
}
@mixin sp_header {
  @media (max-width: $sp_header) {
    @content;
  }
}
@import '_reset.scss';
@import '_sw.scss';
@import '_index.scss';

あとはindex.htmlで./common/css/style.min.cssを読み込み、ターミナルでnpx gulpすれば、scss保存時に./common/css/style.min.cssが自動更新されるはずです。

サポートで得られたお金は寄付に使わせていただきます。