web制作のしおり

日々の学習をアウトプットします。

86.復習しよう③　～Sassについて～

復習シリーズ第３弾。

本日はSassについて。

 

早速やっていきましょう。

 

Sassとは

SassはSyntactically Awesome Style Sheetsの略です。

CSSの拡張言語で、CSSを楽に書くための言語です。

JavaScriptとjQueryの関係に似てますね。

 

Sassを覚えてからというもの、

CSS　＝　Sassくらいの認識で書いていた気がします。

それくらい自然に使えますし、楽に書くことができます。

 

Sassの特徴

入れ子構造

CSSではセレクタの親子関係を示すのに、タグ名やクラス名を親が左に来るように区切りごとに半角スペースを入れて並べて書いていく必要がありました。

Sassでは直感的に親子関係は入れ子にすることで表現できます。

 

また、疑似要素を書く時も＆をつけて入れ子として書くことで適用されるのもわかりやすいですね。

a{

　　&:hover{

　　　　　　}

}

 

変数

Sassは$マークを頭につけることで、変数を定義することができます。

サイトごとにメインで使うカラーを変数に定義しておくことで、カラーを都度確認する手間を減らしたりと活用次第で大きく時間短縮につながるのが魅力です。

 

@mixin

これはかなり便利な仕組み、定義済みのスタイルを使い回すことができます。

メディアクエリや共通部分をmixinにすることで、かなり楽になります。

 

関数

これは他のプログラム言語と同じように、引数、返り値を使い処理を行います。

 

@use

別のSassファイルを読み込むことができます。

機能や目的ごとにファイルを分割して、メインのstyle.scssに読み込んで使う等

管理がしやすくなります。メイン以外のSassファイルには先頭に_（アンダーバー)を付与する必要がある点に注意が必要です。

 

また、最終的にSassはCSSに変換してブラウザが読み込むので、jQueryの懸念として上がっていたパフォーマンス問題はSassの場合には気にしなくて良さそうです。

 

Sassは本当に便利で、使わない理由が見当たらないくらいです。

環境さえ整えてしまえば、もうCSSをそのまま書くという状態には戻れませんね。

感謝です。

 

１点注意があって、Sassは入れ子構造で書きやすいがゆえに、入れ子にしすぎてしまうケースがあります。

この場合は可読性が下がってしまうので、２階層ぐらいまでの使用に留めるのが良さそうです。

今日のまとめ

  • SassはCSSの拡張言語、CSSを楽に書けるようにした言語。
  • Sassは書きやすい事はもちろんのこと、@mixinや@use等再利用や管理の側面でも使いやすくなっている。
  • 入れ子構造は使いやすいが、深くなりすぎないように注意。

 

本日はSassについて復習してきました。

セレクタの指定がちょっと曖昧な箇所があったので、細かいところは別途復習したいと思います。

 

では、また。

85.復習しよう②　～JavaScriptとjQuery～

本日は復習編第２弾

JavaScriptとjQueryについてです。

 

正直、忘れてしまっている気がする。

早速やっていきましょう。

 

JavaScriptとは

HTMLとCSSとは違い、プログラミング言語。

DOMというウェブページとプログラミング言語をつなぐ仕組みを使うことで、JavaScriptはブラウザ上のHTMLを参照、操作することができます。

何が言いたいかというと、

ブラウザに表示されているページに動きをつけられる。

という事です。

 

ちなみにDOMのような仕組みの総称をAPI(Application Programming Interface)

と言うそうです。

 

具体的にどんなことができるかと言えば、

  • 条件を指定して、合致するときだけ処理をする
  • ユーザーの操作を検出して、処理を実行する（イベント検出)

また、賢者達が作成し、提供されているライブラリという便利な道具を使うことで

いろいろな実装が手早くできてしまうのも魅力の１つです。

 

ライブラリには

  • スライダーをカンタンに実装できるSwiper
  • スクロールに合せてアニメーションをさせるWOW

こんなものがあります。

これらのライブラリは特別なことをやっているのではなく、

