第二回コスプレエンジニア(見習い)の日々勉強 〜ひだまり編〜

こんにちは~

 

毎回コスプレをしてN予備校でプログラミングを学ぶことにしましたが、今回のコスプレは『アイドルマスターシンデレラガールズ』の宮本フレデリカ。

デレステ初のコスプレはフレちゃんになりました! 因みに私の一推しは楓さん!

 

でもデレステは推しが多くて辛いですよね…

 

当日のメイクよりも前日にやったメイク練習の方が上手にいって悲しみが深い感じでしたが、初多摩川で桜も綺麗だったので撮影中はそんなこと忘れてた( ˘ω˘)

 

フレちゃん推しの方にはとても申し訳ない感じのフレちゃんになりましたが、暖かい目で見てやってください。

 

それでは、前回と引き続きN予備校のプログラミングコースの受講をしていきます!

 

と思ったのですが、窓から外を見ると春うらら。

こんな快晴の日にお家でカチャカチャプログラミングなんてしてられません!

 

そう思った私はPCを持って多摩川の河川敷にある多摩川大橋緑地、通称ブタさん公園に繰り出しました。陽気にお外でプログラミングを勉強です!

 

これ思ったのですが、読んで頂いている読者の方も一緒にやってくれると分かりやすく一緒に学べると思います。むしろ一緒にやらないと意味がわからないかも?プログラミングを学びたい人はぜひ!

 

というわけでやってきましたブタさん公園!

 

 

これ完全に勉強の感じじゃないですね!

 

前回は【HTML】というwebページを作成するための言語を勉強していきましたが、今回は【JavaScript】というプログラミング言語を勉強していきます┗(`・ω・´)┛フンヌッ!

 

勝手にJavaScriptに苦手意識を抱いている私・・・
(webサイトを制作するときに使うのはもっぱらjQuery)

 

まぁ、でも前回の感じでいけば優しく教えてくれそうなのでそこまで不安は抱かずスタート☞

「05.はじめてのJavaScript」

 

さぁさぁ始めて行きます。「05.はじめてのJavaScript」

どん”Σ⊂(☉ω☉∩)

 

HTMLの受講内容同様、まず最初はJavaScript(※以下JSと略します)の説明でしたが、割とさらっとした説明でした。

 

結局JSとはなんなんだ・・・?と思う人が出てきそうですが、私個人のイメージとしては動的なwebサイトを作成するためのプログラミング言語だと思ってます。あくまでもwebサイト制作の際における立ち位置の話ですが(´^ω^`)

 

ということでブタさん公園での勉強風景を投下!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

これ、どう考えても私やってませんね!大丈夫ですよ!ちゃんとお家でやってますから!いわゆるイメージカットですよ!

 

説明の後は実際JSを書いてみましょうということで早速記述に入っていきます。
プログラミング言語の勉強は説明を聞くだけは頭に?しか浮かばないので実際に記述して使い方を覚えていくのが理解への一番の近道だと思っている人です(・∀・)

 

前回同様VSCodeを使用してhtmlファイルを作成し、その中にJSを書いていきます。
body内に以下のように記述して保存し、Chromeでファイルを開きます。

開くとこんな感じで見出しが表示されました。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

「おっできた」

 

中に書いたコードは、HTMLの中身に<h1>JavaScript を学ぼう</h1>という内容を書け、という意味で記述したものです。という説明があります。

 

