プログラミング独立の完全ロードマップ【完全無料笑】

どうもこんばんわ、乙pyです。
普段は会社でエンジニアとして働いていたり
プログラミング等の講師をしていたりもします。

1.はじめに

twitterのタイムラインを見ていたら

プログラミング独立の完全ロードマップ【月20万を稼ぐ道】

というのが有るみたいで、カリキュラムの内容を見ると
自分でもカリキュラムが作れそうだったので作ってみました。

どうやらこの本家カリキュラム
販売価格が「12万円」だそうです。

いやーーーーー
驚き桃の木山椒の木ブリキに狸に洗濯機(笑)

ですがこちらは
ほぼ同程度の内容で
お値段は・・・何と・・・・

期間限定(9999年5月9日まで)無料公開です。

お早目に閲覧ください!!!!!

さて
本家のプログラミング独立の完全ロードマップとは
プログラミングで「稼ぐこと」にフォーカスした教材
目標は月20万円で「ゴールから逆算」した設計です。

とあります。

ここのハードルが滅茶苦茶高いのではないでしょうか。

そもそもプログラムを組んだことが無い方
プログラミングで仕事をしたことが無い方 が
いきなりお金を取るような働きを
数か月で出来るようになるとは思えないのです。

ですので
この12万円という金額はある意味破格(笑)と言えるでしょう。

恐らくプログラミングで飯を食うには
一定以上のレベルが必要です。

そのレベルに達しなければ
雇ってもらったり、仕事をゲットしたりは難しいのではないでしょうか?

例えば、
自分がとあるプログラムやWEBサイトの構築を仕事で依頼するとして
何人かの中から一人に絞るとします。

その中で、「初めてプログラミングで仕事します」の人と
「10年やってこれだけのポートフォリオがありますの人」であれば
値段が同じであっても、異なっていたとしても後者の方に安心感が
あります。

時間や金額の制約で仕事を決めるとなったら安心感のある方を選ぶと
思うのでプログラミング初心者が仕事をゲットするのは
相当ハードルが高いです。

しかも現在そういう人たちが増えていて
競争も激化しているんです!!!!!!!!!

そんな中であなたはこれから
仕事をゲットできるでしょうか?
仕事をゲットする方法を思いつきますか???


ということで
自分のロードマップの方に入らせていただきたいのですが

まず完全初心者の方は
こちらの講座をご覧ください。

当然こちらも期間限定で無料です。

2.短時間で学べる初心者向けのプログラミング講座

note版

youtube版

一旦この動画を見てみて
プログラミングが続けられそうだ・・・

と言う事であれば
独立へのロードマップに進むことができると思います。

いくつか特典も用意しました。

・twitterフォローしていただきDM頂ければ、プログラミングに関する質問をある程度は返答出来ます。
忙しくなってきちゃったら返信できないこともあるかもしれません、無料なのでご容赦ください。
・Youtubeのチャンネルもやっていますので、リクエストが有れば動画化できます。
是非この講座を見ているのであれば、分からないことや知りたいことをリクエストしてみてください。

3.なんでこんなことをしているのか?

現在日本ではIT人材が足りておりません。
2020年以降、数十万人規模でIT人材が不足する試算が出ています。

しかし、プログラミング自体は息をすることと同じくらい
誰でもできることだと思っています。

学習したりするのに費用が発生したりすることが
プログラミング学習のハードルになっているのであれば
それを排除したいと思いました。

だれでもプログラミングできるようになれば
いづれ日本からもGAFAを超える人材が出てきてくれるのではないか
日本の産業を復活させるような人材が出てきてくれるのではないかと
思って活動をしております。

まずはみなさんがプログラミング自体に興味を持っていただき
その上でIT産業を盛り上げるような人材になってもらい
日本を盛り上げていければ幸いです。

4.プログラミング独立の完全ロードマップ

ここからが本題のカリキュラムとなります。

まず本家のカリキュラムですが

1.PHPとSQLの基礎を理解しよう
2.jQueryの基礎を理解しよう
3.WordPressの基礎を理解しよう
4.SEOの内部対策を理解しよう
5.WordPressの自作テーマを作ろう
6.鬼のコーディング練習道場(10本)
7.ポートフォリオサイトを作ろう
8.受注できる見積書を作成しよう
9.工数管理の考え方を解説します
10.制作パートナーを探そう(デザイナー)
11.クライアント営業をしよう ※ここで月20万
12.営業パートナーを探そう(営業マン) ※月50万以上も可能
13.ブログでも発信を続けていこう

となっています。

このうち1-7までは自主的に学習することが出来るのではないでしょうか?
こちらについてはここに書かせていただきます。

そこから先については別の考えになりますので
別途書かせていただきます。

それではまずはPHPとSQLについて学んでみましょう。

5.PHPとSQLの基礎を理解しよう

PHPとSQLの基礎知識

PHP(Hypertext Preprocessor)はwebサイトを作成するのを
効率的に行うことの出来るプログラム言語です。

webサイトを運営している会社のサーバー上で動き
ユーザーのアクセスに応じて動的にHTMLを生成します。

この生成されたHTMLがwebサイトで
閲覧することのできるページになります。

基本的にはHTMLにPHPのコードを埋め込むような記述をして、
最終的にHTMLを生成するような働きをします。
ですのでHTMLと親和性が強く、HTMLの知識も必要とされます。

文法だけであれば数日もあれば学習できそうですが
プログラム未経験者であれば、プログラムの基礎知識が必要ですし、
またWEBサイト作成を一人でやるのであればJavascriptやCSSも
セットで覚えないと仕事にはならないと思いますので
PHP、HTML、Javascript、CSSを覚える必要が出てきますので
目的によって学習時間がかかる言語となります。

WEBサイトを作るための代表的なCMSであるwordpressは
PHPのコードで動いているため、PHPを覚えたら
このwordpressをカスタマイズすることが出来ます。


次にSQLはデータベースを操作するための言語です。
位置づけとしては、単独でデータベースに対する問い合わせをするために
SQL文を書いて実行したり、データベースの登録、検索などを自動で
行うために他のプログラミング言語でSQL文を生成、発行したりする
ことがほとんどです。

初心者向けの言語で文法に関してSELECT文だけであれば
1日あれば覚えることが出来るレベル、
その他すべてを使いこなすにはある程度の日数が必要だと思います。

PHPの環境構築

さて、PHPを使うにはまずはインストールをしないといけません。
PHPのインストールはいろいろな方法が有ります。

PHPはそれ単体よりも、データベース、WEBサーバーとセットで用いられる
ケースがほとんどです。
データベースやWEBサーバーなどをまとめたものが出回っています。

XAMPP

X - Windows、Linux、macOS、Solarisのクロスプラットフォーム
A - ApacheのA
M - MariaDB(旧バージョンはMySQL)のM
P - PHPのP
P - PerlのP

これを使うと、プログラム言語やDB、WEBサーバーなど
いろいろまとめてインストールすることが出来るので
環境構築がスムーズかと思います。

ダウンロードはこちらから出来ます。

それぞれの環境に合った方法を試してみてください。
windowsの方はこれを用いるといいと思います。

macの方は上記の方法か
brew コマンドによるインストールの方法が有ります。
PHPではパッケージ管理のcomposerを使ってインストールする方法もあります。

コマンドはターミナルなどで

brew search composer

brew install composer

でインストールできます。
その他データベースなどもbrewコマンドでインストールが出来ます。

インストール方法は多岐に渡り、ここでは割愛しますので
調べてみてください。

PHPの実行方法

PHPはコマンドで実行できます。
windowsの方はコマンドプロンプトなどから
macの方はターミナルからphpコマンドを打ち込みます。

php ファイルネーム

php file_name.php

実行結果はターミナルなどに反映されます。

また直接コマンドにコードを書くことも出来ます。

php -r "var_dump('otupy');" 

出力結果をファイルに書き出すにはリダイレクトを使います。

php aaaaa.php > out_file



サーバー上でプログラミングを行いたい場合は
一旦WEBサーバーを起動してPHPを
動かせる状態にしておかないといけません。
WEBサーバーの起動にはコマンドが必要です。