あくまで、HTML、CSS、JavaScriptを使ってコア部分を作成して提供してくれているイメージです。

なので、使用者はライブラリを手順通りにHTML、CSS、JavaScriptをファイルとして読み込んだり、適宜追記してあげるだけで利用できるわけです。

 

何をしているのかがわかればカスタマイズは可能なので、やはりJavaScriptも基本が大切になってくると思います。

「なんとなくやったらできた」では、不具合が起きた時に対処ができません。

私はそれが気持ち悪いので、大概は基本を自分の言葉でざっくり説明できようになるまでやります。

 

jQueryとは

こちらもJavaScriptライブラリの１つです。

ですが、先程例にあげたSwiperやWOWのように

特定の機能を実装するライブラリではなく、

JavaScriptをカンタンに短く書く為に作られたモノです。

 

jQueryを使うことで、大幅にコードの記述量が減ります。

ライブラリ様々です。

 

ですが、懸念点もあります。

パフォーマンスでは純粋なJavaScriptに劣るところですね。

結局jQueryはJavaScriptで書かれたライブラリなので、

裏ではJavaScriptで書かれたコードが存在し、処理されています。

 

とは言え、カンタンに書けたりブラウザ間の挙動差を吸収してくれたりと

メリットが多いのも事実です。

 

パフォーマンスやJavaScriptのライブラリでの実装を求められなければ、

jQueryを選択して良いのでは無いかと思います。

 

今日のまとめ

  • JavaScriptはDOM(API)を使ってブラウザ上のHTMLを操作することができる
  • ライブラリが豊富なので、自分で０から実装しなくても良い場合がある
  • jQueryはJavaScriptをカンタンに書くためのライブラリ。
  • jQueryをメインで使っていく場合でも状況によっては、JavaScriptを選択する必要がある

JavaScriptの基本はしっかり押さえておいて、ライブラリが何をしているかは理解して使いたいですね。

 

では、また。

84.復習しよう①　～HTML・CSS～

最近、前に進めてはいるのですが、消化不良な感じがしていました。

 

なので、この辺りで今までの学習を振り返っていきます。

 

「やりきること」は１つの「目標」ですが、「目的」はちゃんと使える力を身に着けて「稼ぐこと」なのでしっかりとやっていきます。

 

今回はHTMLとCSSについて。

ではさっそくやっていきましょう。

 

HTML

タグでテキスト（コンテンツ）を囲って書いていくマークアップ言語というものです。

ブラウザはこのHTMLを解釈して、ルールに基づいてWebページを表示してくれます。

 

このブログも右クリックで「ソースを表示」すれば、HTMLを見ることができます。

 

また、タグには様々な「属性」を指定して、情報を持たせることができます。

 

href、class、imgなどがよく使いますね。

 

また、タグで囲まれたコンテンツのまとまりを要素と言い基本的に要素単位で記述していきます。

 

要素には入れ子やブロック要素、インライン要素などの性質があり、

それらを把握することで思い通りのWebデザインへの一歩近づきます。

 

まとめると

HTMLはタグでテキストを囲う形を１つの単位として書き、それを要素という。

要素には様々な性質があり、入れ子にしたり、属性を付加することでWebページの骨組みを作っていく。

こんなところです。

 

ただ、HTMLは本当にキッチリ理解に徹する方が後々の為になります。

Webページのベースの知識なので、構造の理解はしっかりしておきたいですね。

 

CSS

CSSは基本単体では使いません。

HTMLと組み合わせてWebページのデザイン部分の記述をするテキストファイルです。

その書き方はHTMLのタグや、属性等のデザインを適用する範囲を指定して、

隙間、文字サイズ、色、背景画像などを適用できます。

 

ここでも基本となるHTMLの「要素」について理解をしておくことが大切です。

入れ子や、クラス、インライン、ブロックラインなどがわかっていないと

デザインの適用がうまくいかないことが多々あります。

 

また、デザインの適用がうまくいかなかったり、あまり考えずにデザインを適用していくと、保守性（メンテナンスのしやすさ）がガタ落ちします。

こうした事を防ぐために、CSS設計という考え方があり、

