#4 IDE(統合開発環境)のインストール

IDEとは

プログラムに必要ないろんな機能が搭載されているテキストエディタのことです。便利なアプリなので今後Webサイトを作る際に積極的に活用していきましょう。
いろんな機能：デバッガ、コンパイラ、Git、FTP、Sassコンパイル、エディタなど。
まだテキストエディタでも十分作れる規模ですが、この段階でIDEを使い慣れておきましょう。 IDEはいくつかありますが、ここではNetBeans（ネットビーンズ）で説明していきます。他にもEclipse（イクリプス）やVisual Studio（ビジュアルスタジオ）。
phpだけであればPhpStorm（ピーエイチピーストーム）などがあります。

NetBeansの最新版をダウンロード

NetBeansダウンロードサイトへ
最新版のダウンロードボタンをクリック

※インストール中にエラーが出る方は、こちらから各OSにあったJava SE Development Kitを先にインストールしましょう。

メニューを日本語にしたい方へ。素晴らしい方が日本語化していただいています。
日本語化
メニュー「tools」からPluginを選択し、downloadタブの追加でダウンロードしたファイルをインストールしましょう。感謝。

開発環境用のプロジェクトフォルダを作る

まずは開発用のフォルダをまとめるためのプロジェクト用フォルダを作成します。
ホーム（ユーザ名）フォルダの中に job フォルダを作り、これまで作ってきた作業フォルダを入れていきましょう。
また、この次に紹介するSCSSや、PHPを実行する際に使うフォルダとして stg というフォルダを作りましょう。

Users/ユーザ名/job/stg/

※この部分は応用1 #1 ローカルにWeb開発環境を作る(LAMP)で詳しく説明いたします。
今回はstgフォルダの中に「8001-scss」という名前のフォルダを作って、下のような構成にしてください。

NetBeansにプロジェクトを追加する

フォントのカスタマイズ

windowsの方はフォントを変えてみましょう。
CamingoCodeダウンロードサイトへ
Myricaダウンロードサイトへ
Ricty Diminishedダウンロードサイトへ
Macの方はMenloがおすすめです。

テーマの変更

外観を変更する方法
ダウンロードしたら、メニューのツール > プラグイン > ダウンロード済み[タブ] > プラグインの追加でファイルを選んでインストールします。
Atomのテーマの場合。
Atom Pluginダウンロードサイトへ

Darcula Look and Feelの場合
Darcula Look and Feelダウンロードサイトへ

#5 Sassを使ってCSSを効率的に記述する

Sassは複数あるCSSのメタ言語の一つ

Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。 Sassには「SASS（.sass）」と「SCSS（.scss）」の2種類の記法があります。ここではSCSS（サース）を使って説明いたします。
また、SCSS記法で記述したとしても最終的にCSSファイルとして書き出すために「コンパイル（変換）」という作業が必要となります。コンパイルする方法はアプリを使ったりターミナルからコマンド入力してコンパイルしますが、NetBeansでも簡単にできるので説明いたします。

例）scssでの記述の仕方


.main{
  width:90vw;
  &__text{
    text-align:center;
    &--sub{
      font-size:0.8em;
    }
  }
  &__image{
    margin:0 auto;
  }
}

↓ cssとしてコンパイルしたとき


.main{
  width:90vw; }
.main__text{
    text-align:center; }
.main__text--sub{
    font-size:0.8em; }
.main__image{
    margin:0 auto; }

Nodebrew（ノードブリュー）とNode.jsのインストール

MacでSassを使うにはNode.js（ノードジェイエス）の node-sass（ノードサス）というモジュールを使います。これらはターミナルを使ってインストールします。
Node.jsをインストールするにはNodebrew（ノードブリュー）というnode.jsに関するパッケージ管理システムでインストールします。さらにNodebrewを使うためにHomebrew（ホームブリュー）というパッケージ管理システムのインストールが必要です。
※Homebrewの詳しい説明は実践 #2 パッケージマネージャーHomebrewを使うにて詳しく説明しています。今は読まなくてもよいです。
※npmコマンドはnode package modulesの頭文字でNode.jsのライブラリを管理するパッケージマネージャーです。

