上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。
デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。
といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。
こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。
毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します
過去に何度も挫折した私の記録はこちら→過去のブログ記事
ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。
僕がWeb制作を学ぶ理由は大きく分けて３つあります。
１，単純にWeb業界に興味がある
２，Web制作に関わる仕事で多くの人に喜んでもらいたい
３，現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい
移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。
もっと知識や実務経験を増やしたいと思っています。
【デイトラ初級Day13】JavaScriptとは？
これまではHTML,CSSと言ったプログラム言語を使ったサイト作成やコード入力を効率的に行うEmmetやスニペット集を学んできましたが、これからはJavaScriptやjQueryといったWebページに動きを加える言語を学んでいきます。
これまでより難易度が高くなるということなので不安なところもありますが１つ１つ学んでいきたいと思います。
さて、今回はJavaScriptの基本的な内容を学んでいくのですが、そもそも「JavaScript」ってなんだろう？ということです。
プログラミング初心者の僕からしてみると未知の領域に入っているのでこういった基本的な言語の意味から学んでいきます。
JavaScriptとは？どんな役割があるんだろう！
JavaScript（JS）は、ウェブページを動的に制御するためのプログラミング言語です。HTMLとCSSとともに、ウェブページの構造、スタイル、振る舞いを制御するための主要な技術の1つです。JavaScriptを使うことで、以下のようなことができます。
- 動きのあるWebページの作成
- ポップアップ表示
- 計算処理
- ゲームの開発
活用すると、HTML,CSSだけのサイトより快適なサイトを作る事が可能となります。
デイトラで学んでいくと、課題でドロワーメニュー作成などがでてくるので実践的な事が学べるようになっています。
まずはJavaScriptでコードを入力していくまでの準備をしていきます。
JavaScriptの新しいファイルを作ろう
HTMLやCSS同様にVScodeを使います。
下図のような階層をまずは作りました。
JSファイルの中に【index.htmlとscript.js】を作ります。
ここまではいままで通り！次はJavaScriptを読み込むためのコードをHTMLに入力するよ
<index.html>の<body>タグの中に以下のコードを入力します。
<script src="./script.js"></script> CSSを読み込む歳はheadタグの中に
<link rel=”stylesheet” href=”./css/reset.css” />
<link rel=”stylesheet” href=”./css/style_complete.css” />
といったものを入力しましたが、JavaScriptは<body>タグ内に入力します。
上記のコードをHTMLに入力しましたが、そのコードが機能するのかアラートを出して確認します。
Webページ上にこちらの「おはよう」の文字を出力します。
JavaScript
alert("おはよう");VScodeの「script.js」ファイルの中に上記のコードを入力してWebページを開きます。すると上記のアラートがでてくると思います。
これで出力は問題なくできました。
それではこれから基本的なコードの書き方について学んでいきます。
【デイトラ初級Day13】JavaScriptの基本を学ぼう
JavaScriptはWeb検証ページで「コンソール」を使います。
コンソール：入力されたことを出力するための装置
ではどのように出力するのかを紹介します。
検証ツールを開くと「コンソール」といった項目があるので選択します。
このコンソールに値を入力するための記述は以下になるので、VScodeで値を入力します。
するとコンソール画面には「田中太郎」と出力されます。
このconsole.log(“);はこれからもコンソールに出力するために使う記述になるので覚えましょう！
変数と定数の使い方
基本的な概念はこちらで紹介します。
- 定数 (Constants): 定数は、値が変更されない変数です。一度値を代入すると、その後変更することはできません。定数は
constキーワードを使用して宣言されます。javascriptCopy codeconst PI = 3.14; - 変数 (Variables): 変数は、値が変更される可能性がある場合に使用されます。変数は
letキーワードを使用して宣言されます。javascriptCopy codelet count = 0;
また、ES6（ECMAScript 2015）以降では var キーワードも使用されていますが、var は関数スコープを持つため、通常は let や const を使うことが推奨されます。
どちらを使うかは、その変数や定数の値が変更されるかどうかによって決まります。値が変更されない場合は const を使用し、変更される可能性がある場合は let を使用します。
- 定数（const）：定数は値が変更されない。代入することが出来ない
- 変数（let） : 変数は値が変更される可能性がある時に使用。代入出来きる
変数では数字の代入が出来ましたが、定数ではそれができません。
こちらは初学者の僕は混乱したので使い方について少し記録しておきます。
- 値が変更されることがない場合には、定数を使用します。たとえば、円周率や定数値などの固定値は定数として宣言することが一般的です。
- ある値がプログラム全体で共通であり、その値が変更されると予期せぬバグを引き起こす可能性がある場合にも定数を使用します。
- 値が変化する可能性がある場合には、変数を使用します。たとえば、カウンターの値やユーザーの入力など、動的に変化するデータは変数として宣言します。
- 値が初期化された後に変更される必要がある場合にも変数を使用します。
したがって、どちらを使用するかは値の性質に依存します。値が一度設定されたら変更されない場合は定数を、変更される可能性がある場合は変数を使用することが適切です。
変数や定数の名前の付け方（注意点）
変数や定数の名前をつける際の名前の付け方についても少し触れておきます。
下図のようなコメントアウトした名前の付け方の場合はエラーが起きるので注意が必要です。
let 123firstname → 名前のはじめに数字が入っている
let Firstname → 名前のはじめが大文字になっている名前をつける時はアルファベットの小文字で書き出すのが基本だそうです。ちなみに大文字を使っても問題は有りません。
画像を貼って気づきましたが[secondneme]ではなく「lastname」がでしたね…まぁ今は小さなことは気にせず進んでいきましょう！
【デイトラ初級Day13】まとめ
JavaScriptの基本的な使い方について学びましたが、今回も初めて習う事がたくさん含まれていました。
コンソールに出力する方法を始め、定数や変数の考え方、ここでは書ききれなかった数字の計算など。
次章でもJavaScriptについて学んで行くのでより深い知識が学べると思うとわくわくしますね！
内心では理解できるか不安でドキドキしていますw
少し雑談….
僕はここまで来るのに２年以上かかっています。（挫折期間含め）３，４ヶ月で成果を出す人だけじゃなくてこういった人もいるんだと思って少しでも励みになればいいなと思い恥を捨ててブログを書いています。
冒頭でも書きましたが、Web制作を学んでいる今の原動力は
僕がWeb制作を学ぶ理由は大きく分けて３つあります。
１，単純にWeb業界に興味がある
２，Web制作に関わる仕事で多くの人に喜んでもらいたい
３，現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい
といったことになります。
今回の挑戦も時間のかかるものになるかもしれませんが、完走を目指して頑張っていきますのでデイトラの受講生様も一緒に頑張っていきましょう。
それではまた。