私はBEMを学びました。

 

可能であればCSS設計に触れることをオススメします。

根拠を持ってHTML(CSSを適用させる部分)を書くことができるようになります。

 

 

今日のまとめ

  • HTMLがすべての基礎。本当に大事。構造、性質は特に理解しておきたい。
  • CSSは見た目が反映されるのでわかりやすい。
  • CSSはコードが散らかりやすいので、CSS設計を学ぶと良い。

 

今日は基本中の基本について復習しました。

最初のころに比べて、意識することが変わったように思います。

少しは成長しているかな。

 

では、また。

83.SQLを使おう　～データベースを操作する～

本日はSQLについて

 

データベースを操作する為の言語でしたね。

 

早速やっていきましょう。

 

データを取り出す

データベースからデータを取り出す為には、昨日学習したテーブル、カラムをSQLで指定します。

下記テーブルを例にして操作を行っていきましょう。

 

どこのテーブルの、どこのカラムのデータを取得するかを指定するには

 

SELECT カラム名 FROM テーブル名

 

この記述で指定します。

 

ですので、今回はtestテーブルのnameカラムのデータを取得したいので

SELECT name FROM test;

 

このように記述します。

すると出力結果として

はなこ

たろう

さんた

が取得できるわけです。

 

また、カラム名の代わりに「*」を使用することで、すべてのデータを指定することができます。

 

SELECT * FROM test;

 

とすると、テーブルがそのまま出力されるイメージです。

 

条件を指定して取り出す

指定条件に一致したデータを取得する方法があります。

WHEREキーワードをテーブルを指定した後に記述します。

 

SELECT カラム名 FROM test WHERE カラム名 = 値;

※(=の部分は比較演算子を使います。=、!=、<、>、<=、>=などです)

 

例えば、genderの値が男のデータだけを取出したい場合

 

SELECT * FROM test WHERE gender ='男';

 

これで、テーブルのすべてのデータの中のgenderカラムの値が男のデータだけを取り出せるわけです。

 

2,たろう,男,14

3,さんた,男,54

 

このようにデータが取得できます。

 

仮に男の名前だけを取り出したいとなった場合には

 

SELECT name FROM test WHERE gender ='男';

 

単純にカラム名にnameを指定するだけですね。

 

SQLは直感的でわかりやすいですね。

 

テーブルにデータを追加する

データを追加するにはINSERTを使います。

書き方は下記のように記述します。

INSERT INTO テーブル名 VALUES(カラムに従ったデータをカンマ区切りで記述),

 

なので、今回のtestテーブルに新しいデータを追加する場合は

 

INSERT INTO test VALUES(4,'たかひろ','男','33');

 

これでテーブルは

このように変化します。

 

 

テーブルのデータを変更する

テーブルのデータを変更する場合はUPDATEを使います。

書き方は下記のように記述します。

UPDATE テーブル名 SET カラム名 = '値' WHERE カラム名 比較演算子 '値';

 

WHEREでカラムと値で指定していますが、ここでは行を選択しているイメージですね。

そして、選択されている行のSETで指定したカラム名のデータを変更する

こんな感じです。

 

なので、今回のtestテーブルのたかひろの名前を変更したい場合は

 

 

UPDATE test SET name = 'ひろし' WHERE id = 4;

 

これで、testテーブルのカラム idの値が4番の行を選択（nameの値はたかひろ)して

カラムname の値を 'ひろし'に変更しているわけです。

この時点のテーブルは下記

 

このように変化しています。

 

テーブルのデータを削除する

削除といえば…そう！DELETEですよね。

 

書き方は

DELETE FROM テーブル名 WHERE カラム名 比較演算子 '値';

このように記述します。

 

WHEREで指定した条件に合致する行が削除されるイメージです。

 

なので今回のカラムnameの値が'ひろし'の行を削除したい場合は

 

DELETE FROM test WHERE name ='ひろし';

これでnameカラムの値が'ひろし'の行が削除されます。

このようにテーブルが変化しました。

 

 

新しいテーブルを作る

最後に新しいテーブルを作ってみます。

