プログラミング | cocoro https://bell-cocoro.org/blog cocoro ~日常に遊び心をWebデザイン学生のブログ~ Tue, 26 Oct 2021 14:28:33 +0000 ja hourly 1 https://wordpress.org/?v=6.5.2 https://bell-cocoro.org/blog/wp-content/uploads/2021/10/cropped-175_t_hoso-32x32.png プログラミング | cocoro https://bell-cocoro.org/blog 32 32 211969492 scssの使い方 メリット・デメリット https://bell-cocoro.org/blog/2021/10/26/scss%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9-%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88%e3%83%bb%e3%83%87%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/ https://bell-cocoro.org/blog/2021/10/26/scss%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9-%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88%e3%83%bb%e3%83%87%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/#respond Tue, 26 Oct 2021 05:34:39 +0000 https://bell-cocoro.org/blog/?p=247

scssってなに？

Scssとは、CSSを効率的に書くことが出来るメタ言語のことです。

正式名称は「Syntactically Awesome StyleSheet」の略で、直訳すると「文法的に素晴らしいスタイルシート」です。

なんかかっこいいですね〜(^o^)

Scssを使うことで、CSSよりも作業効率やメンテナンス性が向上し、コードの記述量も減らすことが出来ます。

一度Scssで書くことに慣れてしまったら、もうCSSには戻れないですね…。

効率よく勉強するために、Scssを使っていきましょう！

VSコードでScssを作ろう！

scssのメリット・デメリット

便利なscssですがもちろんメリット・デメリット両方あるので紹介していきます

メリット

コーディングの作業効率がUP！！

理由としては

  • ネストを使用することで、セレクタやプロパティの記述量が減ります。
  • 一度定義したスタイルは後で簡単に呼び出せます。
  • 複雑なコードも再利用できます。

メンテナンス性がUP！！

  • 変数で値を使い回すことができる
  • 四則演算ができる
  • 関数が使える

例として、メインカラーやサブカラー、カラムの幅など、よく使うものを変数にしておくことで、たった1箇所の変数を書き換えれば、同じ変数を使っている部分の修正が全て済んでしまいます。

他にもいろいろと便利なことがあります

デメリット

環境を準備するのがめんどくさい

Sassファイルはそのままではブラウザで認識できません。なので、「コンパイル」という作業をして、CSSに変換してあげる必要があります。そのために必要なツールをインストールしたり設定をしたりしないとならないのが難点です。これが面倒で導入しない方も多いです。

全ての人がSassを導入しているわけではない

最大のデメリット。例えば公開まではこちらで作業をして、公開以降はクライアントでメンテをしていくなんて場合も多いでしょう。逆も然りで、クライアントの既存サイトを修正していくこともあります。そんな場合、クライアント側がSassを導入していなければCSSを編集していくことになり、Sassは使えなくなってしまいます。

環境を準備使用

scssを書く環境を作りましょう。

今回は、VSコードでscssを書く方法を紹介していた記事を見つけたのでそちらを参考にしてください。

「VSコードでScssを作ろう！」

sccsの書き方

ネスト

セレクタをネストで書く

HTML

<nav>
   <ul>
      <li><a href="">TOP</a></li>
      <li><a href="">デザイン</a></li>
      <li><a href="">プログラミング</a></li>
      <li><a href="">商品</a></li>
   </ul>
</nav>

CSS

nav {
  padding: 0 20px;
  background: #fdbebe;
}

nav ul {
  list-style: none;
}

nav a {
  text-decoration: none;
}

SCSS

nav{
  padding: 0 20px;
  background: rgb(253, 190, 190);
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
}

変数に代入して使い回し

CSS

body{
 background:#ccc;
}
header li a{
color:#fdbebe;
}
footer{
 background:#ccc;
}

SCSS

$main-color:#ccc;
$sub-color:#fdbebe;
$main-font:serif;


body{
 background:$main-color;
}
header li a{
color:$sub-color;
font-family:$main-font;
}
footer{
 background:$main-color;
}

まとめ

今回は、scansの使い方を説明しました。まだまだ、便利な機能や書き方はあるので興味を持った方は調べてみてください。

]]> https://bell-cocoro.org/blog/2021/10/26/scss%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9-%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88%e3%83%bb%e3%83%87%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/feed/ 0 247 JavaScript 絶対に身につける　”超入門” 　基礎04 https://bell-cocoro.org/blog/2021/10/24/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80-%e3%80%80%e5%9f%ba%e7%a4%8e04/ https://bell-cocoro.org/blog/2021/10/24/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80-%e3%80%80%e5%9f%ba%e7%a4%8e04/#respond Sun, 24 Oct 2021 14:59:12 +0000 https://bell-cocoro.org/blog/?p=179 はじめに

JavaScriptを絶対身につけるをテーマに学習していこうと思います。『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』を参考に記事を書いています。

DOMとDocumentオブジェクト

DOM

Webブラウザは、HTMLファイルを読み込み、Webページを表示します。JavaScriptのプログラミングは、このWebページを直接操作できません。DOM(Document Object MOdel)と呼ばれる、文章を構造化したものを通して HTML文書を 利用するための仕組みです。

DOMツリー

上の図のように、<html>タグを頂点とするツリー構造を持ち、この階層のことを DOM（Document Object Model）ツリーと言います。

ノード

DOMはWebページの内容を、ツリー状に構造化したものです。 開始タグから終了タグまでの塊、属性、テキストをすべて ノード(Node)と呼びます。HTMLタグに対応するノードや、内部の文字列に対応するノード、コメントに対するノードなどで、DOMのツリーは構成されます。
一番の元になるノード（html）のことをルートノードと言います。