php -S 127.0.0.1:808

windowsの方はコマンドプロンプトなどから
macの方はターミナルからこのコマンドを打ち込むと
インストールなどが問題なければ
WEBサーバーが起動すると思います。

WEBサーバーが起動したらWEBブラウザーで
生成されたHTMLを確認することが出来ます。

ブラウザーから
127.0.0.1:8080
にアクセスします。

恐らく最初は何もPHPファイルなどが無いため
Not Foundが表示されるだけかと思います。

ファイルの作成はテキストエディターなどで行えますので
お好きなエディターを使ってファイルを作ってみましょう。

PHPの文法

まず一番なのは公式のマニュアルです。
こちらを読めばだいたい把握できるのではないでしょうか

公式以外では割と売れている書籍で重版があるものを
本屋で読んでみて、良さそうなものを買ってみると良いでしょう。
書籍を買っても数千円で済み、知識が身につくはずです。

さてここからはPHPの文法についてです。

PHPコードは「<?php」という開始タグから始まります。
終了タグは「?>」です。

HTMLにPHPコードを埋める際は終了タグを使いますが
PHPコードのみを記述する際は終了タグを省くことができます。

Zend Frameworkコーディング規約では
PHP コードのみからなるファイルでは、終了タグ ("?>") は決して含めてはいけません。
これは必須なものではなく、 終了タグを省略することで、ファイルの最後にある空白文字が出力に影響することを防ぎます。

となっているようなので、PHPコードだけのファイルは閉じタグを外した方が良いでしょう。

コードの行末は ; を書きます。

<?php hoge(); ?>
<?php
$otu = 'otupy';
hoge($otu);
?>

HTMLに埋め込むことも出来ます。
sample.php

<!DOCTYPE html>
<html lang="ja">
<head>
<?php
echo '<meta charset="UTF-8">';
$title = '乙pyのPHP講座へようこそ';
echo "<title>{$title}</title>";
?>

</head>
<body>
<?php
$body = <<<HTML
Hello!!!!!
<script>
console.log('error');
</script>
HTML;
echo nl2br(htmlspecialchars($body));
?>
</body>
</html>

php sample.php
実行結果

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>乙pyのPHP講座へようこそ</title>
</head>
<body>
Hello!!!!!<br />
<script><br />
console.log('error');<br />
</script></body>
</html>

実行するとPHPはHTMLに変換された形で出力されます。
HTMLに埋め込みする場合は、その埋め込む部分に開始タグ <?php 
を差し込み、埋め込みの最後には終了タグ ?> を書きます。

PHPのコメント:

コメントは実行されないコードです。
これを使用することでコードの中にメモを残すことが出来ます。

コメントの書き方は
行頭に # か // を付けるか /* */ で囲みます。

// コメント
# コメント
/* コメント */



HTMLは基本的には文字列の羅列です。
その文字列をPHPで置き換えるような形でコードを書くのが
覚えやすいかなと思います。

PHPでの文字列の取り扱い:

文字列を指定する最も簡単な方法は、引用符  ' で括ることです。
文字に ' を用いたい場合は二重引用符 "  で囲みます。

echo '文字' で文字などを出力出来ます。

<?php
echo 'this is a simple string';

echo 'You can also have embedded newlines in 
strings this way as it is
okay to do';

// 出力: Arnold once said: "I'll be back"
echo 'Arnold once said: "I\'ll be back"';
?>

PHPの変数:

PHP の変数はドル記号 $ の後に変数名が続く形式で表されます。
変数名は大文字小文字を区別されます。

有効な変数名は文字またはアンダースコアから始まり、任意の数の文字、
数字、アンダースコアです。他の記号などは含めることは出来ません。

変数を書いたら = で値を代入することが出来ます。

$var = 'Bob';
$Var = 'Joe';
echo "$var, $Var";      // "Bob, Joe"を出力します。

PHPの演算子:

算術演算子
足し算や引き算を行う際の記号です。

$a + $b	$aに$bを足す
$a - $b	$aから$bを引く
$a * $b	$aに$bをかける
$a / $b	$aから$bを割る
$a % $b	$aを$bで割った余り
++$a	$aの値に1を足した後$aを返す
$a++	$aを返した後に$aの値に1を足す
--$a	$aの値に1を引いた後$aを返す
$a--	$aを返した後に$aの値に1を引く

比較演算子
大小関係や等しいかどうかなどの比較を行うための記号です。

$a == $b	$aと$bが等しいとTRUE
$a != $b	$aと$bが等しくないとTRUE
$a < $b	$aが$bより小さいとTRUE
$a > $b	$aが$bより大きいとTRUE
$a <= $b	$aが$bより小さいか等しいとTRUE
$a >= $b	$aが$bより大きいか等しいとTRUE

代入演算子
左辺を右辺に代入するための記号です。

$a = $b	$aに$bを代入する

文字列演算子
文字列の結合を行うための記号です。

$a . $b	$aと$bを結合する。

複合演算子
= とバイナリ演算子、文字列演算子を組み合わせるための記号です。

$a += $b	a+bの演算結果をaに代入する
$a -= $b	a-bの演算結果をaに代入する
$a *= $b	a*bの演算結果をaに代入する
$a /= $b	a/bの演算結果をaに代入する
$a .= $b	a.bの演算結果をaに代入する

論理演算子
論理演算を行うための記号です。
論理演算は真か偽の2つの状態を用います。

$a && $b	$aと$bが共にTRUEだとTRUE
$a || $b	$aと$bの少なくともどちらか一方がTRUEだとTRUE
$a xor $b	$aか$bのどちらかだけがTRUEか両方TRUEじゃないとTRUE
!$a	     $aがTRUEでないとTRUE

PHPのデータ型:

PHPには以下のようなデータ型があります。
データの方は変数の作成の際などに自動で決まります。

文字列型(string)
整数型(integer)
浮動小数点数型(float)(double)
論理型(boolean)
配列型(array)
オブジェクト型(object)
リソース型(resource)
NULL(null)

スカラー型は単一の値で作られている型で
文字列、整数、浮動小数点数、論理値がそれに当たります。

複合型(コレクション型)は複数の値で作られている型で
配列とオブジェクトがそれに当たります。

特殊型はリソースとNULLになります。

PHPの制御文:
if文:
条件分岐 if は条件に合致した際にそのブロックの処理を行うことが出来る。
条件式はif (条件)と書き、ブロックは { } で囲み中に処理を書く。
条件は論理値になるように式を書きTrueになるブロックが実行される。

条件が複数存在するときは
else if (条件) で分岐を追加し、条件に合致しない際の処理をする場合は
else のブロックを追加する。

条件分岐(if)

<?php
 if (条件1) {
   // 条件1の時の処理;
 }
?>

条件分岐(if else)

<?php
 if (条件1) {
   // 条件1の時の処理;
 }
 else {
   // 条件1以外の時の処理;
 }
?>

条件分岐(if else if )

<?php
 if (条件1) {
   // 条件1の時の処理;
 }
 else if (条件2) {
   // 条件2の時の処理;
 }
 else {
   // 条件1,2以外の時の処理;
 }
?>

while文:
while文は条件に合致している場合に繰り返し処理を行うことが出来る。
条件を抜けるような処理を書いておかないと、いつまでも処理が終わらないので注意すること。

while (条件){
  // 処理
}
<?php
$i = 0;
while ($i < 5) {
 // 処理;
 $i++;
}

for文:
for文は指定回数の文だけ繰り返し処理を行います。

for (式1; 式2; 式3){
 // 処理
}

式1は初期値になり、式3は加算値で式2は終了条件になります。
式1から始まり、一回処理されるごとに式3の分だけ初期値が加算され
式2の条件に合致すると、そこで繰り返し処理は終わります。

式2に何も書かない場合は抜けることが無いので
breakなどで処理を抜ける必要が有ります。

<?php
for ($i = 1; $i <= 10; $i++) {
   echo $i;
}

for ($i = 1; ; $i++) {
   if ($i > 10) {
       break;
   }
   echo $i;
}