CREATE TABELを使います。

 

CREATE TABEL テーブル名(カラム名 データ型 , カラム名 データ型 … );

 

のように記述します。

 

test2テーブル、カラムはidとnameとscoreがあるテーブルを作成してみましょう。

 

CREATE TABEL test2(id int,name varchar(255), score int) ;

※varchar(255)は可変長文字列型だそうです。255は長さ。variant characterの略だそうな。

 

 

こんな感じのテーブルが新規作成されました。

nullは「存在しない」とか「ゼロの」という意味です。

データを入れていないので当然ですね。

 

復習がてらデータを２つ追加して、その後にスコアを変更するSQLを書いてみます。

 

INSERT INTO test2 VALUES(1,'しんじ',98);

INSERT INTO test2 VALUES(2,'まさし',53);

UPDATE test2 SET score = 31 WHERE name = 'まさし';

 

これがすべて実行された後のテーブルは

このような状態になっています。

 

SELECT name FROM test2 WHERE score = 98;

 

とすることで

「しんじ」が出力されますね。

 

大分なれた気がします。

 

今日のまとめ

  • SELECTでカラムを指定する
  • FROMでテーブルを指定する
  • UPDATEでデータを更新する
  • WHEREで対象を指定する
  • DELETEでロウを削除する
  • INSERTでロウを追加する
  • CREATE TABLEでテーブルを新規作成する

 

ようやくPHP、SQLの基礎知識部分が終了です。

明日は、一旦整理してからWordPressの学習を進めて行きたいと思います。

 

では、また。

82.データベースを知ろう　～SQLで操作する～

なぜ、ここに来てデータベースなのか。

というかデータベースとは何なのか。

本日はやっていきたいと思います。

 

何故データベース？

今後、学習する「WordPress」においてデータベースの基本的な知識くらいは必要になるからです。

PHPを学習するときにも「WordPress」の為に！

的な感じで学習をスタートした気がします。

PHPとデータベースの両方を使ってサーバー側で処理をするのでしょう、たぶん…。

 

データベースとは？

構造化した情報またはデータの組織的な集合。だそうです。

情報、データをわかりやすい形でまとめて構造化、管理しているものくらいのイメージでよさそうです。

 

どうやってデータを管理しているのか

データベースを作るにしても、管理するにしても、データを取り出すにしてもどうやってできているのかがわからなければ、やりようがありませんよね。

 

データベースはエクセルの表のような形式でデータを管理しています。

 

もっと突っ込んで言うと、列と行で管理しています。

縦軸のマスが列、横軸が行ですね。

そして、列は項目を表し、行は１件のデータを表しています。

例を見てみると、

名前、性別、年齢の3種類があるので、3列。

データは3件存在しているので、3行。

列のことをカラムといい、行のことをロウと呼びます。

また、この表自体のことテーブルと言います。

テーブルはエクセルだと「シート」の部分に該当しますね。

 

こうした、カラム、ロウ、テーブルといった単位で条件を指定したりして、

目的のデータ達にアクセスするわけです。

 

データベースを操作する為の言語

プログラミング言語とはまた違って、データベースに対してデータを要求するような言語があります。

今回は「SQL」というデータベース言語で進めていきます。

因みにSQLはStructured Query Languageの略で、構造化問い合わせ言語なんて言われるようです。

 

SQLをテストする為の環境を準備する

repl.itというサービスを使ってSQLを学びます。

www.naka-sys.okinawa

repl.itの説明は上記サイト様に譲ります。

 

今回はSQLiteという言語を選択して、進めていきます。

 

本日はここまでにして、SQLでのデータ操作に関しては明日以降進めていきたいと思います。

 

今日のまとめ

  • データベースはエクセルの表のようなテーブル、カラム、ロウでデータを管理している
  • SQLはプログラミング言語ではなくデータベースの操作を行う言語（データベース言語)
  • データベースはWordPressを使っていく上で、知っておくべき内容。

 

本日はデータベースとSQLについて、学習してきました。

明日は実際にSQLでデータベースの操作を行っていきます。

 