Windowオブジェクト(Windo)

Windowオブジェクト使う準備

Windowオブジェクト は、ブラウザのウィンドウそのものをあらわす大きなオブジェクトで、Webページが表示されるコンテンツ領域(Documentオブジェクト)を始めとする様々なオブジェクトを束なています。

ウィンドウ(タブ)の生成と同時にwindow(先頭が小文字)という名前のグローバル変数が内部的に生成されるので、自分でインスタンス化しなくてもすぐに使えます。

Windowオブジェクトのプロパティ(内部オブジェクト)

Windowオブジェクトは、たくさんの内部オブジェクトをプロパティとして持っています。

主要な内部オブジェクト

Windowオブジェクトのプロパティやメソッドを使うときはオブジェクト名の”Window”を省略できます。

オブジェクト記法

名前と値のペアをプロパティ、値のつける名前のことをプロパティ名と言います。オブジェクトは{}で括って定義しプロパティ名と値を:(コロン)で区切り、ペアを,(カンマ)で区切ります。Windowオブジェクトもこの記法で表現できます。

Windowオブジェクトの操作

入れ子 になっているプロパティは、次のように.(ピリオド)を複数つなげることで取得できます。

console.log(window.document.URL);//ファイルの場所が表示されます。

オブジェクトの操作は、現在のJavaScriptプログラミングでは、理解することが必須です。

  1. 取得は、オブジェクト名.プロパティ名(キー)もしくは、オブジェクト名[“プロパティ名(キー)”]
  2. 入れ子(ネスト)は.(ピリオド)もしくは、[](ブランケット)でつなぐ
  3. オブジェクト名.プロパティ名=値もしくは、オブジェクト名[“プロパティ名”]=値で、更新・追加ができる。

]]> https://bell-cocoro.org/blog/2021/10/24/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80-%e3%80%80%e5%9f%ba%e7%a4%8e04/feed/ 0 179 JavaScript 絶対に身につける　”超入門” 　基礎03 https://bell-cocoro.org/blog/2021/10/18/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80/ https://bell-cocoro.org/blog/2021/10/18/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80/#comments Mon, 18 Oct 2021 13:07:47 +0000 https://bell-cocoro.org/blog/?p=82

はじめに

JavaScriptを絶対身につけるをテーマに学習していこうと思います。『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』を参考に記事を書いています。

chapter03 配列を学ぼう

05 連想配列とは？

配列の問題点

以下のコードは受験者の一覧を出力する例ですが、受験者名の配列に新井太郎さんを書き忘れてしまいました。

//受験番号と受験者名の配列
let id= [20224,20031,20193];
let meibo = ["井上次郎","山本花子"]; //書き忘れた！
//受験者の一覧を出力
console.log(id[0] + meibo[0]); //20224:井上次郎
console.log(id[1] + meibo[1]);　//20031:山本花子

本当はmeibo[0]に新井太郎さんが入っているはずなのに、書き忘れたために要素番号がずれてmeibo[0]が井上次郎さんになり受験者の一覧がおかしくなっています

//20224:井上次郎
//20031:山本花子

受験番号と受験者名はセットで管理されるべきデータです。しかし、上のコードは受験番号名と受験者名が別々の配列になっているので、どちらかの配列が変わると順番が合わなくなってしまいます。

連想配列

JavaScriptには連想配列という特別な配列の書き方が用意されています。

連想配列は、配列要素を入れる箱に名前付きの鍵をかけた形になります

普通の配列との大きな違いは、meibo[“20031”]のように鍵の名前を指定して中身が取り出せる点です。鍵の名前があっていればよいので、配列要素が何番目に入っているかを気にする必要がありません。

連想配列という名前は、鍵の名前からデータの中身を連想できる配列から来ています。

連想配列ではなくオブジェクト

JavaScriptでは「連想配列」は使いません。他のプログラミング言語で言う連想配列のことを、JavaScriptではオブジェクトといいます。

『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』では「連想配列」で解説されていますが、JavaScriptでは「オブジェクト」、他の言語では「連想配列」と呼びますので、同じようなもの（keyとvalueのセット）と覚えておいてください。

オブジェクトの宣言と初期化

鍵の部分を“キー”と呼び、キーに対応するデータのことを値(value,あたい)と呼びます。このキーと値のセットをプロパティと呼びます。オブジェクトを宣言するには、キーと値を半角コロンでつなげたものを半角カンマで区切って書き並べ、全体を{}(オブジェクトリテラル)で囲みます。

let 変数名 = {キー:値, キー:値, キー:値};

オブジェクトの中身（配列要素）を取り出そう

キーを指定して取り出す

オブジェクトの中に入っているデータを取り出すには次のように書きます。

変数名["キー"]

オブジェクト（meib）の値(受験者名)をキー（受験番号）で取り出して、consoleに表示させてみよう。

let meibo ={
 20224 : "新井太郎",
 20031 : "井上次郎",
 20193 : "山本花子",
}
console.log("20031:" + meibo["20031"]); //受験者の20031の受験者名出力
20031:井上次郎

と出力されたら成功です。

オブジェクトの要素を取り出すとき、meibo[“20031”]のようにキーの両端に””で囲むことに注意しましょう。meibo[20031]にすると要素番号(添字)を意味します。

オブジェクトの中身(配列要素)を書き換える

]]> https://bell-cocoro.org/blog/2021/10/18/javascript-%e7%b5%b6%e5%af%be%e3%81%ab%e8%ba%ab%e3%81%ab%e3%81%a4%e3%81%91%e3%82%8b%e3%80%80%e8%b6%85%e5%85%a5%e9%96%80/feed/ 2 82