Web プログラミング

【もりけん塾2日目】課題『JavaScriptを知る』|デイトラなど今日の報告

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

 

 

昨日もりけんさん(@terrace_tech)にさっそく質問しました!!

 

ねこらのん
初心者だけどどんな学習方法が良いですかにゃ?

 

まずは本やサイトでJavaScriptの基礎を知ることが大切だと過去ツイートやお答えをいただいたので、さっそくサイトに転がっているものからやってみることに^^!

 

この記事ではプログラミング初学者のJavaScriptのアウトプットについて掲載しています。

 

またプログラミングつながりで今日学習したデイトラについても一緒に報告!!
(デイトラについて後述します。)

 

間違った認識などがあってもし可能であれば教えてくださると心から喜びます^^!

 

やったことでわからなかったこと

  • 【JavaScript】なにができるのかがわからなかったけど、最後にドットインストールでしることができた!
  • Bootstrap】<style>内ではwidthやheightを省略していないけど<div>内ではwidthやheightがw-やh-で省略がOKな点

 

もりけん塾の課題『JavaScriptを知る』

JavaScriptはレベルが高いとう意識があるので、JavaScriptを教えてくれる漫画をネットで読みました‼

 

JavaScriptを漫画で知る

JavaScript①数値変数と計算 【var】

JavaScriptの数式?でいつも「;」を忘れる…

var a = 3;

 

var『これから変数を書く』という宣言

a『変数の名前』

=『左部分の中身は、右部分』

3『数字の3』

;『この式は終わり、以降は次の式ですという記号』

変数は『箱』だから箱に数字を入れているものだと考えるみたい。

 

Prgateの数式で『" 3+2"』だと3+2で出力されるけど、数式『3+2』だと5って出るから””はそのまま表示させるか、計算されるかの能力があるってことかな。

 

  1. var teihen = 20; // 変数『底辺』は20
  2. var takasa = 10; // 変数『高さ』は10
  3. var menseki = teihen * takasa / 2;
  4. // 変数『面積』は計算結果
  5. // 『*』は掛け算、『/』は割り算の記号
  6. // 変数『面積』に、「『底辺』掛ける『高さ』割る2」
  7. // の答えを入れる
  8.  
  9. // 変数『面積』の内容をダイアログ表示
  10. alert(menseki);

 

『var menseki = teihen * takasa / 2;』は数学で考えたらいっか。

 

面積=底辺×高さ÷2

 

ってことだから、それぞれ20と10を代入してそのまま計算したら良いのか!!

 

年収の計算にも使えるから源泉徴収にもJavaScriptは使われているのかな?幅広いな〜!

 

気づき

従業員が多くても、労働日数や労働時間はPCタイムカードで処理してあとは人によった時給を当てはめたら個人での年収が割り出せそう。

 

エラーへの対処って『F12』で教えてくれるんだ!!!

 

  1. [F12]キーを押す。
  2. 「コンソール」(Console)タブを選択する。
  3. エラーの内容が表示されている。また、そのファイルと行数も書いてある。

引用:マンガで分かる JavaScriptプログラミング講座 第3版

 

便利。

もりけんさん(@terrace_tech)もこういっているし…

今でさえもよく打ち間違えてしまうし、現場では大量のコードからエラー探すのって大変だけどこれがわかっているのって全然ちがう。

 

 

JavaScript②alertのほかにつかう文字列

alertは表示させる機能でほかはナンだろ?

  • write:<body>内で文字列を表示
  • writeln:<pre>内で改行
  • title:タイトルバーに文字列を表示

状況にあわせて出力の単語が変わるってことかな?

 

JavaScript③文字列と数値変数は( )を使って一緒に用いる

()がない状態で

var c = "先頭" + 10 + 20 + a + b + "末尾";

だとすべて文字列として判断されるから、

var c = "先頭" + 10 + 20 + a + b *1)+ "末尾";

だと計算できるんだ…頭がこんがらがりそう…

 

ちゃんと数学を勉強しとけばよかった〜けど、なんとなく理解できるから、大丈夫な気がする。

 

文字数や数字が増えると思考停止になりそうだけど、実際はシンプルな数式に付随して増えているだけだから…混乱したらシンプルに考えよう。

 

まんがを読んで感想

漫画をずっと読んでいてなんとなく理解はできたけど、実際にやってみないとわからないからProgateやドットインストールにこのあたりでうつろ!!

 