では、また。

81.アクセス修飾子ってなんだ？　～クラスのプロパティやメソッドへのアクセス権～

本日はアクセス修飾子について。

 

先日クラスを学習した際にチョロっと登場していたアイツについて。

 

では、やっていきましょう。

 

アクセス修飾子って何？

アクセス修飾子には

  • public
  • private
  • protected

の3種類があります。

これが何に使われるのかと言えば、

「クラスのプロパティ、メソッドへのアクセス権の設定」といったところです。

 

実際のコードでは

public $name;

private $adress;

protected $test; 

 

のような記述でプロパティやメソッドの先頭に各々付ける形で使われます。

いやいや、待って。

アクセス権？何それ？ですよね。

詳しく見ていきましょう。

 

アクセス権は外部と内部という区分けで付与

アクセス権はクラスの内部、外部という区分けでアクセスを制限する目的でつけるものです。

「クラスの中からはアクセスしていいけど、他のクラスからアクセスはしないでね。」

これがprivate

 

「誰でも好きにアクセスしていいよ。」

これがpublic

 

「クラスの中とその子クラスはアクセスしていいよ、それ以外はアクセスしないでね」

これがprotected

です。

 

protectedは継承というクラスの仕組みを使った場合に関わってくるそうです。

沼にハマりそうなので、protectedはここでは割愛します。出てきて必要になった時に学習しましょう。

 

publicとprivateを使ってみる

単語の意味から、そのまんまのアクセス権だなという印象ですね。

使い分けの例があるといいですね。

 

例えば、

クラスからインスタンスを生成する場合のコンストラクタを例に考えてみましょう。

 

まずはクラスの定義から。

class TestClass{

　　public $name;

　　private $price;

 

　　public function __construct($name, $price){
　　　　$this->name = $name;

　　　　$this->price= $price;
　　}

}

 

こんな感じで、name、priceプロパティにそれぞれpublic、privateのアクセス修飾子を付与。コンストラクタにも当然publicを付与（インスタンス生成するのは外部ですので）

 

次はインスタンス生成

$tester = new TestClass("テスト商品","900円");

 

testerというインスタンス名で、プロパティにはそれぞれ、nameにテスト商品、priceに900円が設定(代入)されています。

 

ここで、名前や価格を変更してみましょう。

 

$tester->name = "優良商品";

$tester->price = "1200円";

 

こうですね。

ここでようやくアクセス修飾子の出番です。

nameはpublicなので、そのままインスタンスのnameプロパティに優良商品という文字列が代入されます。

しかし、priceはprivateなので、外部からのアクセスができず、エラーが発生してしまうのです。

 

private不便じゃない？

私も思いました。

このpublicやprivateの使い分けは1人だと恩恵は少ないかもしれないです。

ですが、チームで仕事をしている場合に意図しない箇所からの変更を防いだりするなどメリットがあるようです。

 

時間が経過してから自分がコードを改めて見た時に、そのプロパティやメソッドを外部から利用・変更していいのかどうかを意識付ける等。

保守面での活躍がメインなようです。

 

今日のまとめ

  • アクセス修飾子は3種類ある
  • 主に使うのはprivateとpublic
  • 保守性を上げるためにも明確に使い分けをすると良い

 

今日はアクセス修飾子についてやってきました。

 

クラス関連のこと学んでいると知らない横文字が多すぎて、調べ始めると沼にハマって寝れなくなりそうです。

 

では、また。

80.クラスからインスタンスを生成する　～テンプレートと作成物の関係～

本日はインスタンスについて。

調べているとクラスが型で、インスタンスが実体という説明をよく目にします。

これが自分でイメージが湧くように咀嚼・整理していきたいと思います。

 

クラスとインスタンスの関係

似たようなものをいくつも作れる仕組みという話を聞くのですが、

「似たようなもの」をクラスとして最初に定義しようとすると難しい気がします。

 

考え方を逆方向にして見た時に割りとイメージできたので、書いていきます。

 

果物屋を例に考えてみる

お店には

  • りんご

  • ばなな

  • もも

  • なし
  • かき