$i = 1;
for (; ; ) {
   if ($i > 10) {
       break;
   }
   echo $i;
   $i++;
}
?>

break , continue:
繰り返しの中でbreakが用いられると処理を抜けます。
continueが用いられると繰り返し処理の中のcontinue以降の部分が飛ばされ
再度繰り返し処理に移ります。

<?php
$i = 1;
for (; ; ) {
   if ($i % 2 == 0) {
       continue;
   }
   if ($i > 10) {
       break;
   }
   echo $i;
   $i++;
}
?>

関数:
PHPでは関数を作ることが出来ます。
function 関数名で定義し、関数の中で使用する値を引数という形で
引き継ぐことが出来ます。

returnを用いて関数内の処理の結果を返す事も出来ます。
この際の値のことを戻り値と呼んでいます。

function 関数名 (引数){
// 処理
}

function 関数名 (引数){
// 処理
return 戻り値
}
<?php
function make_seki ($a , $b){
    $total = $a * $b;
    return $total
}
?>

変数の有効範囲:

変数にはスコープと呼ばれる有効範囲が存在します。
関数内や、制御文の中で定義された変数をローカル変数と言い、
それ以外で宣言された変数は グローバル変数と言い、まったく別物となります。
グローバル変数はどこでも用いることが可能ですが、ローカル変数は
そのブロックの中でしか、使用できません。

配列:
 
通常の変数はスカラー変数と言い、
変数ひとつにつきひとつの値しか持つことができません。
配列はひとつの変数で複数の値を持つことができます。

配列の中には数値や文字列など様々な値を入れることができます。
1番目に数値、2番目に文字列と、別々に入れることも可能です。

配列では登録した順番でデータが格納されます。
データに参照する際にはキーに該当する添え字という数値を使います。

データを格納する際は
$変数名[添え字] = '値'

データを取り出す場合は
$変数名[添え字]
<?php
 $color[0] = 'red';
 $color[1] = 'green';
 $color[2] = 'blue';
 print_r($color);
?>

連想配列:
連想配列は、辞書のような使い方ができるデータ構造で
キーとなる添え字に数字だけでなく文字列も使うことができます。

データを格納する際は
$変数名[添え字] = '値'

データを取り出す場合は
$変数名[添え字]
<?php
 $color['be'] = 'black';
 $color['we'] = 'white';
 $color['be'] = 'blue';
 print_r($color);
?>

またarrayと言う関数でも配列を作ることが出来ます。

<?php
// 配列
$array1 = array(1, 2, 3); 

// 連想配列
$array2 = array('a' => 1,  'b' => 2, 'c' => 3);

// 末尾に追加
array_push($array1, 9);
?>

クラス:
オブジェクト指向の言語ではクラスは基本の概念となりますが
PHPでもクラスを用いることが出来ます。

変数名などと同じ命名方法となります。

<?php
class クラス名
{
    // プロパティの宣言
    public $変数名 = '値';

    // メソッドの宣言
    public function メソッド名() {
        // 処理;
    }
}
?>

クラスはバージョンによって挙動が変わります。
大規模な開発で無い場合はクラスを用いないこともあるので
初学者は無理に覚えなくても良いでしょう。
ある程度慣れてきたら学習をお勧めします。

例外処理:
プログラムでは実行時に不慮の挙動が考えられます。
予期しない挙動が発生した際にプログラム上でエラーが発生し
プログラムが停止してしまうことが有ります。

そんな場合にプログラム上のエラーをキャッチして
例外処理を行い、エラーの回避を行います。

例外処理の書き方は
try{   }catch  で囲み 中に例外が発生しそうな処理を書き
catchの後のブロックで例外時の処理を書きます。

catchではどの例外を受け取るかを指定できます。
catch (Exception $e)
とすれば全ての例外を受け取ることができます。

try {
 foo();
} catch (Exception $e) {
 echo $e->getTraceAsString();
}

PHPの文法の基礎はこんな感じになります。
詳細は公式リファレンスやPHPの参考書を用いるのが良いでしょう。

文法だけではプログラムを作るのがむずかしいと思います。
そんな時は別途参考書を本屋で立ち読みしてみてください。

続いてはSQLです。

SQLの基礎

SQLはデータベースを操作するための言語です。
基本的な文法は標準SQLというものがベースになります。
ここでは標準SQLにのっとったSQL文の基礎となります。

SQL文の種類:
データベース言語SQLの文法の種別は、以下の3つに大別されます。
データ定義言語 (DDL: Data Definition Language)
データ操作言語 (DML: Data Manipulation Language)
データ制御言語 (DCL: Data Control Language)

データ定義言語:
CREATE (表、インデックス、制約などの定義)
DROP (表、インデックス、制約などの削除)
ALTER (表、インデックス、制約などの定義変更)

データ操作言語:
INSERT INTO (行データもしくは表データの挿入)
UPDATE 〜 SET (表を更新)
DELETE FROM (表から特定行の削除)
SELECT 〜 FROM 〜 WHERE (表データの検索、結果集合の取り出し)

データ制御言語:
GRANT (特定のデータベース利用者に特定の作業を行う権限を与える)
REVOKE (特定のデータベース利用者からすでに与えた権限を剥奪する)
SET TRANSACTION (トランザクションモードの設定など)
BEGIN (トランザクションの開始)
COMMIT (トランザクションの確定)
ROLLBACK (トランザクションの取り消し)
SAVEPOINT (任意にロールバック地点を設定する)
LOCK (表などの資源を占有する)

種類がたくさんあります。
この中で全てを覚える必要はそこまでありませんが
一人で開発を行う場合はある程度の文を覚える必要が有ります。

最低限として
CREATE(テーブル作成)
ALTER(テーブル定義変更)
INSERT(データ投入)
SELECT(データ参照)
UPDATE(データ更新)
DELETE(データ削除)
DROP(テーブル削除)
こちらを覚えると良いでしょう。

これ以降はmariaDB(mysql)というデータベースで実行出来る文を元にして
行っていきます。

SQLの実行方法:
XAMPPをインストールしたら、「XAMPP Control Panel」を起動します。

下記の画面が表示されたら、赤枠で囲まれた「Start」のボタンをそれぞれクリックします。

次にWEBブラウザを立ち上げて、URL欄にhttp://localhost/phpmyadmin/index.php

と入力してPHPMyAdminの管理画面にアクセスします。

ユーザー、パスワードでアクセスします。
未設定の場合は下記を参考にパスワード設定などをしてみてください。

テーブルの作成方法はこちらを参考にしてみてください。

SQLの実行方法:
PHPMyAdminの画面からSQL文を発行してデータベースを
操作することが出来ます。

画面のSQLをクリックして、そこの欄にSQL文を打ち込んで「実行」をクリックして実行します。

CREATE文:
SQLを実行してデータの参照などを行うには
まずデータベースやテーブルが存在しないと行うことは出来ません。

データベースの作成は画面からでも可能です。
こちらはSQL文での作成方法です。
SQL文は文末に ; を付けます。

CREATE DATABASE データベース名;

CREATE DATABASE sample_db;

SQL文の基本文法では英文字の大文字、小文字が使え、大文字小文字どちらでも使用できます。どちらかに統一するのが良いでしょう。

データベース名やテーブル名は英小文字、数字、アンダーバーのみが使用できます。

db_name

データベースを作成したら次はその中にテーブルを作成します。

CREATE TABLE DB名.テーブル名 (テーブル定義(カラム名 データ型 ・・・));

CREATE TABLE sample_db.sample_table(id int, name varchar(10));

最初のうちはPHPMyAdminの画面上で操作した方が楽かと思います。
慣れて来たらCREATE文でデータベースやテーブルを作成してみましょう。

テーブルは表構造になっていて列のことをカラム、行のことをレコードと言っています。
データベースはテーブルを複数まとめたもので、データセットとも言います。

データ型はテーブルに格納する際のデータの形です。
mysqlなどでは

