【RaiseTech】超初心者が1から学ぶプログラミング記〜その5〜

公開日:2020/7/15 最終更新日:2021/2/20

こんにちは!ナガタロックです!

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

第5回目講義内容は「JavaScriptの基礎知識とjQuery」についてです!

HTMLとCSS・PHPに続いて新たな言語が出てきた〜😂という感じで今回の講義もスタートです!!

JavaScriptとは

Webページにより複雑な機能や動きをつける事が出来る言語

地図やゲームなど、HTMLやCSSより複雑なコンテンツ作成が可能になる!

全世界で最も使用されているプログラミング言語で、

Webページ作成において学習必須である!

簡単な機能で言うと、

「HTMLで表示している文字を変えたり」

とか

「CSSで装飾している色を変えたり」

とか出来るようになります。

ちなみに「Java」とは似て非なるプログラミング言語らしい。

カレーとカレイくらい違うらしい(これは私の見解)

ナガタロック)HTMLやCSSですら理解が進んでないのにまた新たな言語><

と思いつつも、必須なら勉強せにゃしゃあないですね\(^o^)/

HTMLやCSSよりなんかとっつきにくいな〜という印象です・・・

JavaScriptの構成

・JavaScriptの宣言・・・ブラウザ上にJavaScriptの記述であることを示す

・定数宣言・・・constで宣言

・変数宣言・・・letを用いる(varもあるが、仕様上letを使うこと!)

・セレクタ・・・htmlのソースの場所を示す

・イベントリスナー・・・イベントに対して発動させる処理

※イベント…クリックした時、マウスオーバーした時、キーを押した時等々のユーザー側の動きの事

以上の内容を記載していく。

<script> *JavaScriptの宣言
const changetxt*定数宣言 = document.querySelector
*セレクタ(“#change”);changetxt.addEventListener
*イベントリスナー(“click”,updateName);*ユーザー関数の呼び出しfunctionupdateName(){
document.querySelector(“h1”).textContent
*テキストの変更 = “文章が変わりました”;
}
</script>

■定数・変数の宣言

const…再代入不可能な変数=定数。あとから値を代入不可能。同じ名前の再定義が不可能

var…変数。あとから値の代入可能。同じ名前の再定義可能ビデオ・アシスタント・レフェリーではない

let…変数。あとから値の代入可能。同じ名前の再定義不可能

※基本的に同じ名前の変数宣言はエラーが起きてしまう。varはそのエラーに気づきにくいため、使用しないほうが望ましい

■セレクタについて

CSSのセレクタと同じような使い方で記述する。

指定方法はこのサイトがわかりやすい

ナガタロック)とりあえず現時点で理解出来ている事はほとんど皆無😪

この辺はやりながら覚えていくしかないですね!

jQueryとは

JavaScriptを扱いやすいように拡張したライブラリ

プログラミング初心者にも記述しやすいようにシンプルな使い方が出来る!

1つの機能実装に10行かかることも、jQueryなら2〜3行で実装出来る!

jQueryを実装するには、jQuery本体を読み込む必要がある

ナガタロック)まさに私のような人材に持ってこいのような機能じゃないですか!!

JavaScriptでいきなり面食らったけど、少しε-(´∀`*)ホッとしました。

jQueryについてはこのサイトに記述方法が載っているので、参考にすること。

英語サイト(;・∀・)

まずはjQueryの記述方法にしっかり慣れて行きましょう!

関数とメソッド

関数とメソッドの違い

関数…処理自体が独立し、単独で呼び出されるもの

メソッド…オブジェクトの中で定義される関数のこと

※メソッドは関数であるが、すべての関数がメソッドではない

ナガタロック)なんかの格言のようである・・・

この辺りは正直現時点ではピンときていない(´ε`;)ウーン…

無名関数とは

その名の通り、名前を持たない関数。

通常JavaScriptは function ○○ で関数を定義して使用するが、

サイト上で1度しか使わない関数など、繰り返し使わない時には名前をつけずに

関数を定義することが出来て便利。

即時関数とは

即時に実行される関数のこと(まんま!)

ページを読み込んだ時すぐに何かしらの動きを実行させたい時に使う。

無名関数であることが多い。

thisとは

JavaScriptに用意されている特殊な変数

JavaScriptにおいてめちゃめちゃ出てくる事項なので、とても大事!

関数・メソッド・コンストラクタなどいつでも呼び出して使う事が出来る。

ナガタロック)この「this」については理解が相当難しい!けど、覚えると便利とのこと!

どこかで理解を深める時間が必要に感じました。

いくつかのサイトをググった結果Samurai Blogさんの説明記事がなんとなくしっくり来ました!

オブジェクトとコンストラクタ

オブジェクトとは

関連あるデータと機能の集合体のこと。

オブジェクトリテラル、コンストラクタ関数、Object.createメソッド などの種類がある

コンストラクタとは

インスタンス(実態)を作成する関数のこと。

ナガタロック)JavaScriptにおいて、用語の意味がわからないと何かしたい操作があって調べる時に困る。まずは用語の意味を理解することがJavaScriptを理解する第一歩である!

今日の感想

プログラミングのお勉強を始めてから1ヶ月以上が経過しましたが、

JavaScriptに関してはひとかじりもしていなかった言語でした。

そのため、理解出来ない用語や関数のオンパレードで

正直かなり難しい。。。講義となってしまいました。

なんか英語の授業をフランス語で説明されているような・・・

ワケガワカラナイヨ・・・

でもWebサイト構築には避けては通れない道!

逃げちゃダメだ!逃げちゃダメだ!

どんなことでも最初の第一歩が

その道の先がどうなっているか

わからなくて不安だし、ストレスもめちゃめちゃ感じる!

でも第一歩に比べれば、二歩目・三歩目は軽いものだ。

ランニングでも家を出かけるまでが

就職でも入社初日が

服作るのでも1stサンプルを作る時が

1番しんどい!

JavaScriptにおいても今が一番しんどいと踏んで乗り越えて行こうと思います\(^o^)/

子供の成長を見ていると、

子供の1ヶ月って濃密だなぁ〜(●´ω`●)

って思う事がよくあります。

1ヶ月どころか、昨日出来なかった事が今日出来たりとかよくある。

それに比べると、自分が大人になってからの日々は

1ヶ月前の自分と何が変わったか?

の自問自答に答える事が難しい。

ただ、プログラミングの勉強を始めてからは

1ヶ月前の自分を思い出すと、

毎日継続して学習が出来ているし、

少しずつだけど前進している実感はある。

頭で忘れないように、Twitterで記録も残しているっ!

そんな自分に自信を持って学習に取り組んで行こうと思います!

目標は

2020年内案件獲得!!

家族を鉄板焼きに連れて行きたい!!

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω`●)


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー