【初級編】javascriptプログラミングをしてみよう

初級編 javascriptプログラミングをしてみよう HTML/CSS

今回は今まで上げてきたなかった、実践編の「プログラミング」を取り上げていきたいと思います。
また過去記事でいくつか語弊があったものはこの場でしっかり用語の定義をし直していきたいと思います。

本記事の対象者

HTMLとCSSの基本が分かる方で、javascriptをこれから始める・または初心者

プログラムの定義

これまで「プログラム」と言う用語をHTML/CSSにも入れていましたが、「初心者」向けに記載していたので、これから語弊がなく解説できるよう明確に分類分けをします。

プログラマの大まかな区分け

職種ごとに理解する必要のある知識 分解
  • HTML・・・「文書構造化テキスト」ブラウザが認識できるように記述する特殊な文書構成。このHTMLを通してブラウザが様々な表現をしてくれる
  • CSS・・・「視覚表現テキスト」HTMLで表現した構造を装飾するために使用する文章(テキスト)
  • javascript・・・「フロントエンドプログラム」ブラウザが認識し、クライアント(閲覧者)側で実行されるプログラム
  • PHP/Ruby/NodeJsなど・・・「サーバーサイドプログラム」サーバー側で処理するプログラム。データベースに保存やメール送信などサーバー側でしか出来ないプログラムを担保
  • その他、ミドルウェアとして上げられるWEBサーバーを動かすApache/Nginx、データを保存するためのデータベースMySQL/PostgreやNoSQLと呼ばれるMongoDB/Redis/RethinkDBなど

覚えることはいっぱいあります

この区分けを入れるとすごい複雑だな・・・と考えてしまいますが、HTML/CSS覚えた後はjavascript(フロントエンドスクリプト)、そのあと徐々に「サーバーサイドプログラム」に手を出していくと思います。

サーバーサイドの後にミドルウェアの様々な設定が出来るようになるとエンジニアでは上位に入る「フルスタックエンジニア」の卵になることが出来ます。
フルスタックエンジニアとは一人でシステム全体を構築できる存在で、全行程が対応可能なため色々なところからお声がけ頂けるようになります。

またフルスタックエンジニアといえども、全部が全部全てを把握することは難しいです。全体的に平均的に覚え、その中でも自分に特化した分野(「コーディングは得意だ!」「サーバーサイドは任せろ」)と言ったエッジを効かせるものは一つでも持ちましょう。

早速、javascriptをやってみよう

javascript

まずはjavascriptどう言うふうな記述になってるか書き出します。
例としてはあるHTML中に<p></p>要素を入れます。

<!doctype html>
<html lang="ja">
<head>
<title>【超初級編】javascriptプログラミングをしてみよう</title>
</head>
<body>
<h1>テストページ</h1>
<script>
var hoge = "テストでjavascript";
document.write("<p>" + hoge + "</p>");
</script>
</body>
</html>

上記内容をコピーして拡張子をhtmlで保存してブラウザで開いてみましょう。

上記のようにブラウザで表示されれば成功です。
まずコピペして動作できれば、基本のキとなるjavascriptを覚えるための第一歩を踏み出しました。

プログラム解説

<script>〜<script>内に書かれているものがjavascriptです。
その中に書かれている文字を1つ1つ解説

1: <script>
2: var hoge = “テストでjavascript”;
3: document.write(“<p>” + hoge + “</p>”);
4: </script>

1行目及び4行目:<script>と</script>
javascriptを利用するときに必須な囲い文字です。javascriptを利用したいときに使用することを覚えてください。

2行目:var hoge = “テストでjavascript”;
var は 変数を宣言するときに使う決まり文句だと思ってください。
hogeという箱の中に“テストでjavascript”という文字列を詰め込んでいます。

3行目:document.write(“<p>” + hoge + “</p>”);
document.write の部分は<body></body>の中に出力しなさいという指令となります。
(“<p>” + hoge + “</p>”); は実際に<body></body>の中に書き出す内容を表します。今回はhogeという変数も含めているので実際に出力された内容は<p>テストでjavascript</p>となります。

「変数例え話」
変数というのは算数や数学でも実は習っていたりします。簡単な
x + y = 5 というものがあったとしましょう。
xは3です。yの答えは何ですか?
答え:y は 2

これをプログラムでは数字以外にも文字列を代入することができるのです。

概念が覚えたあとで、今後必要になってくるスキルとしては

プログラムスキル
  • 配列
  • 条件分岐 if / case
  • ループ while / for など
  • 関数

上記を覚えれば後は学習と応用でどうにか上達していきます。
次回からは 配列、条件分岐、ループ、関数それぞれを分野毎に分けて説明できるようにページを作成してまいります♪( ´▽`)

まとめ

重要なまとめ
  • プログラムの定義について
  • WEBエンジニアの職種
  • 簡単javascriptの実践

Ads フリーランスの手始めにココナラで出品挑戦

ココナラでは自分のスキルを売り買いすることができます。

特化したスキルを生み出せば最低500円〜自分の金額設定でスキルを売ることが可能です。例えばホームページの修正など。フリーランスの第一歩として手始めにやってみるのもありかも!

コメント

タイトルとURLをコピーしました