整数型(TINYINT, SMALLINT, MEDIUMINT, INT, BIGINT)
浮動小数点数型(FLOAT, DOUBLE)
固定小数点数型(DECIMAL, NUMERIC)
BIT型
日付型と時刻型(DATE, TIME, DATETIME, TIMESTAMP, YEAR)
CHAR型とVARCHAR型
BINARY型とVARBINARY型
BLOB型とTEXT型
ENUM型
SET型

などの型が有ります。

CREATE文でカラムのデータ型を定義する際には、格納するデータに合わせて
このデータ型をセットしましょう。

用語についてはこのあともたくさん出てくるので覚えてしまってください。

INSERT文:

続いてデータを挿入するINSERT文です。
データベースを作成した段階では、データはまだありません。

そこでデータを登録するためのINSERT文を実行して
データを登録します。

下記の定義でテーブルを作成したとします。

CREATE TABLE sample_db.sample_table(id int, name varchar(10));

このテーブルに対してデータを登録するには下記の
INSERT文を発行します。

INSERT INTO sample_table VALUES (1, 'Otupy');

SELECT文:

データが追加されたかどうか確認するためにSELECT 文を使って
テーブルに追加されたデータを取得してみます。

SELECT * FROM sample_table;

1 , Otupy というデータが取得できていれば成功です。

SELECT文の基礎:

SQL文の大半はデータの参照を行うSELECT文になります。
まずはこちらを使いこなせるようになります。

SELECT文の構文は

SELECT句
FROM句
-------------------------------------
WHERE句
GROUP BY句
HAVING句
ORDER BY句
LIMIT句

の順番になっていて、複数の句で構成されています。まずは

SELECT句:
参照するカラムを指定します。
最終的なデータのアウトプットを指定する部分です。

* のみにした際は全てのカラムの結果を出力します。
個別のカラムを指定する場合はカラム名を書き、
カラムを複数指定する場合は , でつなぎます。

カラム名などは AS を用いて別名を付けることが出来ます。
その場合別名は日本語はダメで英小文字,数字,アンダーバーのみとなります。
また関数などを用いて集計を行う事も出来ます。

DISTINCTを用いると結果を一意にすることができます。

SELECT カラム名 , カラム名 FROM ・・・

SELECT カラム名 AS 別名 FROM ・・・

SELECT カラム名 , SUM(*) FROM ・・・

SELECT DISTINCT SELECT カラム名 FROM ・・・

FROM句:
参照するテーブルを指定します。
テーブルはJOIN句やUNION句を用いて連結したりすることも出来ます。

AS を用いて別名を付けることもできます。

SELECT カラム名 FROM テーブル名;

SELECT カラム名 FROM テーブル名 UNION SELECT カラム名 FROM テーブル名;

SELECT カラム名 FROM テーブル名 JOIN テーブル名 ON 条件;

WHERE句:
データ抽出の条件を指定します。
条件は複数書くことができ連結する場合は AND , OR , NOT等でつなぎます。
条件はカラム名 = 値 のように条件式で指定をします。

WHERE句の条件とカラムの値が合致したレコードが抽出されることになります。

=を用いると完全一致になります。
likeと %を用いると部分一致で条件式を書くことができます。
IN句を使うと複数条件を1つに指定できます。

SELECT カラム名 FROM テーブル名 WHERE カラム名 = 'abc';

SELECT カラム名 FROM テーブル名 WHERE カラム名 = 'abc' AND カラム名 = 2;

SELECT カラム名 FROM テーブル名 WHERE カラム名 LIKE 'abc%';  -- 前方一致 --

SELECT カラム名 FROM テーブル名 WHERE カラム名 LIKE '%abc';  -- 後方一致 --

SELECT カラム名 FROM テーブル名 WHERE カラム名 LIKE '%abc%'; -- 部分一致 --

SELECT カラム名 , カラム名 FROM テーブル名 WHERE カラム名 IN ('A','B','C');

GROUP BY句:
集計をする際にまとめるカラムを指定します。
データのグループ化を行い、データを抽出します。
SELECT句で集計関数を使った際にはGROUP BY句で
グルーピング条件を指定する必要が有ります。

指定の方法はカラム名か、SELECT句で指定したカラムの順番を数値で指定し、複数ある時はカンマで連結します。なお select * を指定したときは、テーブルに定義された順にカラムが指定されたものとして動きます。

SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1;

SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY カラム名;

SELECT カラム名 , カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1,2;

HAVING句:
GROUP BYの集計結果を絞り込みするために指定します。
HAVING単体では使えません。GROUP BY句が必要になります。

指定の方法は絞り込みをする条件式を指定します。

SELECT カラム名 , SUM(カラム名) FROM テーブル名 GROUP BY 1 
HAVING sum(カラム名)>10;

ORDER BY句:
結果を並び替えします。
SELECT句のどのカラムを使って並び替えをするのかを指定します。

指定の方法はカラム名か、SELECT句で指定したカラムの順番を数値で指定し、複数ある時はカンマで連結します。

昇順と降順がありデフォルトは昇順(ASC)、降順にしたければDESCを付けます。

SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
ORDER BY 1;

SELECT カラム名 , カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1,2
ORDER BY 1,2 DESC;

LIMIT句:
結果の表示件数を指定します。単純に数値を指定するだけです。
使い方としてはプレビューで1万件だけ見るとか、TOP10を抽出したいときなどに指定します。

SELECT カラム名 , カラム名 FROM テーブル名 LIMIT 100;

SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
ORDER BY 1 LIMIT 10;

IN句:
INを用いると、複数を含むという条件を指定できます。

SELECT カラム名 , カラム名 FROM テーブル名 WHERE カラム名 IN ('A','B','C');

サブクエリ:
SELECT文の結果をSELECT文の中で用いることができます。
色々な場所で使えます。
イメージとしては一時集計した結果を用いて絞り込んだりする感じです。

どこまでがサブクエリなのかを区別するために()で括ります。

-- FROM句でサブクエリを使う場合 --
SELECT カラム名 , カラム名 FROM
 (SELECT カラム名 , カラム名 FROM テーブル名)  LIMIT 100;

-- WHERE句でサブクエリを使う場合 --
SELECT カラム名 , カラム名 FROM テーブル名
WHERE カラム名 IN (SELECT カラム名 FROM テーブル名 LIMIT 100);

-- HAVING句でサブクエリを使う場合 --
SELECT カラム名 , カラム名 FROM テーブル名
GROUP BY カラム名
HAVING COUNT(*) >=  ( SELECT MAX(cnt)
                      FROM ( SELECT COUNT(*) AS cnt
                             FROM テーブル名 GROUP BY カラム名) );

WITH句:
先に一時的なテーブルを作成し、SELECT文の中でそのテーブルを使うことができます。 ASを用いて一時テーブルの名前を先に決めておきます。

WITH 一時テーブル名 AS (
    SELECT カラム名 FROM テーブル名
)
SELECT カラム名 FROM テーブル名 
WHERE カラム名 IN (SELECT カラム名 FROM 一時テーブル名);

集計関数:
SELECT句などで用いることができる集計関数で
カラムの値を使って集計を行います。
集計関数を用いる場合はどのカラムでまとめるかというのを指定するのに
GROUP BY句が必要です。

COUNT(カラム名) -- レコード数を数える
SUM(カラム名)   -- 合計値を求める
MIN(カラム名)   -- 最小値を求める
MAX(カラム名)   -- 最大値を求める
AVG(カラム名)   -- 平均値を求める

CASE句:
CASEは条件分岐を行って結果を出し分けたい場合に用います。
条件を WHEN で指定し、それ以外を ELSE で指定します。
条件が増える場合はWHENを増やします。
結果の部分はTHENを付けて指定し、最後にENDを付けます。

SELECT CASE WHEN 条件式 THEN 結果1 ELSE 結果2 END ・・・

SELECT CASE 
WHEN 条件式1 THEN 結果1
WHEN 条件式2 THEN 結果2
WHEN 条件式3 THEN 結果3 
ELSE 結果4   END ・・・


UNION句:
テーブルとテーブルを結合します。
集計結果としてのテーブルを結合したり、テーブル同士を結合してから
集計をしたりする場合に用います。