え?じゃあ、素直にbody内にh1タグ書こうよ!となるかもしれませんが、JSでしか書けない内容もあるので心配しないでください(`・ω・´)←
ここはまだ肩慣らし程度の記述例なのでささっと書いていきます。

 

次の段階では、JSを外部ファイルにしていくらしいです。
今はhtmlファイルの中にJSを記述していますが、JSだけを記述するファイルを別途作っていきます。

 

資料にしたがって「myFirst.js」というファイルを生成。

先ほど記述したコードをここに記述します。

htmlファイルの記述はこんな感じ。

 

無事外部ファイル化することに成功!ヾ(⌒(ノ’ω’)ノ

 

こうすることで、htmlファイルには文章の構造を、JSには処理の内容を、というように分けて記述することが出来るので、内容が読みやすくなるし、後で修正などの編集もしやすいよね!というわけです。

 

次の「エラーについて」では意図的にエラーを起こして、Chromeのデベロッパーツールのコンソールからエラーを読み取る方法の説明があります。
このやり方覚えるのは割りと大事だと思っています!!!!!!

 

Web制作の際にはデベロッパーツールとはすごく仲良くなりますヽ(´・∀・`)ノ
私は常にデベロッパーツールは起動している派です。使い方とか見方とか覚えておくと役に立つと思います~(v´∀`v)

 

「はじめてのJavaScript」の章はここで終了です。

 

「はじめてのJavaScript」の章も終了したということで、ここでまた勉強風景を投下しますね!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

これやってるように見えますよね!実際にちょっとだけやったんですよ!

「06.JavaScriptでの計算」

 

次は「06.JavaScriptでの計算」です。ここから数学的思考ががっつり入ってきます。数学苦手な人は逃げたくなるのかな?と思いますが内容的にはすごくやさしいです。

変数とかも入ってくるのでプログラミングしてる感がでてくるのではと思います。

 

それでは進めていきますヾ(๑╹◡╹)ノ”

 

JSで計算をするために使う道具が

・値

・算術演算子(数学記号)

・変数

の3つあるらしく、それぞれについて勉強していきます。

 

とりあえず説明がズラーっとある感じなので読み進めていきます。数学の勉強をしている感じです。
もうここら辺の内容を知っていたら読み飛ばしてもいいかな~と思うような基礎的なことが書かれていますが、初めてプログラミングを学ぶ人はちゃんと読むことをおすすめします!

 

私はわりとささっと読み進めて、プロジェクトフォルダを作るところからやっていきました。

手順に従ってプロジェクトフォルダを作成し、2つのファイルを作成しました。

 

結構本格的にプログラミング感でてきましたね。

 

ということで一回投下しましょうかね?勉強風景。。。。いりません?

でもせっかくですからね。。。

 

すみません!なんどもすみません!

 

これでプログラミングをする準備が整ったので「変数」の勉強に入っていきます。
変数の説明も分かりやすく書かれているので、はじめてその言葉を聞く人でも理解できると思います。

JSのいいところはすべてvarで宣言できるとこだよね・・・。型とか考えなくていいところはすごく好きだよ(っ’-‘)╮=͟͟͞͞♡

 

早速記述して結果を見てみます。
変数xを宣言して10を代入し、それを表示するプログラムを書きました!
無事10を出力してくれた。「=」は等しいではなく代入という考え方になってくるので、ここは数学と少し違う考え方のところかな。←ここ重要!

 

ちなみに数字だけではなく文字列も入れることが出来る。

 

次は少し複雑な数学の問題をJSで解いちゃおう☆

ということで、以下の問題をJS君に解いてもらいます。

 

「変数yは、変数xに-0.25をかけて14.1を足した値です。Xが34のときにyの値を求めてください。」

 

数学が嫌いだと、ここで逃げ出したくなりますよね。そもそも小数点がある時点で筆算とかめんどくさい←

 

ということでとりあえず筆算はしたくないのでJS君に解いて貰おう。
とりあえずxは34ということが分かっているのでxという変数を作って34を代入して、yという変数を作って問題文にしたがって計算式をyに代入していきます。
y = x * -0.25 + 14.1という感じですかね。

と考えがまとまったところでそれをプログラムに起こすとこんな感じ。

どん”Σ⊂(☉ω☉∩)

私の写真もどん”Σ⊂(☉ω☉∩)

 

こんな感じで記述していくと答えの「5.6」を表示してくれます。
JSでプログラミングをすることで入り組んだ計算の結果を出すことができるよ!

すごいねJS!

 

章の最後はコメントの書き方の説明です。

これすごく大事。プログラミングをしていく上でここは何の処理をやっているのかを、ほかの人が呼んでも分かりやすくするために「コメント」と呼ばれる説明文を書いていく必要があります。

 

チーム開発しているとすごく重要になってくるコメントの存在。
自分だけがコード理解できてもダメだからね\(^o^)/

なのでコメントの説明が入っているのはすごくPが高い!よき!

 

//のあとに説明文を書いていくよ!こんな感じ↓

 

ちなみにhtmlにおけるコメントは<!—ここにコメント–>てな感じで書いていくよ。

 

今回はきりがいいのでここまで!
プログラミングの勉強が本格的に始まった気がしますね!

まぁ、まだ考え方を習ってる感じですがヾ(‘・’*)ノ゛

 

相変わらず教材はやさしくてどんどん進められた気がします。ただここで若干数学が苦手な方とか数学的な考えが苦手な方はうっ・・・と思うかもしれない。

 

次回はさらにプログラミング的思考を習っていきます!

最後まで無事心折れずに学習することが出来るのか・・・!

 

目標はこの講座を最後まで頑張って何かしぶや荘でコンテンツを作りたいと思っています!

 

また次回お会いしましょ~バイバイ(ヾ(´・ω・`)

 

しぶや荘がコラボするプロモーション企画

非対応ブラウザ

申し訳ございません。当サイトではご利用のブラウザは非対応となっております。
下記のリンクより最新のブラウザをインストールしてご覧ください。