Web プログラミング

【もりけん塾3日目】課題『JavaScriptを知る』つづきとLP土台

プログラミング初心者、もりけん塾生3日目のねこらのんです。

 

ねこらのん!
情報をみすぎて頭が混乱してる…

 

JavaScriptの漫画を読んでいると、全体像がよくわからずになかなか進まなかった…

なので他のサイトの人の学習方法とか探してたらもっと混乱してしまったので、一旦人に悩みを打ち明けることにしました。

 

 

話してたら徐々に落ち着いてきて、

  • 知識がない状態で新しいことすると情報の渋滞おこすタイプだった
  • 勝手に強迫観念にかられやすいタイプだった
  • やらなれけば精神と頑張らなきゃが強すぎてショート起こすタイプだった

って冷静になって思い出しました。笑

 

やーよかった。

 

改めて焦らずにゆっくりとJavaScriptをはじめます。

Progatesやドットインストールは本を読んでから。

 

ここでは筆者のJavaScriptを学んだことを整理として記事を書いています。

 

JavaScriptを知る

人がおすすめするものじゃなくて自分のレベルと相性のよさそうな本から入って全体像を掴むことに…‼

 

JavaScript①ふりがなプログラミングの本

キンドルでJavaScriptの本をみつけて読み始めました。

 

 

これを読んでメモ書きとしてこれから残していきます。

 

JavaScriptについて

JavaScriptはWeb上ブラウザで動くものを手軽に作れるプログラミング言語。

 

JavaScript
文法 シンプルで覚えやすい言語
変化 はやいのでJavaScriptの書き方を随時アップデートする必要がある
規格名 ECMAScript(エクマスクリプト)
ES5(2018年)→ES2015のES6(移行が進んでる)

Node.js:Webブラウザではない外(デスクトップ)でも使えるようにしたJavaScriptの世界を広げた技術

 

プログラム

  1. プログラミング言語で書かれたソースコード
  2. CPUが理解できる実行ファイル

 

CPUはCentral processing unitの略でPCの心臓部分。PCの制御や演算、情報転送を司る部分のこと。

 

ユーザーインターフェース(UI)

ユーザーと製品やサービスとのインターフェース(接点)すべてのこと

 

PCへの基本の命令、コンソール(console.log)

プログラムを実行した結果を確認する道具でGoogle Chromeのデベロッパーツールの中の機能のこと。

 

コンソールでできることは、

  • エラー確認
  • JavaScriptのプログラミングを入力して実行もできる

 

PCへの命令は

コンソールに(何を)表示しろ

で、『目的』を入れてあげる。

console.log('ハロー!');

こういうこと。

 

  • console.log:コンソールに表示しろ
  • ():何を
  • ' ':文字列として扱える
    シングル『’』でもダブル『”』でも良い

 

 

CSSでもでてきた「;セミコロン」はJavaScriptではなんで付けないと行けないんだろ?

A.JavaScriptは「;」を付けて実装されることが前提なので無いとバグが生じ、デバックが困難な問題へ。

 

日本語の文の終わりに「。」があるのと似たような意味でPCへの命令で必要な命令文の終わりに「;」が必要。

 

デバックはバグを処理すること

 

一部の間では「;」を省くコードを書く方々がいるようだけど、常にセミコロンを使うのがJavaScriptなので必要なんだ♬

 

いつも忘れるんだよなぁ…

 

JavaScriptの保存をするときの拡張子は「.js」

JavaScriptのプログラムファイルの拡張子は「.js」。

拡張子
html .html
.htm
css .css
JavaScript .js

「js.」よし。

 

演算子である「+」「-」「*」「/」を使って簡単に計算

演算子もPCへ命令するもの。

これは簡単な計算だ!

 

console.log(10+5);

  • console→コンソール
  • .log→表示しろ
  • 10→数値10
  • +→足す
  • 5→数値5

数学と同様で()内を計算する。

 

演算子 読み方
+ 左辺に右辺を足した結果を出せ
- 左辺から右辺を引いた結果を出せ
* 左辺に右辺を掛けた結果を出せ
/ 左辺を右辺を割った結果を出せ
% 左辺を右辺で割った余りを出せ
** 左辺の右辺乗の結果を出せ

「**」はProgateであったかな?はじめてみた!

