More than 3 years have passed since last update.

Webエンジニアになるにあたっての学習方法

Last updated at 2020-10-22Posted at 2020-10-21

##【対象者】

これからWebエンジニアやってみようかなって人

##【まえがき】

初めまして、Webエンジニアになって早６年目。
Qiitaは読む専門だったのですが、ありがたいことに１年半ほど前からオンラインスクールの講師をやらせてもらってます。
その中で、「自分もそうだったなぁ」と感じることが多く、自分の今の目の前の方だけではなく
今もどこかで、独学で悩んでいるエンジニアの方の助けになればと思い、記述をしてみようと思った次第です。
これはあくまで私の主観ですので、先輩エンジニアの方やスーパーエンジニアの方は、
またそこら辺のエンジニアがなんか言ってるわ、と見逃すか、暖かい心でコメントください。

##【経歴と自己紹介】

本業は、SESでプログラム組んでます。
「エンジニアになりたいけど誰も未経験なんて雇ってくれないわ、よし！一人でやろう」
で、フリーランスで３年実務経験（笑）を積んだ後に、会社員として３年目、現在に至ります。
使用言語は今はPythonでApi作ったり、解析やったりしてます。
元々はPHPでWebサービスばっかり作ってました。
言語にこだわりは持たないタイプ。器用貧乏。Mr.中途半端。

##【先に結論（忙しい人向け）】

全部は覚えなくていいんだよ。
正解はないよ、ルールはあるけど。

##【本編】

開発は覚えることが多いです

他の方も言われてるかと思いますが、まずは暗記することをやめてください。
もちろん覚えるのであれば覚えてもらっても構わないですが、効率がものすごく悪いです。

HTMLから学習をしはじめたとして、HTMLタグ109個全てを覚える必要はないということです。
ここで誤解しないで欲しいのは、知識としては「こういうタグがあるんだーへー」と何回かは目を通してください。
あとは、自分でサイト制作を数こなしていくうちによく使うタグであったり書き方を確立すべきです。

初めて作る料理をまずは、レシピ通りに作ってそれから繰り返しやっていく中で自分の味付けを確立するのと感覚は似てると思います。

ここで大事なのは、
書き方を覚える必要はないのです。やり方を覚えてください。

HTMLをかくときはまず、

1.HTML宣言が必要
2.必要に応じてmetaタグを書く
3.CSSを読み込む
4.bodyタグの中に書く
5.header main footerで大きく分けて全体を詰めていく。


<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
</head>
<body>
    <header>
        <!--ナビゲーションとかロゴとか-->
    </header>

    <main>
        <!--ここにメインの内容を持ってくる-->
        <section>
            <!--必要に応じてSectionなどで小分け-->
        </section>
    </main>
    
    <footer>
        <!--著作権表示のコピーライトとかサイトリンクとか-->
    </footer>

</body>
</html>

これさえ覚えてればあとは、**「このタグどうやって書くんだっけ」**となっても自分のやりたいことを調べれば大丈夫です。

HTMLを学習したいのであれば、おすすめはある程度タグの理解が深まった段階で、ダミーサイトもしくはコピーサイトを作成してみることです。
ただ、コピーサイトについてはサイト公開は必ずしないようにしてください。

フロントコーディングで一番難しいのは書き方に正解がないということ。
ただ正解がないからってめちゃくちゃにやっていいというわけではないので
せめてもの基礎的なコーディングルールぐらいは覚えるようにしてください。

idは重複NG
h1は１ページに一つまで
Class名はわかりやすく的確に
鬼のdivコーディングをしない

...etc

料理で例えるなら、
ポテトサラダに玉ねぎ入れる派入れない派~~（私は入れる派）~~
焼き鳥はタレ派塩派~~（私は塩派）~~

時にはコーディングに関する暗黙のルールの当たり前をぶつけられる時だってあります。
そんなときは、よっぽど変な事じゃなければ、なるべくそれに従うようにしてもらえれば良いのかなと思っています。

そんな衝突をなくすために様々な記法なども存在するので目を通してもらえれば良いと思います。

##【PHPとかバックエンド側の場合】

バックエンドプログラミング（ここではPHP）の場合も考え方は同じです。

Progateさんや、ドットインストールさんなどでとりあえず基礎は学んだけど、アプリの作り方がわからないって方多いと思います。
私もそうでしたし、めちゃくちゃ困りました。