UNIONでは結果のレコードで一意になるように除外する働きをします。
結果すべてを結合するには ALL をつける必要があります。

-- 結果全部を繋げる --
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
UNION ALL
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1

-- 結果が一意になるように繋げる --
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
UNION
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1

-- 結果全部を繋げてから並び替えする --
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
UNION ALL
SELECT カラム名 , COUNT(*) FROM テーブル名 GROUP BY 1
ORDER BY カラム名

JOIN句:
別のテーブルを横に結合することができます。
同じ値を持つカラムの値を使ってつなぎ合わせます。
内部結合と外部結合があり複数の結合方法があります。

書き方は次のようになり FROM句の後に繋げるテーブルを
JOIN句で指定します。

FROM テーブル名 AS 別名1 JOIN テーブル名 AS 別名2
ON 別名1.カラム名 = 別名2.カラム名

別名はなんでもよくカラム名はテーブルに存在するカラム名を指定します。

INNER JOIN:
JOINだけ書くとINNER JOINと同じになります。
内部結合になり、双方のテーブルにあるカラムの値が合致した場合のみ
テーブルが結合されます。

FULL OUTER JOIN:
FULL JOINだけでも同じ意味になり、外部結合となります。
双方のテーブルにあるカラムを掛け合わせた形でテーブルが結合されます。
どちらか一方のテーブルにある値でテーブルが結合されます。

LEFT OUTER JOIN:
LEFT JOIN だけでも同じ意味になり、外部結合となります。
FROM句に書いた方が左側で、そちらのテーブルにある値で
右側にJOIN句のテーブルを結合します。
左側にしかない値の場合は結合結果は空、右側にしかない値の場合は
結合されません。

RIGHT OUTER JOIN:
RIGHT JOINだけでも同じ意味になり、外部結合となります。
FROM句に書いた方が左側で、JOIN句が右側です。
JOIN句のテーブルにある値でFROM句のテーブルを結合します。
右側にしかない値の場合は結合結果は空、左側にしかない値の場合は
結合されません。

SELECT句では  別名.カラム名  で別名を使って結合したカラムを指定できます。

-- INNER JOIN --
SELECT 別名1.カラム名 , 別名2.カラム名 FROM テーブル名 AS 別名1
INNER JOIN テーブル名 AS 別名2 ON 別名1.カラム名 = 別名2.カラム名;

-- FULL OUTER JOIN --
SELECT 別名1.カラム名 , 別名2.カラム名 FROM テーブル名 AS 別名1
FULL OUTER JOIN テーブル名 AS 別名2 ON 別名1.カラム名 = 別名2.カラム名;

-- LEFT OUTER JOIN --
SELECT 別名1.カラム名 , 別名2.カラム名 FROM テーブル名 AS 別名1
LEFT OUTER JOIN テーブル名 AS 別名2 ON 別名1.カラム名 = 別名2.カラム名;

-- RIGHT OUTER JOIN --
SELECT 別名1.カラム名 , 別名2.カラム名 FROM テーブル名 AS 別名1
RIGHT OUTER JOIN テーブル名 AS 別名2 ON 別名1.カラム名 = 別名2.カラム名;

関数:
SQL文では文字列を操作したり、特殊な計算をする関数が備わっています。
SQLの色々なところで使うことができます。

UPPER(カラム名)  -- 大文字に変更します。

LOWER(カラム名)  -- 小文字に変更します。

REPLACE(カラム名, '検索文字列', '変更後文字列') -- 検索文字列を変更後文字列に変更します。

SUBSTR(カラム名, 検索場所, 文字数) --文字を切り出します。
SUBSTR(カラム名, 2, 3) -- 文字を2文字目から3文字分切り出します。

LENGTH(カラム名)  -- 文字数を数えます。

CAST(カラム名 AS データ型)  --データ型を変更します。
CAST(カラム名 AS varchar2(20))  --varchar2に変更します。

他にもたくさんあるので、用途に応じて調べてみてください。

UPDATE文:
UPDATEは登録されているレコードを更新します。

書き方は

UPDATE テーブル名 SET カラム=更新値 WHERE 条件式;

となります。
WHERE句ではその条件に合致するレコードすべてが更新されてしまうので
例えば

UPDATE MEMBER SET name ='乙py';

としてしまうと、すべてのレコードのカラムnameの値が変更されてしまいます。もしお客さんのデータを預かっている場合、大事なデータが消失してしまい大変なことになるので、なるべくWHERE句で条件を絞り込んで
UPDATEするようにしましょう。

DELETE文:
DELETE文はレコードを削除します。

DELETE FROM テーブル名 WHERE 条件式;

こちらもすべての条件にあうレコードを消し込むので
WHERE句がない場合、すべてのレコードを消してしまいます。
必ず、一意になるように条件を書きましょう。

SQLの基礎はここまでです。
まだまだこれ以外にもSQLの構文はあります。
データベースの操作に間することがほとんどなので
あまり使用頻度はないかも知れませんが、余力があれば覚えてみましょう。

6.jQueryの基礎を理解しよう

jqueryはJavascriptのライブラリになります。
jqueryを使いこなすには、まずJavascriptやHTMLなどを覚えないといけません。

ここでは一旦JavascriptやHTML、CSSがある程度分かっているものとして進めます。

まずはjqueryをHTMLで使えるようにしないといけません。
HTMLのソースの中にロードする文を書いて使えるようにします。

jqueryの使い方:

方法は2通り
・自分のPCなどにjqueryのライブラリをダウンロードして
HTMLのファイルのある場所に置く。
・CDNを使う

jqueryは通常版と圧縮版(min)があります。
またバージョンも多岐にわたり、ファイル名にバージョンが書いてありますので、どのバージョンを指定するのかは間違わないようにしましょう。

# ダウンロードしたものを指定する
<head>
   <script src="jquery.min.js" type="text/javascript"></script>
</head>

# CDNを使用する
<head>
   <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>

CDN版はダウンロードせずにライブラリが利用できるものですが
インターネットに繋がっていないと使用できません。
おそらく、用途としてはWEBサイトを作成して、そこにjqueryのライブラリも設置すると思いますので、制作の際はCDN、本稼働時はファイル指定の方法でスクリプトの読み込みを行いましょう。

スクリプトが読み込みできるようになったら
次は簡単なサンプルを実行してみましょう。

jqueryの基本

<html>
 <head>
   <meta charset="utf-8">
<script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>
   <title>jqueryのサンプル</title>
 </head>
  <body>
   <ul>
     <li id="id1">これはサンプルでーす。</li>
     <li>どうも</li>
     <li>こんばんわ</li>
     <li>乙pyです。</li>
   </ul>
   <script>
     $("#id1").css("color","#d8534d");
   </script>
 </body>
</html>

これをWEBブラウザーで開いてみると

こんな感じになるかと思います。

jqueryの基本的な概念ですが

$(セレクタ).メソッド(引数);

となります。
上記サンプルでは

$("#id1").css("color","#d8534d");

としていました。
これはセレクタでHTMLの中からid名が「 id1」のものを探し
メソッドcssで文字の色"color"を"#d8534d"に変更したのです。

セレクタ

セレクタはCSSのセレクタのように、HTMLのタグ名(HTML要素),id名,クラス名で指定できます。

要素セレクタ
$("タグ名")

idセレクタ
$("#id名")

classセレクタ
$(".class名")

すべての要素を指定する
$("*")

要素名もしくはid名に一致する要素を指定する
$("要素名,#id名")

id名内の配下にある要素を指定する
$("#id名 要素名")

id名直下の要素を指定する
$("#id名 > 要素名")

要素名Aの次に現れる要素名Bを指定する
$("要素名A + 要素名B")

要素名Aの以降に現れる要素名Bの全てを指定する
$("要素名A ~ 要素名B")

idはHTMLでは1つしかありませんが、タグやclass属性は複数存在することがあるので注意しましょう。

フィルターを使った指定方法もあります。

要素全体から要素名A直下の要素名Bで最初の要素を取り出す
$("要素名A > 要素名B:first")

