プログラミングを勉強したいと思っている方は多いと思います。
プログラミングが少しわかると、実際にアプリケーションを作るだけでなく、ビジネスにどうやってプログラムを生かせば良いかも見えてきますから、プログラミングについて知っておくに越したことはありません。
そして、得にオススメはWEBプログラムです。
どこの会社もお店もブロガーも、サイトを開くのはWEB上。
しかも、従来のように、単にホームページを開くという時代を抜け出しつつあります。
ECサイトのように、商品を選んで支払いができるようにするサイトも増えてきました。
予約システムにリンクを張って、そのまま予約できるようにしている美容院なども普通に見られます。
あるいは、ポータルサイトであれば、色々な検索が可能になっています。
業種別の紹介をするサイトや、安値のお店を紹介するようなサイトだけではありません。
たくさんの店舗を有している会社などは、ユーザーが近くのお店を簡単に調べることがたできる機能をつけたいと思うことでしょう。
このように、より動的な仕組みを組み込んだWEBサイトが増えつつあります。
「私流」?
ここのタイトルは「私流」にしました。
「我流」と書くとちょっとガサツな感じなので「私流」にさせてください（笑）。
プログラミングを勉強するなら、
① プログラムを教えてくれる学校に行く。
② オンラインスクールを受講する。
③ ネットで「プログラム 入門」で検索して調べたり、無料チュートリアルの動画で勉強する。
④オンラインにせよ、オフラインにせよ家庭教師的なメンター(MENTAというサイトがありますね。)から学ぶ。
という、いくつかの方法があります。
私は、特に公平な比較ができる立場でもありませんので、どれでも良いと思います。
ただ、①と②と④はお金がかかります。
無料で勉強したければ③ということになります。
私も、学生時代にまで遡りますが、全て無料で勉強してきました。
全く無料でできないということはありません。
ここでは、無料で学ぶ方法について、伝授したいと思います。
もっとも、「私流」です。
が、しかし、「私流」が悪くて、「スクール」などの組織から学ぶのが本当に良いとは、そうとも限らないかもしれません。
「動きゃいいんだよ」という精神は案外大事ではないでしょうか。
ただでさえ、プログラムは、たえず「バグ」(不具合)に苦しめられますから、それが出なければ、それだけで立派なご褒美のようなものです。
もっとも、業界の流儀というのはあります。
変数の名前は、「aaa]じゃダメで「staffName」みたいにせよとか、日本に限らずプログラミング世界の流儀があったりします。
しかし、そういうのは後からやってるうちに身についてくるでしょう(笑)。
そういう仕来りにこだわっていると、かえって技術的イノベーションができなかったりするのが世の常です。
ですから、そこはあまりこだわらないというのが「私流」の意味です。
WEBプログラムに必要な言語
世の中には色んな言語があって、しかも、流行りすたりもあって、とても目移りしてしまいます。
しかし、私が私流に勧めるとすれば、私がやってきた、HTMLとCSSとPHPとJavaScript(JQuery)です。
ホームページ作りは、コンテンツマネジメントシステム(CMS)としてWordPressを使っているサイトが確か3割ぐらいあって、今も増えていますから、これに使われている言語であるこの4つを学ぶのが、無難ではないでしょうか。
各言語の難しいことは、各自で検索いただくとして(失礼)、簡単に説明します。
HTMLは、実際にWEB上に文字や画像を描くためのもので、マークアップ言語と呼ばれています。
一般的には、<○○ >■■■</○○>のように<>というタグで囲いながら記述していきます。
CSSは、その文字や画像のスタイルを指定するためのものですね。
別のファイルに書いて読み込むこともできますし、プログラムファイルの冒頭に書くこともできますし、HTMLのタグの中に書くこともできます。
PHPは、時と場合によって内容が変わるところに使う言語です。
例えば、画面を開いた時の日付を表示したければ、まさにPHPの役割です。
HTMLの中に、<php echo $aaa;?>のようにして割り込ませたりします。
データベースからデータを読み込んで書かせる場合も、PHPを使います。
ではJavaScriptは?
これは、いったんWEB上に表示された画面を部分的に書き換えるためのものと理解すればほぼ間違いはないでしょう。
動的な変更を可能にします。
このJavaScriptこそが、WEBサイトをだんだんとプログラムのようにしてきた張本人と言っても過言ではないでしょう。
従来の主流は、ボタンをクリックして別のぺージに跳ぶ、つまりページ遷移するというのがほとんどでしたが、それは、HTMLだけで可能でした。
(もっとも、飛んだ先で、変数の値を受け取ったりするのはPHPの役割です。)
しかし、最近は、ページ遷移しなくとも、そのページに留まりながら、ユーザーの指示に従って、画面を書き換えてくれる方式が増えています。
そこに活躍するのが、JavaScriptです。
そういう方式が増えてきたために、現在、JavaScriptの需要や人気は徐々に上がってきています。
プログラムを始める下準備には何が必要?
HTMLとCSSだけなら、下準備は要りません。
メモ帳で、それらを書いて、拡張子を.htmlとして保存すれば、画面を作り上げることができるはずです。
1分で始めたい人はそうしてください(笑)(失礼)。
しかし、PHPなどを使いたいとなると、サーバーの側で「レンダリング」してHTMLに書き換えてもらう必要がありますから、そうなるとサーバーが必要になります。
✳︎レンダリングとは
レンダリングとは、何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること。 出典: IT用語辞典
そして、このサーバーは、自分のパソコンに用意するか、レンタルサーバー のようなところと契約するかという二つの選択肢になります。
自分のパソコンに用意する場合は「ローカルサーバー」を立てるというような言い方をします。
XAMPPなどのソフトがあり、私もやったことはあります。
でも、どうなんでしょうか?
まずこれを使う人が多そうですが、案外面倒です。
また、テストサーバーとして必要という意見もあるのでしょうが、実際のサーバーはやはり必要になるわけですし、テスト環境と実際の環境と微妙に違う場合もあるというような話も聞いたことがあります。
ですから、「私流」たるところではあるかもしれませんが、私なら、最初からレンタルサーバー と契約することをオススメします。
月に1000円あまりとか、そんなに高いものではありません。
併せてドメイン名も取得する必要がありますが、これは年間1000円余りぐらいでしょう。
レンタルサーバー と契約したら、次に、アップロード(及びダウンロード)するためのソフトが必要です。
私はFileZillaを使っていますが、これで不満に思ったことはほとんどありません。とても活躍してくれます。
以上の通り、どこかのレンタルサーバー と契約をしてもらって、無料のFileZillaをインストールすれば、プログラミングの勉強の下準備は終わり! です。
あっすみません。もう一つインストールしないといけないですね。
ブログラムを書くためのテキストエディタです。
最初は、Windowsをお持ちの人なら、無料のサクラエディタぐらいがいいかと思います。
MACについては何がいいか、私も今は知識を持ち合わせていないので、ネットで「テキストエディタ お勧め」として検索してお調べいただくと丁寧な比較をしていくれているサイトが見つかると思います。
(あらゆる疑問をネット検索で解決する姿勢は、独学には不可欠です !)
最初は、コーディングがいかに早くできるかなどは、あまり考えなくて良いでしょう。
使いやすいのが一番です。
私も、4種類ほど使った経験がありますが、今は、Visual Studio Codeです。
これはやはり高速コーディングにはとても便利です。色分けされるので、バグの発生もかなり減らすことができます。
そういうのに徐々に乗り換えていくという考え方が良いと思います。
どうやってプログラムを書き始める?
私の経験から言っても、プログラム関係で難しいことは、全て最初にあります。
スタートして少し慣れてくると、あとはひたすらネット検索して調べるだけで、「訳わから〜ん!!」と叫びたくなる場面はどんどん減っていきます（笑）
したがって、最初の「訳わから〜ん」という人が続出することがないように、その辺りのコツを、ここでご説明申し上げているわけです(笑)(失礼)
まずは、テキストエディタを開いて、次のように書きましょう。
この辺りが「私流」の教え方です(笑)。
<html>
<head>
<style>
/*ここにスタイルのCSSを書く*/
</style>
</head>
<body>
/*ここに表示したいHTMLのタグを書く*/
</body>
</html>
ネットでは、もっと手の込んだ書き方を紹介している方もありますが、基本的に最低これぐらいで問題なく動きます。
そして、これを、ファイル名を付けて保存し、その保存したものをFileZillaでアップロードします。
ファイル名がTESTなら、’TEST.php’として保存すれば良いでしょう。
普通は’TEST.html’とする人の方が多いかもしれません。
私はいつもphpで保存するので、そこは詳しく知りません(失礼)。
ただ、.phpとすれば、コードの中身を気にすることなく、オールマイティかもしれないです。
サイト名にphpと表示されてしまいますが、それを気にする方は、それを消す方法もあるようですから、試してください。
「PHPとJavaScripはどこに書くんですか?」という質問があるかもしれません。
よく聞いてくれました。
とはいえ、PHPについてはさっき説明しました。
基本的には、HTMLのタグの間に、<?php echo $aaa;?>のようにして潜り込ませます。
じゃ、JavaScriptは?
実は、これは案外融通がきくようですね。
この辺りをわかりやすく説明してくれているサイトがなくて、私も最初、わからなかったのですが、そこはあまり気にしなくて良いです。
つまり、どういうことかというと、JavaScriptという言語は、レンダリングが終わって、画面表示された後に、「さあ、ユーザーさん、何をしたいですか?」という時のために使われる言語です。
だから、その約束事を、パソコンに伝えておきさえすれば良いわけで、初めの方に書こうが、後ろに書こうが普通は関係ないということになります。
換言すると、画面表示の前段階で、HTMLやら、CSSやら、PHPと協同して何かをするということはないわけです。
(ここは基本的にはないというぐらいにしておかないと厳密ではないのかもしれませんが)
もちろん、画面表示の内容をロードした直後にJavaScriptが勝手に動き出すように仕組むことはできます。
しかし、その場合も、ロード(読み込み)した直「後」です。
というわけで、JavaScriptは初めの方に書いてもらっても、最後に書いてもらっても自由ですが、私は、最後に書いています。
ライブラリとして外から読み込むときのJavaScriptは、普通、冒頭の<head>と</head>の間に書きますが、それ以外は、私は、最後に書いています。
次のような感じです。
<html>
<head>
<style>
/*ここにスタイルのCSSを書く*/
</style>
</head>
<body>
/*ここに表示したいHTMLのタグを書く*/
</body>
</html>
<script>
/*ここにJavaScriptを書きます。*/
</script>
最後に書くのは、やはり、画面表示の主体となる言語を先に書いて、後から画面操作を可能にするための言語がJavaScriptですから、その趣旨に添った順番は後ろだと思うからです。
「いや、JavaScriptも普通は別ファイルだよ。」という業界の方も多いかもしれませんが、別に一緒でもちゃんと動きますからご心配なく(笑)
「CSSも普通は別ファイルだ」という意見も多いかと思います。
しかし、私に言わせれば、「そういうややこしいことを言うから、プログラム嫌いが増えるんですよ」ということになります（笑）
最初は、どーせ(失礼)短いプログラムしか作らないのですから、それを「3つに分けてどーすんねん?」という話です（笑）
以上で、皆さんも、WEBプログラムとして、HTMLとCSSとPHPとJavaScriptの四つを自由自在に操る下準備ができました !!
めでたし、めでたし !
つまづきやすい点
しかし、最後に、入門者がつまづきやすいポイントだけ書いておきましょう。
○ エンコードの指定
昔のサイトを開いたりすると、エンコードが色々違っていたりして、文字化けしたりすることがあります。
そういう時は、headの中に
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
と入れてみてください。
もっとも、このおまじないは、いつも付けるべきという意見も多いと思います。
ファイルを保存する時も、今はUTF-8が普通ですので、それを指定して保存しないと文字化けになったりしますので注意しましょう。
あと、サクラエディタではファイルを保存する時、BOM付き、BOM無しで引っかかったりすることがあるやもしれません。
いったん設定してしまえば、後に問題になることはないと思いますが、もし、期待通りのことができなければ、そのあたりをググって設定を変えてみてください。
デバッグ方法
それから、入門者がプログラミング嫌いにならないために、是非とも書いておきたい点は、デバッグ方法です。
最初は特に、(いやだいぶん慣れてからも)、英語の長〜いエラーメッセージが出てきて、メンクラいます。
「なんか悪いことしたかな?」「パソコンが壊れちゃわないだろうな?」とか余計な心配までしてしまうものです（笑）
しかし、エラーメッージは初心者の場合、せいぜい20通りぐらいなもんですから、そんなにビビる必要はなく、むしろ、「エラーの原因を教えてくれてありがとう」ぐらいに思った方が良いです。
英語のよくわかる人は読んだ通りですが、英語が少しできてもわかりにくい言い回しだったりします。
が、まずは、指定されたファイルの番号のあたりがおかしな記述になっていないか、見直してみましょう。
「;」などが抜けているだけでエラーになりますから、一字一句チェックする必要があります。
で、それでもわからなければ、エラーメッセージの冒頭10文字ぐらいをコピーして、ネット検索しましょう。
そうすると、親切なプログラマーの仲間たちが、アドバイスを書いていてくれているサイトが見つかります。
エラーメッセージの後に、私は「は」も付け足しておきます。
そうすると、日本後のサイトが紹介されますから、「は」のような日本語も付け足して検索した方が良いです。
一番、困るのは、画面が真っ白になってしまうことと、フリーズしてしまうことですね。
これが頻繁に起こって訳がわからなくなると、誰だってプログラミング嫌いになることは必定です。
まず簡単なフリーズしてしまう場合から。
これは、ほとんどのケースが無限ループが原因と思います。
まずは、サーバーに負荷がかかり嫌がられますから、タブで、そのWEBサイトを消しましょう。
そして、プログラムファイルのコードのループのところを見直します。
for($n=0; $n<10; $n++){ }
というのが普通ですが、これを
for($n=0; $n=10; $n++){ }
とやったりすると、無限ループになります。(改めてテストしたくもないのでしませんが、多分これでなったと思います)
$nが0から1ずつ足して、10回同じ作業をしてくれというのが上の命令ですから、規定通りの書き方をしないと、フリーズしてしまいます。
もう一つ、画面が白くなってしまう場合ですが、プログラミングに慣れて、データの送信などをしだすようになると起こることがあるかもしれません。
データの送信先ファイルでは、必要な作業だけさせて、すぐに元のファイルに戻ってきてもらう(リダイレクトさせる)ことが多いですが、そのために、header(‘location: aaa.php’); というように、header関数を使います。
ここの作業をするだけのファイルは、作業だけなので、基本的にphpしか使わないのですが、それなのに、htmlを使って画面表示をさせようとしたり、間違えて全角スペースなどが混じっていたりすると、おかしなことになります。
「headerで戻ってきて欲しいはずなのに、なんで画面表示のコードがあるんや?!」と怒られるわけです。
そういう時に、パソコンが訳が分からなくて真っ白になるということが、確か(失礼)、あったように思います。
以上は基本的にPHPのエラーですね。
サーバーがレンダリングする際に「これじゃ、どうしたいのかわからんぞ?」というわけです。
HTMLのバグ
あとは、HTMLとCSSとJavaScriptのバグについても、書いておきます。
HTMLのバグとして、特に注意したいのは、タグの閉じ忘れです。
これがあると、レイアウトは普通とんでもなく崩れます。
逆にいうと、いきなり、レイアウトがとんでもなく崩れたら、タグの閉じ忘れを疑うと良いです。
CSSのバグ
CSSが思い通りに効かないということは、私もいまだにしょっちゅうあります。
大半は、クラス名が間違えている。
あるいは、ID名をつけているのに、クラス名として指定しているなどが多いです。
あるいはまた、だんだん複雑な長いコードを書くようになってくると、別のところで指定していて、打ち消されてしまっているというようなことがあります。
他に、要素の位置指定を行うためにposition: absolute;と position:fixed;は、要素が宙に浮いた感じになるので、その後に書いた要素は、下に潜り込みます。
この辺りの指定を使い出すと、どんどんCSSの難しさがわかってきますから、そこは各自苦労しましょう（笑）(失礼)
JavaScriptのバグ
基本的に、JavaScriptはバグがあると全て反応しなくなります。
ですから、どこでおかしな書き方をしているかを突き止めることが重要になります。
開発者用のツールを利用される人も多いかもしれませんが、私は、それを開くのが面倒なので、自分で探すことが多いです。(良くないかも（笑）)
一番多いのは、定義されていない変数を使おうとすると反応しなくなります。
aaaという名の変数を使いたければ、使用する行より前に、var aaa = 2; などとどこかで初めに定義しておきましょう。
配列変数もaaa=[ ];などとあらかじめ書いておかないと、相手にしてもらえません。
デバッグのためのコメントアウト
どの言語の場合でも使いますが、どこにエラーの原因があるかわからない時は、コメントアウトの方法を使うと便利です。
一行だけなら、 // を最初に付け、
複数行なら、 /* */で挟みます。
ただし、HTMLの場合は、<!— —>でひとまとまりのタグを挟みます。
こうすると、それらはコメント行になりますから、プログラムの動きから切り離されます。
コメントアウトして、エラーが出なくなったら、エラーはそのコメントの中にあったということが判明するわけです。
そうやってして、コメントアウトをする場所を順次変えていけば、最終的にどこにエラーがあるかが判明します。
デバッグのためのalert
これはJavaScriptに限った話ですが、私は、alertをよく使います。
一般的には、console.log()というのを使うように説明している人がほとんどで、
alertをあまり歓迎しない人もあるようですが、そこは私にはいまいち理由がよくわかりません。
開発者ツールを開かなくて良い分、デバッグが早いのではないかと思うのですが。。。。。
また、通常のエディタには、エクセルVBAのような一行ずつ実行するような機能がついていないということがあります。
それで、その代わりとして、プログラムの途中に「alert(nn);」のように入れます。
そうすると、そこでプログラムは止まり、その時のnnの値を(警告)表示してくれます。
(クリックすると、残りのブログラムを実行してくれます。)
これを使うことで、本当に変数に値が入っているのか、期待した正しい値が入っているのかなどを知ることができます。
PHPのデバッグ
PHPの場合、値として何が入っているか知りたい時は、echo $nn;のように書かせるのが普通でしょう。
最初は使いませんが、配列変数の場合は、var_dump($nn)という関数もあります。
まとめ
以上、最初の入門者がつまづきやすいポイントに絞って補足いたしました。
WEBを自在に操りたいならば、HTML、CSS、PHP、JavaScript(JQuery)がお勧めであること、プログラミングを開始するためには、レンタルサーバー の契約をして、アップロード・ダウンロード用のソフトと、テキストエディタをインストールすること、HTML、CSS、PHP、JavaScript(JQuery)の4つの言語は、最初はファイルを分ける必要も特にないことなどを書いてきました。
(✳︎私はJavaScriptと言っても、ほぼJQueryの書式を使っています。JQueryを使うことに対して、JavaScript本来の書式を使うことを「バニラなJavaScript」と英語で形容されることがあります。つまり、色付きのフレーバーが何もないソフトクリームのように、そのまんまであるという意味でしょう。これに対して、プログラムファイルの冒頭でライブラリのJQueryを読み込んでおくと、JavaScriptのほとんどの書式をより簡明な書式に書き換えることができます。私は、このJQueryがお勧めなのですが、人によっては勧めない人も少なくありません。これも理由がよくわからない話です。少なくとも言えることは、私はJQueryが大好きということだけです。)
また、つまづきやすいポイント、デバッグの方法についてもご説明しました。
最初の関門を突破しさえすれば、プログラムはどんどん面白い世界を開いていってくれます。
次から次へと試してみたいことが出てくるはずです。
自分で作ったものを、世界中で閲覧できるようになるわけですから、これが楽しくないはずがありません。
皆様のご健闘を祈ります。