TODOアプリを作成する例でご説明していきます。
~~POST（登録・更新）、GET（検索）、ログイン制御、SQLでのCRUDがあるのでこれできたら正直PHPはできたと言っても過言でh...~~

プログラム抜きでまずはHTMLと同様に全体を考えて固めます。

###今回必要な機能（最低限）

予定、開始日時、終了日時を入力・登録できる。
登録したら予定が一覧で確認できる。

###大枠を細分化と流れを構築する
ここは若干、経験が入ってきますが気合で慣れてください。

予定、開始日時、終了日時を入力・登録できる
1. 予定、開始日時、終了日時を入力できるようにHTMLを組む
1. ボタンを押されたら、送信された内容を受け取る
1. 受け取った値がプログラムが欲しい値か検証する
1. 問題なければ、DBに登録する
1. 結果を返す（成功・失敗）
登録したら予定が一覧で確認できる。
1. 登録された内容を表示するためのHTMLを組む
1. 登録されているデータをDBから取得する
1. 取得した結果を表示する


<?php


// 毎回POSTがあるか確認するのが面倒なので処理をまとめておきます。
function post($key) {
    // 指定した値を受け取れなかった時
    if (empty($_POST[$key])) {
        //NULLを返却してエラーを回避
        return NULL;
    }
    
    //ユーザから受け取った値をサニタイズ化して返却
    return htmlspecialchars($_POST[$key]);
}

// 毎回設定書くのはめんどくさいので接続処理はまとめときます。
function pdo() {
    
    // DB接続設定
    $dbh = "mysql:host=localhost;dbname=todo;charset=utf8";
    $user = "hoge";
    $pass = "hoge";
    
    $pdo = new PDO($dbh,$user,$pass);
    
    return $pdo;
}

// データ登録処理
function insert($data) {
    try {
        
        // 設定の呼び出し
        $pdo = pdo();
        
        // ダメだったらエラー
        if ( ! $pdo) {
            throw new Exception("DB接続エラー");
        }
        
        // SQLの処理を書く
        $sql = <<<QUERY
INSERT INTO
todo(
start_at,
end_at,
schedule,
) VALUES(
:start_at,
:end_at,
:schedule
)
QUERY;
        
        // SQLの準備
        $stmt = $pdo -> prepare($sql);
        
        // プリペアードステートメントを使用してプレースホルダーと実際の値の紐付け
        foreach($data as $key => $val) {
            $stmt -> bindValue($key,$val,PDO::PARAM_STR);
        }
        
        // SQL実行
        $result = $stmt -> execute();
        
        // データ登録失敗（ここは書いても書かなくても好みだと思います。）
        if ( ! $result) {
            throw new Exception("データ登録失敗");
        }
        
        // 値の返却
        return $result;
        
    } catch (PDOException $e) {
        exit($e -> getMessage());
    }
    
}

// 値のあるなし検証
function check_val($val) {
    if (empty($val)) {
        return FALSE;
    } 
    
    return TRUE;
}

/* ==========ここからTODOのデータ追加処理========== */

// 値の受け取り

// キーを:つきにしているのは、bindValueで紐付けを楽にするため。
$data = array(
    ":start_at" => post("start_at"),
    ":end_at"   => post("end_at"),
    ":schedule" => post("schedule")    
);

// 全部必須項目にするとして値があるかどうかは検証しておく。 
foreach ($data as $val) {
    //　値がなければ入力メッセージを作る
    if ( ! check_val($val)) {
        $error = "値を入力してください。";
        break;
    }
}

// errorがあればデータを追加せずにエラーを表示
if ( ! empty($error)) {
    echo $error;
    exit();
}


$result = insert($data);

echo "値を追加しました。";
exit;

細かいところは省きましたがおおよそこんな感じです。
あとはそれぞれの書き方を調べながら組んでいけばOKです。
MVCも使わずにユーザ定義関数だけでまとめてるので、読みやすいかと思います。

小さく作って大きく育てる

そんな意識を持ってもらえればきっと知らず知らずのうちにプログラムの流れを掴めるようになると思います。

##さいごに

プログラミングの世界って明確な答えが最初はなくて難しいと思います。
たどり着きたいゴールはみんな同じでもやり方は十人十色
基礎ある程度やったよって人はまずはミニマムアプリケーションを作成してみると良いかと思います。
これからは、HTML ~ PHPまでこれやっとけみたいなやつ書くようにしていきます。

この投稿がいつか誰かの気持ちを軽くできることを願っています。
最後まで、読んでいただきありがとうございました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up