要素全体から要素名A直下の要素名B最後の要素を取り出す
$("要素名A > 要素名B:last")

親要素を起点とし要素名A直下の要素名B最初の要素を取り出す
$("要素名A > 要素名B:first-child")

親要素を起点とし要素名A直下の要素名B最後の要素を取り出す
$("要素名A > 要素名B:last-child")

他にもフィルターの指定の方法はあります。
HTMLの部品を指定するには


$(":input")     全てのフォーム要素を取り出す
$(":text")	テキストボックス
$(":password")	パスワード入力ボックス
$(":radio")	ラジオボタン
$(":checkbox")	チェックボックス
$(":file")	ファイル選択ボックス
$(":submit")	送信ボタン
$(":image")	画像ボタン
$(":reset")	リセットボタン
$(":button")	全てのボタン
$(":hidden")	隠し要素

HTML要素の状態で指定するには

$(":enabled)")  フォーム要素が利用可能な状態である場合取り出す
$(":dsabled")	利用不可の状態
$(":checked")	チェック状態
$(":selsected")	選択状態
$(":hidden")	非表示の状態
$(":visible")	表示状態
$(":animated")	アニメーション中の状態

組み合わせると

$("input:enabled").css("border","3px solid red");

このように複数のセレクタも使用できます。
様々なセレクタを使用して、どのタグを操作するのかを指定します。

メソッド

次にメソッドについてです。
メソッドはタグの状態などを操作するものになります。

サンプルのcssメソッドはスタイルを操作します。
メソッドの指定方法は

.css( プロパティ名 , 値 )
.css( オブジェクト )
.css( プロパティ名 , function )

というように指定します。

値を取得したい場合は

var ans = $("セレクタ").css("プロパティ名");

のように指定すると変数にCSSの属性から値を取得できます。

例えばdivタグのCSS,height属性の値を変えたいとしたら

$("div").css("height","20px");

のように指定します。これがメソッドの使い方になります。
似たようなメソッドが多いですが、このようなメソッドがあります。

要素の挿入
.after( )         引数で指定したコンテンツを後に追加する
.before( )        引数で指定したコンテンツを前に追加する
.append( )        引数で指定したコンテンツを子要素の最後に追加する
.prepend( )       引数で指定したコンテンツを子要素の先頭に追加する
.insertAfter( )   コンテンツを引数で指定した要素の後に追加する
.insertBefore( )  コンテンツを引数で指定した要素の前に追加する
.appendTo( )      コンテンツを引数で指定した子要素の最後に追加する
.prependTo( )     コンテンツを引数で指定した子要素の先頭に追加する
 

要素の削除
.empty( )        要素の内容(子孫要素)を削除する
.remove( )       要素を削除する
.detach( )       データを維持したまま要素を削除する
 

要素を囲む 
.wrap( )         要素を引数で指定した要素で囲む
.wrapAll( )      要素を引数で指定した要素でまとめて囲む
.wrapInner( )    指定した要素の子要素を引数で指定した要素で囲む
.unwrap( )       指定した要素の外側にあるタグを外す
 

要素の取得、設定
.text( )         テキスト情報を取得したり設定する
.html( )         htmlのコンテンツを取得したり設定する
.clone( )        要素を複製する
.replaceAll( )   html要素を引数で指定した対象と入れ換える
.replaceWith( )  指定した要素を引数で指定した対象と入れ換える

その他
.toggleClass( )  引数で指定したクラスが存在するときは削除し、存在しないときは追加する
.hasClass( )     引数に指定したクラスがあるかどうかを調査する
.addClass( )     引数で指定したクラスを追加する
.removeClass( )  引数で指定したクラスを削除する
.attr( )         引数で指定した属性の値を取得したり設定する
.removeAttr( )   引数で指定した属性を削除する
.prop( )         引数で指定したプロパティの値を取得したり設定する
.removeProp( )   引数で指定したプロパティを削除する
.val( )          value属性の値を取得したり設定する
.css( )          スタイルシートを取得したり設定する
.offset( )       documentの座標系において位置を取得したり設定する
.position( )     親要素の座標系において位置を取得したり設定する
.height( )       要素の高さを取得したり設定する
.innerHeight( )  ボーダーの内側の高さを取得する
.outerHeight( )  ボーダーの外側の高さを取得する
.width( )        要素の幅を取得したり設定する
.innerWidth( )   ボーダーの内側の幅を取得する
.outerWidth( )   ボーダーの外側の幅を取得する
.scrollLeft( )   スクロール位置(X座標)を取得したり設定する
.scrollTop( )    スクロール位置(Y座標)を取得したり設定する

1つ1つ全部試すのは大変なのでここでは割愛しますが
必要に応じてこのようなメソッドを使ってHTMLの要素の操作を行います。

イベント

次にイベントです。
イベントはマウスを動かしたり、クリックしたり、キー入力を行ったり
フォームに何かを入力したりといった、ユーザー側の操作を受け取った際に
javascirptを動かす機能です。

書き方は

$("セレクタ").イベント(function(){
  //処理;
});

このような書き方になります。

イベントの種類はこのくらいあります。

マウスイベント
.click( )      クリック時の処理を設定する
.dblclick( )   ダブルクリック時の処理を設定する
.mousedown( )  マウスボタンを押した時の処理を設定する
.mouseup( )    マウスボタンを離した時の処理を設定する
.mouseover( )  マウスカーソルが要素内(子孫要素を含む)に入った時の処理を設定する
.mouseout( )   マウスカーソルが要素内(子孫要素を含む)から出た時の処理を設定する
.mouseenter( ) マウスカーソルが要素内(子孫要素は除く)に入った時の処理を設定する
.mouseleave( ) マウスカーソルが要素内(子孫要素は除く)から出た時の処理を設定する
.mousemove( )  要素内でマウスカーソルが移動した時の処理を設定する
.hover( )      マウスカーソルが要素内に入ったり出たときの時の処理を設定する


キーイベント
.keydown( )    キーを押した時の処理を設定する
.keypress( )   キー入力があった時の処理を設定する
.keyup( )      キーを離した時の処理を設定する
.focusin( )    フォーカス(子孫要素を含む)された時の処理を設定する
.focusout( )   フォーカス(子孫要素を含む)が外れた時の処理を設定する


フォームイベント
.focus( )      フォーカス(子孫要素は除く)された時の処理を設定する
.blur( )       フォーカス(子孫要素は除く)が外れた時の処理を設定する
.change( )     内容が変更された時の処理を設定する
.select( )     文字が選択された時の処理を設定する
.submit( )     データ送信時の処理を設定する


ブラウザイベント
.resize( )    リサイズした時の処理を設定する
.scroll( )    スクロールした時の処理を設定する
.error( )     エラーが発生した時の処理を設定する


ロードイベント
.load( )      読込が完了した時の処理を設定する
.unload( )    ページから離れる時の処理を設定する
.ready( )     DOMの読込を完了した時の処理を設定する


イベントハンドラアタッチメント
.on( )       イベントを設定する
.off( )      onで設定されたイベント発生時の処理を解除する
.one( )      1回だけ利用できるイベント発生時の処理を設定する

それではサンプルで試してみましょう。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <title>jqueryのサンプル</title>
  </head>
  <body>
      <div id='div1'>この文字押してみて</div>

      <script>
        $(document).ready(function(){
          $("#div1").click(function(){
            var color="#"+Math.floor(Math.random() * 16777215).toString(16);
            $("#div1").css("color",color);
          });
        });
      </script>
  </body>
</html>
 

上記サンプルを実行してみると「この文字押してみて」
の部分をクリックするたびに文字の色がランダムに変化します。

これはイベントでdivタグのid div1がクリックされたイベントを受け取って
var colorの部分でランダムな色を決め
div1の文字の色をcssメソッドで変更しています。