が売っています。

 

それぞれ、果物の名前、値段、産地が記載された紙もついています。

ただ、これは店主や店員が各々に作ったもので文字の大きさや、文字の色、各順序等が統一されていませんでした。

 

再利用もできず、新しい果物が入荷する度に都度、紙を手書きで作成していたのです。

 

統一されていませんが、中の情報は基本的に同じ。

だったら、決まりを作って毎回それを使って値札を作ろう！

と店主は考えました。

 

値札に書くものは、名前、産地、値段、文字の色は黒で

果物が売り切れたら、値札を発注用の箱に入れるルールに

 

…。

お付き合いありがとうございました。

そう、この流れがクラスとインスタンスの関係がイメージ湧きやすいなと。

今回の場合だと、もともとは値札の代わりに紙に手書きで毎回使っていました。

これがプログラムだと、個別に書かれた商品用の連想配列などに相当しますよね。

で、統一して使いまわしたいという店主の考えによって作られたのが

データと処理を持ったクラス

ここでは、名前、産地、値段、文字色の「データ」と

発注の「処理」を持った値札「クラス」を作ったイメージです。

 

そして、値札のルールによって作られた「りんごの値札」、「ももの値札」がインスタンスというわけです。

 

「クラス」ありきで考えるより、私はイメージがわきやすかったなという印象です。

 

長くなりましたが、コードで確認してみると

class PriceTag{

　　public $name;

　　public $producingArea;

　　public $price;

　　public $color;

 

　　public function __construct($name, $producingArea, $price, $color){
　　　$this->name = $name;

　　　$this->producingArea = $producingArea;

　　　$this->price= $price;

　　　$this->color = $color;
　　}

 

　　public function OrderFruit(){

　　　$orderFruitName;

          $orderFruitName = $this->name;

　　　～処理～

　　}

}

 

こんな感じですね。

次はインスタンスを実際に生成する方法を確認します。

 

インスタンスを生成

クラスからインスタンスを生成するにしても、インスタンスを入れておく「箱」、

つまり変数が必要です。

今回はパイナップルの値札インスタンスを生成します。

$pineapple = new PriceTag("パイナップル","沖縄","700円","黒");

 

これで、$pineappleという変数にPriceTagクラスから生成されたインスタンスが代入されました。

インスタンスの生成をする際は下記のように記述します。

new クラス名(コンストラクタの引数)

コンストラクタはインスタンス生成時の初期設定のような物でしたね。

今回のPriceTagクラスだと、

public function __construct($name, $producingArea, $price, $color){

～処理～

}

この部分がコンストラクタです。

引数が４つあるので、パイナップルの値札を生成するときも引数を４つ指定していますね。

$インスタンスを入れる変数 = new クラス名(コンストラクタの引数);

この形で覚えておきましょう。

また、$インスタンスを入れる変数の名前を、

そのままインスタンス名と呼ぶそうです。

 

インスタンスを使う

例えば、

パイナップルの値札インスタンスの値段を知りたい場合

 echo $pineapple->price;

とすることで、値段が出力されます。

これは、$pineappleインスタンスのプロパティ「price」のデータを出力してね。という意味ですね。

 

パイナップルの値札を発注処理に回したい場合は、

$pineapple->OrderFruit();

これで、$pineappleインスタンスのOrderFruitメソッドが実行されます。

 

基本的にインスタンスの何かにアクセスする場合は

インスタンス名->プロパティorメソッド

の形で行います。

 

今日のまとめ

  • クラスは型、インスタンスは実体。というより、個体をまとめられるテンプレート的存在がクラスで、インスタンスは個体のイメージ。
  • インスタンスを生成するときにはnew クラス名()というキーワードを使う。
  • new クラス名()でインスタンスを生成した時に、コンストラクタが実行される。
  • new クラス名()の（）にはコンストラクタに渡す引数を記述する。

 

インスタンスとクラス、だいぶ長くなりましたが掴めてきた気がします。

もっとカンタンにスパッと「こういうものです。」と説明できるくらい理解したいですね。

 

では、また。