【JavaScript】初心者が独学でJavaScript勉強する【DAY1〜3】

 

 

こんにちは、WEBデザイナーとして働いているめーぷるですニコニコ

 

先日、仕事でコーポレートサイトのリニューアルに携わらせていただいたのですが、

 

ワードプレスのテーマやカスタム投稿をいじるのに苦戦し、

 

プログラミング言語をしっかり勉強したい！と思うようになりました。

 

色々考えて2022年はJavaScriptを身につけよう！と目標を立てました！

 

（ワードプレスはPHPなので、とても迷ったのですが…これはいずれ別の記事で）

 

 

 

…と長々と前置きを書いてしまいましたが、

 

JavaScriptの勉強の過程をアウトプットを兼ねて、

 

どこかの誰かの役に立てばいいな〜という気持ちで残していきたいと思います。

 

 

 

 

 

 

DAY0

 

・書籍を選ぶ

・ロードマップを組み立てる

 

 

 書籍選び

 

 

 

・JavaScriptで書かれたプログラムを理解出来る

・既存のプログラムをアレンジして新しいものを作る

・いざとなったら自分でゼロから書ける

 

上三角本屋でパラパラと読んだところ、こちらの本が分かりやすい＆サクサク進められそう！と思ったので購入しました。

 

こちらをベースに進めていきますニコニコ

 

 

 

 ロードマップ

 

⑴ 書籍を一通り終わらせる

⑵ 動画学習で知識をインプット/ブログでアウトプット

⑶ ぷよぷよJSを作れるようになる

 

 

 

DAY1

 

ダイヤグリーン書籍P1～26

ダイヤグリーン動画

 

 

 JavaScriptとは？

 

・ブラウザを操作するためのプログラミング言語

・HTMLやCSSだけではできないことができる

 

 

 動画学習

 

consoleでとりあえずJavaScriptを書いてみる

変数・定数・配列・if文・イベント・ループなどがどんなものか知る

 

 

 

上三角とても分かりやすいのでJavaScriptって何？って人におすすめです！

 

 

 

DAY2

 

ダイヤグリーン書籍P27～76（途中）

 

 

 consoleに実際にプログラムを書いてみる

 

・デベロッパーツールのconsoleタブを開く

・console.log();の書き方と動きを学ぶ

 

 

・オブジェクト:ブラウザのパーツのうち、JavaScriptで操作できるもの

・メソッド:必ず() がつく

 

 

 JavaScriptを書く

 

・</body>の前に<script></script>を挿入、その中にJavaScriptを書くことができる

・外部JavaScriptファイルを読む時は、

<script src="読みたいjsファイルのパスを記述"></script>とする

 

 

 window.alert();でダイアログボックスを表示する

 

・console.logと違ってwindowオブジェクト用なのでconsoleに出力できない

・なので先述の場所に書く必要がある

 

 

上三角これはJavaScriptの基本的な流れ

 

 

 document.getElementById('id名');でHTMLを書き換える

 

・documentオブジェクトはHTMLやCSSを操作する機能がある

・getElementByIdはid名を持つ要素を丸ごと取得する

 

 

 

 window.confirm();でif文を使ってみよう！

 

・confirmはalertと似ているダイアログボックスを出すメソッドだけど、「OK」を押した時「true」を、「キャンセル」を押した時「false」を返すという違いがある

・true（真）、false（偽）を合わせてブール値という

 

 

 ​if文

 

 

 

 ​変数

 

①定義

let answer

・「answer」という名前の変数を定義

 

②代入

let answer = window.prompt('メッセージ');

・右側を「answer」という変数に保存

・=は代入演算子という

・メソッドがリターンを置き変わってからanswerに代入される

 

③読み取り

console.log(answer);

・保存したwindow.promptを読み取り出力

 

■変数名の付け方

・半角英字、アンダースコア、ダラーマーク（$）、数字が使える

（日本語も使えるけどオススメしない）

・半角スペースはダメ

・1文字目に数字はダメ

・予約語はダメ

（予約語とは、JavaScript言語で使われているもの else if forなどなど）

 

 

 ​定数

 

const answer = flower;

・定数は後からデータを書き換えられないので、定義すると共に代入を行う

 

 

​DAY3

 

ダイヤグリーン書籍P75～93

ダイヤグリーン動画

 

 

 ​比較演算子

 

if(answer === 'yes')

・左右が同じか判定する

・同じならtrue、違うとfalseになる

 

※

= イコールひとつは代入

=== イコールみっつは比較

 

 

 ​データ型

 

データには文字列や数値、ブール値など色々ある。

それをデータ型という。

<例>

・数値と数値は計算できるが、文字列はできない

・数値と数値は大小を比較できるが、文字列はできない

・文字列と文字列はくっつけられるが、数値はできない  など

 

 

 ​論理演算子

 

&& - どちらもtrueのとき

|| - もしくは

! - trueでは無いとき

 

 

 

 

 

 

 

 

 

上三角電車に乗っている時間でひたすら動画を見てました。

リファクタリング難しい赤ちゃんぴえん

 

 

​まとめ

 

DAY1〜3は、JavaScriptとはどういうものか概要をざっくりと学習しました。

 

私の場合、概要を知る→より深く学ぶという勉強の仕方が合っているので、

 

移動時間で動画学習→帰ってから書籍を読んでコード書く

 

という勉強の仕方がいいような気がしますニコニコ

 

 

ところで、久しぶりにアメブロでブログを書いていますが……

 

見出しのデザインが選べるようになったり、

 

可愛い絵文字が追加されていたり、

 

進化していてびっくりしていますあんぐり

 

（でもスマホアプリからだけ……？）

 

 

これからも3日ごとにアウトプットしていきたいと思っています！！

 

プログラミング初心者につき、間違っているところがあったらコメントでこっそり教えてくださいひらめき

 

最後まで読んでいただき、ありがとうございました！