$(document).ready(function(){

の部分はreadyでDOMの読込を完了してから処理が実行できるようにしています。ブラウザ上では、ほとんどjQueryはDOMの読込が完了してからでないと利用できないからです。

これがjqueryの基本です。
まだ他にも機能がありますが、まずは仕組みを覚えて
色々なHTML要素の操作が出来るようになったら
残りを覚えると良いでしょう。

7.WordPressの基礎を理解しよう

WordPress(ワードプレス)は、ブログやサイトを作成できるCMSと呼ばれるソフトウェアです。世界中のサイトの約3分の1ほどがWordPressで作られていると言われています。
日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。ワードプレスがどんなソフトなのか、主な特徴について紹介します。

公式サイトや役に立ちそうなサイトなどを載せておきますので
迷ったらこちらを参考にしてみてください。

WordPressの特徴

WordPressの特徴は、主にテーマとプラグインです。
テーマはブログやサイトのデザインのテンプレートで、テーマを変更するだけでブログ・サイトの見た目を着せ替えすることができます。

プラグインはWordPressにはない機能を、追加することができるプログラムです。
サイト内のページを一覧表示する「サイトマップ」を生成したり
「問い合わせフォーム」を生成する機能は、自分で作成しようと思ったら、初心者にとっては大変な作業です。しかし、プラグインを使うと、これらの機能を簡単に追加することができます。

WordPressのプラグインのほとんどが無料で手に入りますが、一部有料のものもあったりします。
ただし、ほぼ無料で必要な機能を揃えることができるでしょう。

WordPressの使い方

まずはWordPressをダウンロードしましょう。

次にWordPressが動く環境の容易です。
WordPressを動かすにはサーバーが必要です。
こちらはレンタルサーバーを借りて公開するのが一般的です。

WordPressが使えるレンタルサーバーは
初心者の方であれば、出来るだけ安いほうがいいですよね。
慣れてきたら、スペックの高いサーバーに乗り換えても良いと思いますが
まずはコストを抑えたサーバーを見つけましょう。

さくらのスタンダードで月515円、ロリポップも月額500円
エックスサーバーは月額1000円からですね。

こちらのサーバーを借りないと、サーバー上に構築は難しいです。

WordPressのインストール

サーバーを借り終わったらインストールです。
インストールの方法は公式を参照すると良いでしょう。

WordPressの記事や設定などはインストールしたデータベースに書き込まれます。ですのでデータベースのバックアップを定期的に行うようにしましょう。
データさえあれば復元が可能です。
データベースはMysqlを使うのが一般的ですので
データベースの使い方などはMysqlの使い方などを覚えると良いでしょう。

WordPressのテーマ

WordPressの醍醐味としては豊富なテーマです。
最近のはレスポンシブルに対応したものや、デザインが魅力的なものがお多いです。
無料のものでもそこそこのデザインのものがありますが
商用で使われているようなものは有料のことが多いです。
値段も5千円程度のものが多いので、デザイナーに依頼することを考えたら
このくらいの金額を払うのは問題ないことかとは思います。

WordPressのプラグイン

主によく使われるものを載せておきますので
参考にしてみてください。
All In One SEO Pack
meta descriptionとmeta keywords入力用

Google XML Sitemaps
サイトマップ送信を自動化

Broken Link Checker
リンク切れを通知

PuSHPress

Akismet
コメントスパム対策用

AddQuicktag
タグ打ちを効率化

WP Multibyte Patch
WordPressを日本語対応

あまりプラグインを入れすぎると、サイトの表示スピードが遅くなることがあります。そうするとサイトのランクに悪影響を及ぼすので
遅くなりすぎるのであれば、そのプラグインを外した方が良いです。
またWordPressはセキュリティーの穴が多く、セキュリティー用のプラグインもある程度は入れておいた方が良いかもしれません。

その他

WordPressでは管理ユーザーを作成して、その管理ユーザーで記事を作成したり、サイトの設定を施したりします。複数人で管理することも出来ますし
柔軟な運用体制を作ることができます。


8.SEOの内部対策を理解しよう

SEOの基本

さてSEOとは何でしょうか?
SEOは「Search Engine Optimization」の略語です。
一般的に、何かしらの記事を読みたい場合、Googleなどの検索エンジンで
検索ワードを入力してWEBサイトを探します。

そしてこの検索ワードで検索してWEBサイトに来訪することを
オーガニックと呼んでいます。

SEOとよく似た言葉に「 SEM」があり、 SEOと SEMは意味を混同されがちなのでそれぞれの違いをしっかり把握しておきましょう。

SEMは「Search Engine Marketing」検索エンジン マーケティングの略です。

SEOは 検索エンジンに最適化することで表示順位を上昇させ、Web集客する手法を指しますが、 SEMは検索エンジンを利用してWeb集客する手法全般を指しています。

つまりSEOやリスティング広告など、 検索エンジンを利用したマーケティング全般をSEMと呼んでいます。

SEOはGoogle対策

現在日本の検索エンジンのシェアトップはYahooで67%ほどです。
二位はGoogleで23%ほどです。
しかしYahooの検索エンジンはGoogleの検索エンジンを借りているので
結果は一緒になります。
つまりGoogleの対策をすればYahooと合わせて90%ほどのシェアの対策ができることになるのです。

検索順位が決まる仕組み

検索エンジンは日々WEBサイトの情報を収集して、独自に検索順位を決定しています。ユーザーのための良質なWEBサイトを上位に持ってくる仕組みにはなっていますが、どのような順番にするかという部分が非公開です。
判断基準はあくまでも推測になります。

過去には被リンクの数で検索順位が決まるようなこともありましたが
現在ではその検索順位のアルゴリズムが更新され
被リンクのような外部要因よりもWEBサイトの中身であれる内的要因の方が
検索順位における役割が重要になっていると言われています。

特にGoogleはユーザーファーストの視点から、ユーザーにとって
有意義でないサイトを好ましくないと思っているようです。

表示が遅いサイトや、スマホ対応されていないサイトの順位を下げたりといったことを理念にそってやっているようです。

SEOの考え方

まずはユーザーが検索するキーワードに対してそのコンテンツがふさわしいのかという点です。
例えばWordPressのことを調べたいのにWordPressとあまり関係のない
プログラミング教室のことや、プログラミング言語の覚え方などのコンテンツになったりしていると、キーワードとのズレが生じてきます。

あくまでもキーワードに設定するのであれば、コンテンツもそれに沿った内容であるべきです。
そうでないと閲覧に来たユーザーが離れてしまい、有意義ではないコンテンツだと認識されてしまうからです。

そしてもう一つ重要なのが内部対策となります。

内部対策は大きく分けて二つ

1.コンテンツの内容を適切にクローラーに伝えるようにする
2.クローラーが来やすいサイトにする

Googleが検索順位を決めるためにクローラーというWEBサイトの巡回用プログラムを日々動かしていて、世界中のWEBサイトの情報を収集しています。
そしてこのクローラーが収集するWEBサイトの情報こそがSEOの鍵となるのです。

まずはコンテンツの中の重要な部分を整備することです。
タイトルタグは特に重要視される部分です。
ここにはSEOキーワードを入れておきましょう。

<title>
プレスチャンネル | WordPressによるサイト構築,運用,攻略方法
</title>

ここに設定すると検索結果に表示されることとなります。
またタイトルの前方の方が後ろよりも重要度が高いと言われていますので
タイトルの前の方に重要なキーワードを持ってくるのが良いでしょう。

またタイトルはユニークなものの方が良いと思います。
他のサイトと同じタイトルだと、真似をしたとされペナルティーを受けてしまう可能性もあります。

次にタイトルは長すぎても検索結果で省略されてしまいます。
35文字ほどで省略されてしまうようなので
なるべく収められるようなタイトルにするのが良いでしょう。

meta description属性を設定

metaタグのdescription属性はそのWEBページの要約になります。
この内容をクローラーが見て、どういう記事なのかを判定します。

<meta name="description" content="WordPressに関するお役立ち情報を日々更新,必要な情報はぜひここで" />

検索結果ではタイトルの次の行に反映されたりします。

次に見出しです。
見出しで使われるのはHTMLのh1~h3タグです。
h1タグは見出しタグの中でも一番大きいサイズのタグで重要度が高いタグになります。

一番伝えたい記事のタイトルなどをh1に設定すると良いでしょう。
ここにもSEOキーワードを埋め込みます。

そしてもう一つ重要なのが見出しの順番です。
見出しはh1,h2,h3の順番でないといけません。
h1の次の見出しがh3ではいけないようです。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

見出しの順番を守って文章を書きましょう。

パンダアップデート

パンダアップデートとは2012年に Googleが「良質なコンテンツの検索順位を上げ、品質の悪いコンテンツの検索順位を下げる」
ことを目的とした、検索順位アルゴリズムのアップデートのことです。

これによりコピーされたコンテンツや自動生成された文章のコンテンツだけのWEBページに対しては検索の順位が落ちるようになりました。

今まで他のサイトの情報を借りていたりする部分が引っかかったりするのです。
ですので他のサイトの情報を借りる際には引用タグ blockquoteタグを用いて
その文章が引用であることを指し示してあげるとコピーコンテンツだと判断されるリスクを回避できるようです。

<blockquote>この文章は・・・から引用しています。</blockquote>

内部リンクの強化

内部対策として内部リンクの強化が挙げられています。
自身のWEBサイトのページから他のページへのリンクを自然な形で挿入しておくことで内部対策となります。

<a href="/page42">この詳細はこちらに</a>

更新頻度をあげる

一人で運営している場合は難しいかもしれませんが、クローラーは毎日訪問していて、サイトに更新があればすぐに検索結果をアップデートしています。
更新頻度が少ないサイトよりは高めのサイトの方が検索結果への影響が大きくなります。

SEOの対策方法は他にもたくさんありますが
まず手軽にやれることはこのくらいです。
こちらをしっかりやっておき、順位が上がらなくなってきたら
別の対策を検討しましょう。


9.WordPressの自作テーマを作ろう

WordPressをサーバー上で動かせるようになり
PHPの文法などを覚えたら、WordPressのテーマ作成に移れると思います。

まずはWordPressで使用されているテーマのファイル構造を理解しましょう。

WordPressの自作テーマに必要なファイル群です。

index.php
header.php
footer.php
page.php
single.php
archive.php
sidebar.php
404.php
style.css
function.php

index.php
TOPページ表示のためのファイルとなります。


header.php
ページのhead部分やbody部分を構成するファイルです。


footer.php
ページのbodyの下部を構成するファイルです。


page.php
固定ページのテンプレートファイルです。

single.php
投稿ページのテンプレートファイルです。

archive.php
記事一覧表示のページ用のテンプレートファイルです。


sidebar.php
2カラムや3カラム用のサイドバーのテンプレートファイルです。


404.php
存在しないページに遷移した際の表示用ファイルです。


style.css
テーマだけでなく、WEBサイトのデザインシートです。


function.php
カスタム投稿やショートコード用のテンプレートファイルです。

まず構造を理解したら、無料のワードプレス用のテーマを改造してみましょう。
最初から1から作るとかなりシンドいと思います。
まずは出来合いの物を改造し、どう表示されるかを試してみましょう。
機能やデザインを少しづつ追加していき、オリジナルデザインを作って行くのが楽かなと思います。

デザインが完成したら管理画面の外観 テーマの有効化でテーマを変えることができます。

10.鬼のコーディング練習道場(10本)

これがどんな内容かは分かりかねるのでここは割愛します。
コーディング自体は慣れなので、毎日書いていれば
少しづつ書けるようになってきます。

まずは毎日1時間でもいいからコードに触れることをお勧めします。

11.ポートフォリオサイトを作ろう

さて、PHPやSQL,jqueryなどを覚えたらそれを作品として残しましょう。
プログラムのポートフォリオとしては

https://github.co.jp/

こういったサイトに置いたり、デザインなどであれば
やはりWordPressで作成したWEBサイトに置くのが良いでしょう。

またブログなどであれば

こういった無料のブログサイトでもコードを載せることができますし、
エンジニアであればやはり、技術情報共有サービスである

こちらの記事に載せるということもいいでしょう。

またデザインなどを記録した動画を編集してYouTubeなどに投稿したり
すると、Googleの現在の検索エンジンの仕組みでは、その検索ワードにまつわるYouTube動画を優先して表示させるような仕組みになっているので
SEO的にも有利だったりします。

12.受注できる見積書を作成しよう

こちらは世間一般に出回っている料金表などを参考にして
自分なりの値段を決めて見積書を作るのがいいでしょう。

高過ぎては受注できないと思いますし、安過ぎたら割に合いません。
ここは自分の意思で料金を決めましょう。


13.工数管理の考え方を解説します

こちらは未経験の方には難しい話かもしれません。
ここはシステム開発をしている会社で就業していれば、だいたい身に付くと
思われますが、そうでない方は自分なりに工数を決めていく必要が出てきます。

まずは作らなければいけないものの要件を整理しましょう。
そしてその要件に当てはまる全ての機能とその作業量を洗い出します。

プログラムであれば・・機能、・・機能
WEBサイトのデザインであれば10P

作業量に関してはその機能を作るのにかかる時間を掛け合わせます。
・・機能 10時間
・・機能 4時間
デザイン1P 3時間

それを全て洗い出してから、テストや納品時の作業時間なども見積もりにいれます。
全ての作業とそれにかかる時間が見積もれたら、それを逆算していき
いつまでに終わらせなければ行けないかを自身で管理していきます。


14.制作パートナーを探そう(デザイナー)

こちらはプログラムをやりたいのか、デザインをやりたいのか
はたまた両方やりたいのかで、決めるといいでしょう。

プログラムに専念したければデザインはデザイナーにお任せするのが
楽です。

自分は色々な勉強会などでデザイナーさんとしりあいました。
マーケティングツールやWEBサイト制作に役立つツール類
広告業界関連のセミナーなどではデザイナーさんが受けにきていたりすることが多かったです。

なので仕事のパートナーを安価で探したければこういったセミナーを利用してみるのもいいかもしれません。
渋谷近辺ではこういったセミナーがよく開催されていますので、探してみてみてください。


15.クライアント営業をしよう ※ここで月20万(笑)

正直な話、プログラムで仕事をしたことがない人が
いきなり仕事をゲットすると言うのが無茶な話だと思っています。
なのでいきなり仕事をくれと営業するのは時間の無駄かなと思います。

私個人の考えとしては未経験者に対して仕事をお任せできないからです。
ですので、まずは開発に関連する仕事をしてみることをお勧めします。

PHPによるWEBサイトの開発をするような会社であれば
この講座の趣旨にも合う会社です。
求人で入れそうな会社を見つけてそこで1-3年ほど働いてみましょう。

そうすれば工数管理も含めた開発の仕方やへ言語の知識、開発ノウハウが
たくさん身につきます。
そうすれば適切な価格も設定できるし、未経験よりは格段に仕事を見つけやすいはずです。



16.営業パートナーを探そう(営業マン) ※月50万以上も可能(大草原)

現在ではクラウドソーシングやエンジニア系の紹介サービスが多くありますので、こういったサービスを用いれば自分で営業する必要はありません。
営業にかける時間は1円にもなりませんし、作業もできません。

知り合いのツテがあるのであれば良いですが、なければこういったサービスを活用しましょう。


17.ブログでも発信を続けていこう

ここはまともだと思います。
ブログを毎日続けるのは大変ですが、いづれはそれが資産になってきます。
ぜひ情報発信を毎日書きましょう。


以上が12万円の内容になると思います。

いかがでしたか?
文字数にして4万文字行かない程度で、1日でまとめられる程度の情報です。

そこに12万円の価値はあるでしょうか?




プログラミング初心者の方でこれから身に付けたいと言う方は
ぜひこちらの記事も参考にしてみてください。

Python言語を取得したい方はぜひこちらを

そのほか、色々な場所で情報発信しておりますのでよろしくお願いいたします。

HP:
http://www.otupy.net/

Youtube:
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter:
https://twitter.com/otupython

Pythonチートシート
https://note.mu/otupy/n/n1bedb9f36e54





いいなと思ったら応援しよう!