Webアプリ開発 React.js フロントエンド環境 Part(17) SaaSを試す

Contents

はじめに
SaaSにチャレンジ
SaaSコンパイラ　インストール
SaaSコンパイラの起動
SCSSファイルを作成
まとめ

はじめに

swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。Webアプリ開発記事と述べていますが、未だに、公式ページをお手本にしているだけで、まだまだ道半ばです。

第16回では、node.jsの導入、シングルページ　アプリケーションの雛形として、create-react-appの導入、サンプルプログラムの改造を行ってみました。

以下の記事を参考にしてみました。

create-react-appを使ってReactでToDoリストを作成するぞ - Qiita

これは WCDI Advent Calendar 2018 8日目の記事です。前日の記事 WEBサーバで障害が発生した際に確認すべき事翌日の記事一生「お前は誰だッ！」って言ってろ - はてなブ…

引き続き、Reactの勉強を進めていきたいと思います。

SaaSにチャレンジ

第16回では、参考サイトのCSSスタイルシートをそのまま利用していました。

今回は、自分なりのスタイルシートを書いてみようと思います。この際、CSSの拡張であるSaaSを使用してみることにします。

SaaSコンパイラ　インストール

VS codeの拡張メニューから、Live Saas Compilerをインストールします。

SaaSコンパイラの起動

VS codeの下部のバー”Watch Saas”をクリックして起動します。

”Watching”に変化しました。

SCSSファイルを作成

前回、App.cssとMenuItem.cssを作成していました。これらを拡張子scssにしたファイルを新規作成します。

App.scss

.App {
  width: 800px;
  height: 800px;
  background-color:  wheat;
  position: relative;
}

SaaSコンパイラにより、cssファイルが生成されます。

App.css

.App {
  width: 800px;
  height: 800px;
  background-color: wheat;
  position: relative;
}/*# sourceMappingURL=App.css.map */

つぎに、MenuItem.js　の中身を確認します。

ここでは、ClassNameとして、２つ指定しました。　”MenuItem title” と”MenuItem description” それぞれ２つ指定しています。

import React, { Component } from 'react';
import './MenuItem.css';

class MenuItem extends Component {
  render() {
    const { title, description } = this.props;

    return (
      <div className="MenuItem">
        <div className="MenuItem title">{title}</div>
        <div className="MenuItem description">{description}</div>
      </div>
    );
  }
}

export default MenuItem;

同様に、MenuItem.scss　も作成します。Saasを利用することにより階層構造でコードを記載できるようになります。

&.tilte(アンパーサンドとドット)で、”MenuItem”と”title”の２つのクラス名の条件を指定しました。

同様に、

&.description (アンパーサンドとドット)で、”MenuItem”と”description “の２つのクラス名の条件を指定しました。

.MenuItem {
  background-color: whitesmoke;
  position: relative;
  top: 20px;
  margin: 4px 4px 4px;
  &.title{
    position: relative;
    top: 0px;
      font-size: 18px;
    border-bottom: 2px solid salmon;
    text-align: left;
    padding: 4px 4px 4px 4px;
  }
  &.description {
    position: relative;
    top: 0px;
    border-bottom: 2px solid salmon;
    text-align: left;
    padding: 4px 4px 4px 4px;
  }
  
}

作成された、MenuItem.cssを確認します。

階層構造が展開されて、.MenuItem.title　と.MenuItem.description　が生成されています。　

.MenuItem {
  background-color: whitesmoke;
  position: relative;
  top: 20px;
  margin: 4px 4px 4px;
}
.MenuItem.title {
  position: relative;
  top: 0px;
  font-size: 18px;
  border-bottom: 2px solid salmon;
  text-align: left;
  padding: 4px 4px 4px 4px;
}
.MenuItem.description {
  position: relative;
  top: 0px;
  border-bottom: 2px solid salmon;
  text-align: left;
  padding: 4px 4px 4px 4px;
}/*# sourceMappingURL=MenuItem.css.map */

最後にブラウザで確認します。