インストールの手順

Homebrewをインストール
Homebrewからnodebrewをインストール&セットアップ
Nodebrewのパスを.bash_profileに指定する
NodebrewからNode.jsをインストール
Node.jsを入れるとnpm、node-sassもインストールされる

1. Homebrewをインストールする


$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"


//バージョンの確認
$ brew -v
//アップデート
$ brew update

2. Node.jsの管理アプリ、Nodebrewをインストール&セットアップする


$ brew install nodebrew  /* usr/local/Cellar/ にインストールされる */
$ nodebrew setup         /* ~/.nodebrew/ にインストールされる */


//バージョン確認
$ nodebrew -v

3. ファイルの場所を指示する（パスを通す）。.bash_profileファイルに以下が追記される。


//追記内容
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
//追記した内容を反映させる
$ source .bash_profile

//※ファイルがない場合は作成する
$ touch .bash_profile

4. Nodebrewを使ってNode.jsのインストール


$ nodebrew install-binary stable  /*stable:安定版、latest:最新版*/


/* 複数入れている場合のバージョン選択 */
$ nodebrew list  /*リストが出ます。currentは現在使用しているバージョン*/
v10.14.2
v12.15.0

$ nodebrew use v12.15.0 /*バージョン指定する*/
use v12.15.0

5. node, node-sassのバージョン選択


$ node -v    /*nodeのバージョン*/
v12.15.0

$ npm node-sass -v      /*node-sassのバージョン*/
6.13.4

バージョン確認するとインストールされていることが確認できる

Sassのインストール

1. 自分の開発用フォルダへのパスを入れ、プロジェクトフォルダに移動します


$ cd ~/job/stg/8001-scss

2. 開発フォルダ内にpackage.jsonファイルを作成する


$ npm init -y

3. 開発フォルダ内にnode_modulesフォルダを作成する


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

$ npm node-sass -v /*バージョン確認*/

4. package.jsonに追記


"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",  ←この行削除
  "build": "node-sass ./scss --output ./css",             ←追加
  "watch": "node-sass ./scss --output ./css --watch"      ←追加
},

NetBeansの設定

オプションウィンドウのHTML/JS → Node.jsタブをクリック
Nodeパス

~/.nodebrew/current/bin/node

npmパス

~/.nodebrew/current/bin/npm

HTML/JS → CSSプリプロセッサタブをクリック

~/job/stg/8001-***/node_modules/.bin/node-sass

NetBeansのプロジェクトタブを右クリックし「npmスクリプト」「watch」をクリックするとnode-sassのスクリプトが起動します。（buildやwatchはpackage.jsonのscriptsに記述したものです）

watchを起動しておくと、scssファイルを保存と同時にcssフォルダに同名のcssファイルが生成されます。別のプロジェクトフォルダに「Sassのインストール」の1〜4を行うことで、オプションを変更せずに使用できます。

#6 SCSSの使い方

SCSSにより変数と関数を使えるようになり非常に便利です。

変数を使う

変数という箱に色や数値を入れておき、各プロパティの値に変数名で指定することで、変数に代入している値を変えるだけで変数を使っているすべての箇所変わります。


$colorA:#f3bebe; /* 文字列の頭に$をつけて変数の扱いになる */
$sizeB:12px;

.bg{
  background-color:$colorA;
}
.area{
  font-size:$sizeB;
  background-color:$colorA;
}
.navi{
  font-size:$sizeB;
}

↓


.bg {
  background-color: #f3bebe; }
.area {
  font-size:12px;
  background-color: #f3bebe; }
.navi {
  font-size:12px; }

関数を使う

関数は自分で作る独自関数と、あらかじめ作られているネイティブな（ビルトインされた）関数の2種類があります。 Sassのネイティブ関数

@function 関数名($引数) {
　　@return 戻り値;
　}


/*独自関数を作る*/
@function Round-pixel($i) {
  @return round($i)+px;  /*ネイティブのround関数 = 小数点の四捨五入*/
}

/*使い方*/
.selector{
  width: Round-pixel(123.656);
}

↓出力結果


.selector {
  width: 124px; }

変数とメディアクエリの初期設定

SCSSでメディアクエリを使うときに便利になる書き方の初期設定です。
今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。


/* マップ $map:(key: value)  各幅の値を登録しておく */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1230,
  'xxl': 2000,
) !default; /*変数定義前に自動で値を代入させるため*/

@mixin mq($mq, $bp1:lg, $bp2:lg){        /* @mixin = 引数によってスタイルの設定を細かく指示 */
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);  /* $breakpoints = マップ、から値を取得(map関数) */
  $min1  : 'min-width: #{($w1+1)}px';    /* xxx-width: と1px調整 */
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;  /* @includeしたとき「プロパティ:値」をココに挿入させる */
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}

