「プログラミングを始めるならPython１択」
といっている私ですが、今回、HTML/CSSに加え、JavaScriptとPHPを学習しました。
これらの言語を学習した上で、
「これは非常によいツールができそうだ。」
と思い作成したのがこちらのページです。
重症度を判定できるスコア計算システムです。
ここではHTML/CSS、JavaScript, PHPを学習した方法と学習した経緯について説明したいと思います。
勉強方法：主にUdemyの講座
学習方法：１日１時間（早朝）を３ヶ月
- HTML/CSSとJavaScriptを学習する
- PHPを学習する
- サーバーへのアクセスを学習(.htaccess, 正規表現など)
１．HTML/CSSを学習するきっかけ
学習するきっかけは、
「Pythonを使用してWebアプリを制作したい」
とおもったのがきっかけでした。
Pythonは統計処理、機械学習、画像解析など使用用途がとても広いのが特徴ですが
「使用環境がないと動かない」
のが最大のネックです。
そのため、研究している後輩からの質問に答えるときも
画面を開いてターミナルでコードを打ったりしているうちに敬遠されてしまいます。
そこで、
とふと思ったのがきっかけでした。
調べているうちに、Pythonには
「Flask」「Django」
というフレームワークがあることがわかりした。
「フレームワークってなに？」
と思いましたが、学習するうちに
これらの機能をつかうと
「Pythonによる計算機能を提供するようなホームページが作れる」
という事がわかりました。
2. Flaskを用いた計算Webの作成
次に、Flaskを勉強し、オイラー角という、回転角度を求めるページを作成しました。
こんなページです
⇒ オイラー角計算のサイト
ちなみにFlaskの導入についてはこちらの講座で学習しました。
Python and Flask Bootcamp: Create Websites using Flask!
初心者がFlaskに必要なPython, html, cssを学びながら基本的なFlaskのサイト構築の流れを学習できるコース。英語だがわかりやすい。 エディタとしてAtom(無料)を使用。
当時あった日本語の講座は、単一の簡単なアプリを作成するものでしたが、この講座は基礎からしっかり教えてくれます。
後輩にも喜ばれましたが、Flaskで表示されるページはHTML, CSSで記載されます。
計算機能をもつページを提供すると
どうしても
「データをページ上で受け取る」
↓
「データを処理する」（ここはPythonのみなのでなれている）
↓
「データをホームページに表示する」
という流れが必要です。
この
「データの送受信とページへの表示」
のところを扱ったことがなく、
Google Chromeなどでページ検証機能を使用する時にとても困りました。
そのため
と決意しました。
3. HTML,CSS, JavaScriptの学習
私の場合、「Udemyの講座」で学習しました。
理由は以下のとおりです
- 講座を購入すればずっと勉強できる
- 比較的安い（バーゲンセール中）
- 環境構築から説明してくれる
いわゆるサブスク（定期購入）タイプではなく、一度購入したら、以後お金を払わなくてもその講義はずっと受けられます。買いだめしておいてあとでいくら受講してもよいわけです。
Udemyはよくバーゲンセールを行なっており、その間は講座の価格が10分の１から20分の１まで安くなります。
具体的には２万円くらいの講座が２千円くらいで購入できます。
実際にどのように自分のパソコンで環境を構築し、どのようにホームページをアップするか、開発用のソフトなども丁寧に説明してくれる講義が多いです。 Progateなどはホームページ上ですぐにコードを動かせる反面、実際に環境を自分で構築するとなるとテキストを読まなければなりません。
１日１時間ずつ学習するようにしました。
PythonやFlaskと比較し、HTML/CSSは学習者が多いためか教材がとても多いのが印象的でした。
私の受講した「ともすた」さんの講座は非常にわかりやすく、HTML/CSSからJavaScript, Ajaxなど動的なページの作り方までとてもスムーズに勉強することができました。
[HTML/CSS/JavaScript] フロントエンドエンジニア
になりたい人の Webプログラミング入門
4. PHPの学習
HTML/CSSに加え、JavaScriptも勉強しましたが、
という段階になりました。
データを受け取って処理しているのは「PHP」という言語のため、この言語も学習することにしました。
キャンペーンのときに購入しておいた、ともすたさんのPHPの授業を受講しました。
PHP+MySQL（MariaDB） Webサーバーサイドプ
ログラミング入門
PHPの文法から、フォームで受け取って表示するまでのページの背景でのデータの流れをていねいに学習することができる。
HTML/CSSの時と同様、とても丁寧な授業でスムーズに進めることができました。
プログラムを書くエディタも「VSCode」だったので、導入も楽でした。
5. サーバー側の処理の学習と+α
ここで、入力するホームページを作成する知識はできましたが、ここで新たな疑問が出てきました。
「ホームページってどうやってサーバーにアップするんだろう・・・」
「目的のホームページにどうやってアクセスできるようにするんだろう」
Pythonしか知らなかった自分は当然この時点で途方にくれます。
どうも調べてみるとサーバー側での処理の知識が必要のようです。
これらの知識を学習するために「CodeMafia」さんのPHPの授業をUdemyで受講しました。
【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
PHPだけではなく、WEBの基本的な仕組みや、サーバー側へのアクセスをどのようにコントロールするかについても学習できる。Bootstrapの使い方もとてもわかり易い。題名からは裏腹に繊細な講義で、スピードはすこし早め。ともすたさん同様エディタはVisual Studio Code、PHPはMAMP使用。
名前と題名から、
「けっこういかつい授業なんだろうな〜」
と構えていましたが、１単元ずつが非常に充実していて勉強になりました。
特徴として、ともすたさんの授業が懇切丁寧であるのに対し、Codemafiaさんはサバサバした感じでどんどん進む印象がありました。
どちらも「VSCode」をエディタで使用し、「MAMP」というソフトを中心にPHPを構築していくので、導入部分がとっつきやすかったのが幸いしました。
この講座ではPHPに加え、
- 簡単なAPACHEの説明
- .htaccessの書き方（正規表現含む）
- Bootstrapの使い方
サーバー側での動きがどんな感じかざっくり説明してくれます。
どのようにページにアクセスさせるか。リダイレクトはどうするかなど自分である程度コントロールできるようになります。
Bootstrapはページをデザインするときに便利なツールですが、既存のものを用いるだけでなく、どのようにカスタマイズするかわかりやすく教えてくれます。SCSSでデフォルトを変更するというのが目からうろこでした。
など、プラスαにあたるページ制作に必要な知識をゼロからでも学習することができました。
PHP自体も最初に学習したともすたさんの講座とちょうどよい具合で重複していない部分が多く、より知識の幅を広げることができました。
（具体的にはページ作成のときの関数の有効な使い方など。）
補足 データベースに関して
今回紹介したどちらの講座にもデータベースに関する授業も含まれていましたが、いまのところデータベースに関しての知識はあまり使用しなそうなので、データベース関連の授業は飛ばしたり早送りしたりして学習しました。
それでも十分内容は把握できます。
6. 教科書
オンライン学習は大変効率がよいですが、字引きがわりに使用するときには一目で見れないのが不便です。
実際ホームページを書く時教科書としては字引き代わりにManaさんの本をKindle版で購入し２画面にして読みながらコードを書いたりしました。
7. まとめ：Python経験者がWeb言語を学んだ感想
Python経験者として新しくWEB言語（HTML/CSS JS PHP)を学んだ感想をまとめます。
① 文法が似ているので頭に入りやすい
繰り返しや条件分岐など、プログラムの構造はPythonで学んでいるため、
「ここはPythonでいうと、この記述か」
という感じでスムーズにすすめることができます。
方言を聞いてなんとなくわかるのと同じ感じでしょうか。
第２外国語を習うほどのストレスはなく進んでいけます。
② 動くので楽しい
特にHTML/CSSは多少何かしらエラーがあっても表示されます。
Pythonは１個カッコが抜けたりするとまったく動かなかったりしますが、HTMLは多少文法が違っていてもページの表示までは持っていけます。
ストレスはこちらのほうが断然すくないですね。
しかし、逆にエラーがあってもホームページは表示されるため、
「エラーに気づかずにアップロードしてしまう」
ということを何度もやってしまいました。
アップロード後のページを検証してみるとエラーだらけということもあるので注意が必要ですね。
③ 連携が面白い
入力のここはJavaScriptで変化させて、計算はPHPでやって、、
という具合に、部品を組み合わせて完成品のページを作成していくのが非常に面白かったです。
JavaScriptやAjaxには、動作に対応してページの表示を変える面白い機能がいくつもあり、最高に効率がいいページとはいかなくても、こちらの欲しい機能が備わったページを作ることができます。
さらにPython Flaskと連携させればいろんな機能をもたせることができそうです。
④ 教材の質が高い
ホームページ制作に関わるWEB言語は学びたい人も多く、オンライン教材、教科書の質が感動するほど高かったです。
「誰でもWebエンジニアを目指せる」
という表現はけっして大げさではないようです。
Udemyは購入するならセール中が狙い目です。
普通に2万円くらいのものが2千円になっていたりします。
