- 投稿日:2020-10-21T23:06:31+09:00
Webエンジニアになるにあたっての学習方法
【対象者】
これからWebエンジニアやってみようかなって人
【まえがき】
初めまして、Webエンジニアになって早6年目。
Qiitaは読む専門だったのですが、ありがたいことに1年半ほど前からオンラインスクールの講師をやらせてもらってます。
その中で、「自分もそうだったなぁ」と感じることが多く、自分の今の目の前の方だけではなく
今もどこかで、独学で悩んでいるエンジニアの方の助けになればと思い、記述をしてみようと思った次第です。
これはあくまで私の主観ですので、先輩エンジニアの方やスーパーエンジニアの方は、
またそこら辺のエンジニアがなんか言ってるわ、と見逃すか、暖かい心でコメントください。【経歴と自己紹介】
本業は、SESでプログラム組んでます。
「エンジニアになりたいけど誰も未経験なんて雇ってくれないわ、よし!一人でやろう」
で、フリーランスで3年実務経験(笑)を積んだ後に、会社員として3年目、現在に至ります。
使用言語は今は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は1ページに一つまで
- Class名はわかりやすく的確に
- 鬼のdivコーディングをしない
...etc
料理で例えるなら、
ポテトサラダに玉ねぎ入れる派入れない派(私は入れる派)
焼き鳥はタレ派塩派(私は塩派)時にはコーディングに関する暗黙のルールの当たり前をぶつけられる時だってあります。
そんなときは、よっぽど変な事じゃなければ、なるべくそれに従うようにしてもらえれば良いのかなと思っています。そんな衝突をなくすために様々な記法なども存在するので目を通してもらえれば良いと思います。
【PHPとかバックエンド側の場合】
バックエンドプログラミング(ここではPHP)の場合も考え方は同じです。
Progateさんや、ドットインストールさんなどでとりあえず基礎は学んだけど、アプリの作り方がわからないって方多いと思います。
私もそうでしたし、めちゃくちゃ困りました。TODOアプリを作成する例でご説明していきます。
POST(登録・更新)、GET(検索)、ログイン制御、SQLでのCRUDがあるのでこれできたら正直PHPはできたと言っても過言でh...プログラム抜きでまずはHTMLと同様に全体を考えて固めます。
今回必要な機能(最低限)
- 予定、開始日時、終了日時を入力・登録できる。
- 登録したら予定が一覧で確認できる。
大枠を細分化と流れを構築する
ここは若干、経験が入ってきますが気合で慣れてください。
予定、開始日時、終了日時を入力・登録できる
- 1. 予定、開始日時、終了日時を入力できるようにHTMLを組む
- 2. ボタンを押されたら、送信された内容を受け取る
- 3. 受け取った値がプログラムが欲しい値か検証する
- 4. 問題なければ、DBに登録する
- 5. 結果を返す(成功・失敗)
登録したら予定が一覧で確認できる。
- 1. 登録された内容を表示するためのHTMLを組む
- 2. 登録されているデータをDBから取得する
- 3. 取得した結果を表示する
<?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までこれやっとけみたいなやつ書くようにしていきます。この投稿がいつか誰かの気持ちを軽くできることを願っています。
最後まで、読んでいただきありがとうございました!
- 投稿日:2020-10-21T20:38:07+09:00
MySQL初心者の私がよく書き込みでハマるポイント
pythonからMySQLに書き込みを行う時、いつもハマる。
今回こそハマりどころメモしておく。実施内容のイメージ
Pythonを使ってローカルのcsvをローカルにたてたMySQLやGoogle Cloud PLatformのMySQLにデータを書き込む。
環境
Python3
mysql-connector
GCPのCloud SQL(MySQL)(今回は)
接続方法やSSL化については今回は省略。純粋にSQL文のハマりどころについてです。書き込む際のコード
main.py# -*- coding: utf-8 -*- import os import sys import time import glob import shutil import datetime import logging import traceback import pandas as pd import mysql.connector import ssl ssl.match_hostname = lambda cert, hostname: True def insert_sql(): schema = 'hogehoge2'#db名のこと connection = mysql.connector.connect( port="3306",#基本はこのポートを使うことが多い host='**.**.**.**',#gcpのIP user='hogehoge', password='fugafuda', db=schema, charset='utf8', ssl_ca="./cloudstorage_cert/server-ca.pem",#証明書を使いたいので今回はこのフォルダにおいて指定 ssl_cert="./cloudstorage_cert/client-cert.pem", ssl_key="./cloudstorage_cert/client-key.pem" ) df = pd.read_csv(filename,engine="python") for r in range(df.shape[0]): cur = connection.cursor() sql = "insert into schema.table (col1,col2,col3,col4) values ('%s','%s',%s,%s);"%( datetime.datetime.now(), str(datetime.datetime.now()), 100, 1.5 ) print(sql) cur.execute(sql) cur.close() connection.commit() connection.close() print("done") if __name__ == '__main__': insert_sql()注意ポイント
1.テーブルを指定するとき、ちゃんとスキーマ(db)を記載する
my.sqlダメな例 insert into mytable (datetime,col2,col3,col4) values ('2020-10-20 10:39:13.252105','2020-10-20 10:39:13.252105',100,1.5); いい例 insert into myshema.mytable (datetime,col2,col3,col4) values ('2020-10-20 10:39:13.252105','2020-10-20 10:39:13.252105',100,1.5);2. 文字列や時間など数字ではないものは、SQL文の中でシングルクオートで囲む
example.py#ダメな例 sql = "insert into myshema.mytable (datetime,col2,col3,col4) values (%s,%s,%s,%s);"%( temp.loc[r,"DateTime"], str(temp.loc[r,"DateTime"]), 100, 1.5 ) #いい例 sql = "insert into myshema.mytable (datetime,col2,col3,col4) values ('%s','%s',%s,%s);"%( temp.loc[r,"DateTime"], str(temp.loc[r,"DateTime"]), 100, 1.5 )3. connectionに対してcommit()しないとデータが反映されない
connection.close()は忘れないのだが、connection.commit()を忘れてデータが更新されないことがある。cur.commit()はしない。connectionでcommit()することに注意。
以上のあたりでよくハマる。sql文の最後の;はあってもなくても動作した
- 投稿日:2020-10-21T16:06:25+09:00
caching_sha2_passwordでpython3.xで動かず詰まった点について
環境
- OS :macOS High Sierra バージョン10.13.6
- python :3.8.0
- MySQL :8.0.21
状況
python3を使って、MySQLと接続を試した。
だが、
Authentication plugin 'caching_sha2_password' is not supported createMysqlConnecter
というエラーがでて先に進めなかった。python 2.7.16だとこれを参考にして動いたのだが、
https://qiita.com/yusuke_dev/items/7f0ca12ced72363f9448結論
sample.pyimport mysql.connector as mydb conn = mydb.connect( host=_host, port=_port, user=_user, password=_passwd, database=_dbname, auth_plugin='mysql_native_password' )connect関数に
auth_plugin='mysql_native_password'
を入れることでpython3.8.0でも動いた。
- 投稿日:2020-10-21T16:06:25+09:00
caching_sha2_passwordによるエラーでpython3.xで動かず詰まった点について
環境
- OS :macOS High Sierra バージョン10.13.6
- python :3.8.0
- MySQL :8.0.21
状況
python3を使って、MySQLと接続を試した。
だが、
Authentication plugin 'caching_sha2_password' is not supported createMysqlConnecter
というエラーがでて先に進めなかった。python 2.7.16だとこれを参考にして動いたのだが、
https://qiita.com/yusuke_dev/items/7f0ca12ced72363f9448結論
sample.pyimport mysql.connector as mydb conn = mydb.connect( host=_host, port=_port, user=_user, password=_passwd, database=_dbname, auth_plugin='mysql_native_password' )connect関数に
auth_plugin='mysql_native_password'
を入れることでpython3.8.0でも動いた。
- 投稿日:2020-10-21T15:06:37+09:00
MySQL 8.0 で csv データのインポートで詰まった
MySQL 8.0 からはローカルファイルのデータ読み取りはデフォルトだと禁止されてるようです。
テスト用の DB 立てようとしたら詰まったのでやり方を記しておきます。環境
- mysql
- Ver 8.0.22 for Win64 on x86_64 (MySQL Community Server - GPL)
- pc
- Windows 10 Pro
MySQL 起動
ローカルファイルの読み取りできる状態で起動します。
mysql --local-infile -uroot -pcsv 追加まで
以下を MySQL 上で順番に実行して csv のデータを追加します。
-- サーバー側でインポートを有効にするオプションの設定 SET GLOBAL local_infile=on; -- データベース作成 CREATE DATABASE {データベース名} DEFAULT CHARACTER SET utf8mb4; -- データベース選択 USE {データベース名}; -- テーブル作成 -- このデータをインポートする前提のスキーマ指定 -- https://www.kaggle.com/c/demand-forecasting-kernels-only/data?select=test.csv CREATE TABLE {テーブル名}( date DATE NOT NULL, store int(11) NOT NULL, item int(11) NOT NULL, sales int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- CSV インポート LOAD DATA LOCAL INFILE "{csvデータのパス}" INTO TABLE {テーブル名} FIELDS TERMINATED BY ',' ;備考:環境変数確認
MySQL のパスが通ってなかったらGUIで環境変数を確認/追加できます。