以下のように使います


#contents_wrap{
  margin: 0 auto;
  padding:5px;
  @include mq('max','md'){ /*769pxまで*/
    width:800px;
    padding:8px;
    position:relative;
    border: 1px solid #F00;
  }
  @include mq('min-max','md','xl'){ /*770px以上、1230pxまで*/
    width:95vw;
    border: 1px solid #00F;
  }
  @include mq('min','xl'){ /*1231px以上*/
    width:1200px;
    padding:10px;
    position:relative;
    border: 1px solid #FF0;
  }
}

↓出力結果


#contents_wrap {
  margin: 0 auto;
  padding: 5px; }
  @media screen and (max-width: 768px) {
    #contents_wrap {
      width: 800px;
      padding: 8px;
      position: relative;
      border: 1px solid #F00; } }
  @media screen and (min-width: 769px) and (max-width: 1230px) {
    #contents_wrap {
      width: 95vw;
      border: 1px solid #00F; } }
  @media screen and (min-width: 1231px) {
    #contents_wrap {
      width: 1200px;
      padding: 10px;
      position: relative;
      border: 1px solid #FF0; } }

#4 IDE(統合開発環境)のインストール

IDEとは

NetBeansの最新版をダウンロード

開発環境用のプロジェクトフォルダを作る

NetBeansにプロジェクトを追加する

フォントのカスタマイズ

テーマの変更

#5 Sassを使ってCSSを効率的に記述する

Sassは複数あるCSSのメタ言語の一つ

Nodebrew（ノードブリュー）とNode.jsのインストール

インストールの手順

1. Homebrewをインストールする

2. Node.jsの管理アプリ、Nodebrewをインストール&セットアップする

3. ファイルの場所を指示する（パスを通す）。.bash_profileファイルに以下が追記される。

4. Nodebrewを使ってNode.jsのインストール

5. node, node-sassのバージョン選択

Sassのインストール

NetBeansの設定

#6 SCSSの使い方

変数を使う

関数を使う

変数とメディアクエリの初期設定

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

◎応用1（フロントエンドエンジニア初級）

◎応用2（フロントエンドエンジニア中級1）

◎応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア上級）

実践2（バックエンド基礎）

実践3（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

#4 IDE(統合開発環境)のインストール

IDEとは

NetBeansの最新版をダウンロード

開発環境用のプロジェクトフォルダを作る

NetBeansにプロジェクトを追加する

フォントのカスタマイズ

テーマの変更

#5 Sassを使ってCSSを効率的に記述する

Sassは複数あるCSSのメタ言語の一つ

Nodebrew（ノード ブリュー）とNode.jsのインストール

インストールの手順

1. Homebrewをインストールする

2. Node.jsの管理アプリ、Nodebrewをインストール&セットアップする

3. ファイルの場所を指示する（パスを通す）。.bash_profileファイルに以下が追記される。

4. Nodebrewを使ってNode.jsのインストール

5. node, node-sassのバージョン選択

Sassのインストール

NetBeansの設定

#6 SCSSの使い方

変数を使う

関数を使う

変数とメディアクエリの初期設定

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

◎応用1（フロントエンドエンジニア 初級）

◎応用2（フロントエンドエンジニア 中級1）

◎応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 上級）

実践2（バックエンド 基礎）

実践3（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

Nodebrew（ノードブリュー）とNode.jsのインストール

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

◎応用1（フロントエンドエンジニア初級）

◎応用2（フロントエンドエンジニア中級1）

◎応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア上級）

実践2（バックエンド基礎）