もしかしたら気づいている人もいるかもしれないけど、このサイトの管理人である自分はプログラミングを使って仕事をしていたりする。技術的なことはあまりこのサイトでは書いていないけどね。GASやノーコードについてちょっと書いたぐらいかな。
まあ、なんでこんなプログラミングに関することを言っているかというと、この前友人がプログラミングの勉強をし始めたみたいなことを言っていたから。なんかHTMLなんかを学び始めたらしい。そこでふと、最初から知っておくといいプログラミングの基本ってなんだろう？っていう疑問が湧いた。
だから今回は自分が思うプログラミングを学び始める時に知っておいた方が良さそうなプログラミングの基本っていうやつを書いていきたいと思う。友人に向けて書くから、口調は適当にいく。
管理人プログラミングできるの？
プログラミングの基本語るとか言ってるけど、お前本当にプログラミングなんて分かるのかよ？って思ったかな僕の友人よ。あんまり知らないだろうからちょっとだけ自分のことを書くと、自分はエンジニア業務を2015か2016年ぐらいからやっている。どんな言語を業務でやってきたか、やっているかというとこんな感じだろうか。
- Ruby
- PHP
- Go
- JavaScript
- TypeScript
- Ruby on Rails
- Laravel
- Vue.js
- React.js
サーバーサイドだけとかフロントエンドだけ業務でやっていたっていうことはあんまりなくて大体両方やってた。インフラは詳しくない。サーバーサイドとかフロントエンド・インフラとか何言ってんの？って思うかもしれないけど、その辺りは後でちょっと話すよ。言語なんて並べられても分からないだろうけど、まあ何となくちょっとできるのね・・・ぐらいに思っておいてくれ。
プログラミングの基本
そんな自分が思うプログラミングの基本だけど、基本って難しいよね。技術的な基本のこと（ifとかwhileとか）はあまり話したくなくて、もっと根本の基本的なことを書きたいんだ。これから学び始める君にそんなこと言っても「何言ってんだこいつ」で終わっちゃいそうだからね。だからできるだけ技術的な用語とかはあまり使わないでいきたい。
プログラムは論理の塊
まずプログラミングを学び始める君に知っておいてもらいたいのは、プログラムは論理の塊だということだ。「ここがこういう風になっているから、ここの処理はこういう結果になる。」みたいなもの。
その論理のパズルを組み立てていくのが、プログラミングと言ってもまあいいだろうか。適当に書いて動いた！ってなってもそれは何かしら動く理由がそこにあるんだよ。適当にパズル組んでたまたまうまくいっただけだ。
だから、なんかよくわからないけどエラー起きたわ！っていう場合も、組み合わないピースがどこかにあるんだ。何かしらの原因がどこかにあるはずだよ。（まあ、それを見つけるのが難しかったりするんだけどね）
プログラミングにも種類があるよ
君はHTMLをやっていると言っていたけど、それは見た目を作るものだっていうのは何となく分かったかな。日々ChromeやSafari何かを使ってwebサイトを見ていると思うけど、あれらにはHTMLが使われているよ。
Chromeを使っているなら[alt + command + i]を押して開発者ツールっていうやつを出して[Elements]っていう部分を見てみて欲しい。その画面に使われているHTMLが出てくる。
こんな風に画面にはHTMLが使われているのだ、今君が勉強しているHTMLはこういった画面を作るのに使われるぞ。
画面のデザインには何が使われるの？
HTMLは画面を作ることができるけど、HTMLだけだとかなり簡素なデザインにしかならない。あくまで大枠みたいなものを作ってくれるのがHTML。
HTMLとはプログラミングをやり始めた時に最初にやる慣習が「Hello World!」を表示させることだけど、Hello World!はもう表示させただろうか。Hello World!をHTMLで適当に書いてみるとこんな感じだ。（Codepenっていうオンラインエディタを使っているよ）
下の結果に[Hello World!]って表示されているけど、文字だけでかなり質素だよね。「こんな文字だけじゃ嫌だ！デザイン良い感じにしたい！！」って思うはず。そんな時に登場するのがCSSというやつ。CSSを使うとHTMLに対して装飾を加えることができるんだ。適当に書いてみるとさっきのHello World!がちょっとおしゃれになる。
さっきの[Hello World!]がちょっと良い感じになったよね。こんな風にWebページの見た目の部分はCSSで成り立っているんだ、友人よ。逆にいうとHTMLとCSSをマスターしてしまえば、見た目の部分を作ることはできる。もし君がWeb制作の分野でやっていきたいと思うならこの辺りを存分に勉強するといいと思うぞ。
画面の動きはどうつけるの？
HTMLとCSSで画面を作れたけど、なんか動きつけたい。例えば、メニュークリックしたらそれが開くみたいな・・・そんなようなことがこの先、君の身に降りかかるだろう。そんな画面の動きを担うのがJavaScriptというやつだ。画面ビュンビュンさせるようなサイト作りたい！って思うならJavaScriptをガッツリ学んでおこう。
ここまでの話をまとめるとこんな感じだ。
- 画面の大枠・・・HTML
- 装飾・・・CSS
- 画面の動き・・・JavaScript
動きをつけるのはCSSでもできたりするものがあるから、そこはJavaScriptを勉強した後にでも調べておいてくれ。例としてCodepenに掲載されているcss-animationを載せておく。cssでどんな動きをつけることができるのか気になったらみてみておいてくれ。
他にも調べるとcssを使ったものはいろいろ出てくるよ。
サーバーサイドのプログラミングって？
ここまでで何となくwebページの見た目にどういったものが使われているのか分かっただろうか。HTML・CSS・JavaScriptさえ分かれば、何でもできるじゃん！なんて思ったかもしれない。だけど本当にそうだろうか？例えばTwitterなんかを想像してみると、あれが本当にその3つだけでできているかな？
自分が登録したメールアドレス、プロフィール情報、投稿したツイート・・・あれがどうなっているか想像できるか？
「もちろん分かる！例えばツイートなら自分が入力したツイートをJavascriptかなんかで動きつけて表示しているんでしょ！」
確かにそうかもしれない、だけどそのツイートはアプリを閉じてもまた開けば見れるよね。そのツイートしたデータってどこで管理しているんだろう？？
そうだ友人よ、そのツイートはどこかで保存しておかなければならないのだ。そしてそれは大体MySQLやPostgresというようなデータベースっていうやつに保存される。（ブラウザに値を保存するっていうこともできなくはないけどね）そしてそのデータベースへ値を保存したりするのがサーバーサイドの言語だったりするんだ。
サーバーサイドってなんだよ？
サーバーサイドはさっき言ったデータベースとのやりとりをしたりする言語だ。サーバーサイドっていうぐらいだからサーバーで動くものだったりするんだけど、そんなサーバーなんて難しい言葉は使いたくない。とりあえずなんかデータベースっていう場所に値を保存したり、保存された値を取ったりしてくるものっていう感じでいい。
そしてそのサーバーサイドの言語がRubyやPHP、聞いたことはあるかな。ざっくり大まかに記すとこんな感じか。
- 画面を扱う・・・HTML・CSS・JavaScript
- データベースとのやりとりをする・・・Ruby、PHPなど
よくフロントエンドエンジニア・サーバーサイドエンジニアっていう分け方をされるけど、フロントエンドエンジニアは画面を作る人、サーバーサイドエンジニアはデータを扱ってデータベースとのやりとりを作ったりする人、みたいなイメージでとりあえずいい。
もし画面を作るのがあまり好きじゃない！っていう場合にはサーバーサイドの言語を何かしら学んで何かやってみるといいよ。もしかしたらそっちの方が楽しいかもしれないからね。ちなみに自分は画面周りをいじっている方が好き、画面の動き見れるの楽しいじゃん。
インフラエンジニアっていうのもいる
画面を扱うフロントエンド、データベースにアクセスしたりするサーバーサイドをちょっと書いたけど、インフラエンジニアっていう言葉も聞くよね。彼らは何をやっているの？っていう話だけど、サーバー構築なんかをやってくれる。サーバー？って感じだけど、これはアプリケーションを動かす環境のようなもの。
君も人間だから心臓があると思うけど、その心臓がサーバーだ、心臓がないと君の脳も腕も足も動かないだろう。サーバーがあるからアプリケーションは動くんだ。（ちょっと雑な説明だけど許してほしい、すまんな）
まとめ
すごいざっくり書いたけど、どうだったろうか友人よ。前よりはプログラミングの世界がぼんやりと分かっただろうか。この前はHTMLをやっているっていったから今はJavaScriptなんかをもしかしたら勉強しているかな。
何を使って勉強していいか分からなかったら、とりあえずProgateをやってみるといいんじゃないかな。サーバーサイドも気になったらちょっと見てみなよ。ちなみに自分はレベル100を超えていたから、とりあえずこのレベルぐらいは超えてくれ。君ならできるさ。
後、エディタで迷ったら個人的にはVSCodeがおすすめっていうことは書いておくよ。まあ好きなのを使っておくれ。関連するような記事は載せておくから、まあ気になったら見てみると役立つかもしれないぞ。応援してるよ。