JavaScriptをドットインストールで知る

ドットインストールでなにが結果的にできるのかが分かるから、ドットインストールで先に知るほうがゴールがわかってよさそう^^!

JavaScriptでできることは、

  • ボタンクリックでウインドウ表示
  • タイピングゲーム
  • おみくじ
  • 15パズル
  • 動画や音声再生
  • 位置情報アクセス
  • お絵かき

が作れる…!

ことを知らなかったので、知れて良かった!

 

デイトラはプログラミング初学者向けのWebスキル習得カリキュラム

デイトラは東京フリーランス(@Tokyo_FreeIance)の方々が考案したWebスキル習得カリキュラム。

 

1日1題90日でプロのWEBスキルを習得することができるロードマップで、本業の合間を縫ってカリキュラムに参加されている方も多数いらっしゃいます。

 

このデイトラは1年前にエンジニアの友人から「デイトラでWebスキル身につくよ」と聞いたので現在DAY11まで到達。

 

DAY11. 『Bootstrapの基本を学ぼう』
Bootstrapは最も有名なCSSフレームワークの一つで、利用することでコーディングスピードが飛躍的に上がります。
まずはドットインストールで基本を抑えましょう!

課題内容はこちら👉https://t.co/rYeDi2Gi1x#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/MFiWAp43QC

— ショーヘー@東フリCMO (@showheyohtaki) January 17, 2019

 

Bootstrapというのはなんでしょうね??

 

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク

引用: ウィキペディア

 

うーん、フロントエンドエンジニアに必要なフレームワークなのかな?

 

読むより馴れろというのが私のモットーなんでVScodeというエディターを使ってドットインストールの動画をみつつ手を動かしてみました!!

 

 

Progatesではhtmlとcssが別のページで書いていたんですけど、ドットインストールでは同じページにHTMLとCSSを掲載する方法でした!!

 

 

<style>内ではwidthやheightを省略していないけど、<div>内ではwidthやheightがw-やh-で省略がOKなんですね…なんでだろ?

ん〜CSSがまだ全然わかっていないですね…><

 

でコードの結果は以下のボックスになりました。

 

boxが高さも横も100だから正方形。

Bootstrapのbg-primaryという色は青、bg-successは緑でw- とh-はそれぞれ横幅と高さだから色の割合を数字%で変更できるようです。

 

これは応用すればカラーで文字とかも作れるのかな?と思ったり…

 

次のコースへ行こうと思ったらドットインストール有料編だったので7月に入ってからデイトラの続きをする予定です。

 

それまではHTMLとCSSでLPが作れるように実際にコードを書きつつJavaScriptを進めていこうと思います。

 

 

LP制作案件がいつでも来ても良いように^^!

 

占いで対面して親密になるから、できるだけ質の高いものを納品したいという考えになるのでこの流れは良いな!

 

JavaScriptも加えれたらよりサイトらしいものができる気がするので走りながら身に付けれるようにしよう。

 

【アイコン大事】Twitterでエンジニア案件獲得のツイートからアイコン変更へ

もりけんさん(@terrace_tech)さんやエンジニアのえつこさん(@eccho731)さんのツイートでアイコンとプロフィール大事とあったので苦渋の選択で顔晒しました…。

 

 

そうなんですよね…信頼につながるんですよね…

 

さらさなかったのは小さいころから顔に自信がないのと写真嫌いだからなので写真がほとんどないという点。

 

ですがプログラミングを頑張りたいので恥を忍んでさらしてみたんですけど…プロが撮影したものじゃないけど良いかな…?

 

とりあえずこれでいこ!

 

【まとめ】

JavaScriptを丁寧にやっていると頭の整理に時間がかかりそうだから、一度本をさっとやってみよう><

頭の整理で一度家に帰ろ^^!

今日したことのまとめ

  • 【タイピング】業務前に寿司タイピングや基本位置のからはじめると意識しやすい
  • 【JavaScript】
    はやくて正確な計算ができる言語
    給与計算ができる
    web試験が簡単に作れる
    ドットインストールにてできることがわかった
  • Bootstrap】1ページでhtmlとcss両方掲載できる
  • 【Twitter】顔がわかるようにしたらフォロワーが増えた
  • 【鑑定】2時間

 

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

もりけんさんのHPへ

-Web, プログラミング

© 2020 Mayu_Yamada