これも算数と同じで「*」「/」が先に計算されて、「+」「-」はあとの計算になる。

 

引用:スラスラ読めるJavaScriptふりがなプログラミング p029 著:及川卓也

優先順位をつけたいなら()をつけることがポイント‼

 

変数

変数はデータの入れ物である箱。

 

箱についている名前が「変数名」。
例えば"name"や"numaber"など。

 

事前に繰り返し使うことがわかっている値である数値や文字列等のデータ類を『変数』に入れておく。

 

let:新規作成

 

2行になる時は、1行目が代入で2行目が計算式ってことかな!

 

引用:スラスラ読めるJavaScriptふりがなプログラミング p035 著:及川卓也

 

Google Chromeのデベロッパーツールでconsole.logをかいてみた^^!

消費税の計算もできるから、レジとかにも使えるのかな?

 

変数の命名ルール

変数の名前の3つのルール。

1.以下を組み合わせる

  • a~z
  • A~Z
  • _
  • 0~9

2.数字の見、先頭が数字の名前は禁止

3.予約語と同じ名前も禁止

引用:スラスラ読めるJavaScriptふりがなプログラミング p039著:及川卓也

インタープリタは通訳者という意味。プログラムを読んで実行する機能を指す。

 

予約語

引用:スラスラ読めるJavaScriptふりがなプログラミング p041著:及川卓也

varやlet、constは予約語というものなんだ。

 

このあたりでよくわからなくなってきたからJavaScriptをドットインストールかProgatesでやってみよ。

 

Progate学習コース1の「変数の値の更新まで」終え、一度本へ戻る。

 

prompt:データの入力を受け付ける

promptはユーザーに入力を促す。

 

名前のあとに()があったらメソッド。

メソッド 意味 使い方
console 表示する console.log('ハロー!');
prompt
(type:string型)
入力する ①let moji = prompt('出力せよ');
②console.log(moji);
入力ダイアログ
parselnt 整数化
文字列を受け取ったら整数変換する

 

typeは2つある。

型(type)
number型 整数:計算がはやい
実数(小数点)
string型 文字列

 

 

JavaScript②わからないところ

ココがダメ

OKとNGのダメな違いがよく分からないなぁ…

数字のみの名前は数値特別できないのはわかった。

名前の先頭が数字である「12345」「1day」も禁止。

「!mark」と「a + b」はどこがダメなんだろ?

数字になるのかな?

 

途中でProgateのJavaScript学習コース1「変数・定数」の「7.変数の役割」にいくと答えがあった!!

 

答えは、ローマ字だけでの命名はNGだということ。

「!mark」もそうなのかも??

 

ココに注意

  1. 数字開始
  2. ローマ字だけ
  3. 日本語

 

LP制作

昨日デイトラをしているとドットインストールが有料にかわったので、今日はLP制作の準備にとりかかりました。

 

1年前にエンジニアの友人から借りた通称黒本にある「ウェブサイト制作のための準備」を参考にしました。

H

 

 

昨日鑑定した方の希望に近いLPにしようと最初考えていましたが、自分のサイト制作のポートフォリオのほうが最初はやりやすいと思い変更。

 

ターゲット 会社を起業してHPを作りたいけどPCが苦手な40代前半の女性。低予算で名刺程度のもので更新しなくてもよい1枚もののHPが欲しい方向け。
HP 見やすくてでも安さを感じさせないような静的なHP
カラー:黒、金、ベージュ、赤など高級感あるような見た目
内容 ・Web制作
・食事相談(自営業の資本は健康体)
・占い(お悩み相談)

 

いったんこの感じで作ってみようと思っています♬

 

感想とまとめ

HTML&CSSもだったけど、JavaScriptにもしっかりとしたルールを知ることが大事なんだってことがわかった!!

 

自分の理解できる順番が

  • スラスラ読めるJavaScriptふりがなプログラミングを読む
  • 不明なところがでてきたりイメージしにくい場合は本で読んだ箇所までをProgateやドットインストールで復習
  • また本に戻る

が理解しやすくてProgateもほとんどミスなくいけた。

 

エンジニアにとって必要なことを学ぶ機会が多い「自走力」が身につく、もりけん塾(@terrace_tech)。

もりけんさんのHPへ

-Web, プログラミング

© 2020 Mayu_Yamada