ドットインストール入門【JavaScriptでおみくじを作ろう】回答

TECH

ここではドットインストール入門編【JavaScriptでおみくじを作ろう】を視聴したわたしがエラーで前に進めないあなたのために回答を用意しました。ついでに体験談を基にした感想付きです。

 

あなたはドットインストールのJavaScriptに興味があるんですね？

 

もしかすると、エラーが出てるけど、解決できない。。。と悩んでるかもしれません。

 

この記事を読むと以下の疑問が解決します。

 

  • ドットインストール入門【JavaScriptでおみくじを作ろう】の感想
  • ドットインストール入門【はじめてのJavaScript】の感想
  • もしや【JavaScriptでおみくじを作ろう】から始めたほうがいい？
  • ドットインストール入門【JavaScriptでおみくじを作ろう】の回答

 

それでは見ていきましょう。

スポンサーリンク

ドットインストール入門【JavaScriptでおみくじを作ろう】の感想

結論から言うと、ポピュラーなファイル分割をしたスタイルとしては、非常に簡潔に書かれているデザインもスタイリッシュなおみくじが作れると感じました。

 

HTML、CSS、JS にファイルを分割しているため、一般的なウェブサイトを作る方法と一緒です。

 

まずは、これを基本スタイルとして学ぶと理解が早いだろうと感じました。

 

もし【はじめてのHTML】や【はじめてのCSS】でつまづいているあなた、体験談や感想が知りたいあなたはこちらもどうぞ。

 

ドットインストールが評判通り難しい理由【はじめてのHTML】
ここではドットインストールが評判通り難しい理由を解説します。評判口コミや体験談で評価の高いドットインストールですが体験者によるとプログラミング初心者には難しく感じるようです。まずは【はじめてのHTML】編です。
からくちコメント.com
2019.09.23

 

ドットインストール入門【はじめてのJavaScript】の感想

結論から言うと【はじめてのJavaScript】は簡単で達成感があります。

 

プログラミング初心者のうちは、文字列を入力すると、どんなアプリを作ることができるのか？がハッキリしていないと、ただコードを入力していくだけでは、つまらなく感じます。

 

そんな初心者にとって退屈で意味の分からない文字列を、ただただ永遠と入力しているという状況をみごとに解決している良い動画だと率直に感じました。

 

もっと言えば、HTML も CSS も最小限のため、初めてプログラミングをするには丁度良いボリュームだと感じます。

 

さらに良いところを深掘りすると、HTMLファイル内に CSS と JavaScript をひとつにまとめており、一枚でスッキリと分かりやすくまとめられて完成する部分も素敵です。

 

コードの打ち間違えをしても、デベロッパーツールでエラーを読み取る方法もあり、実用的です。

 

JavaScript の入門編としては最適な教材だと感じました。

 

もしかして【JavaScriptでおみくじを作ろう】から始めたほうがいい？

個人的な意見から言うと、先に【はじめてのJavaScript】から始めたほうが、三日坊主を防げるのではないかと感じました。

 

理由は単純で、前述で述べた通り【はじめてのJavaScript】は簡単で達成感があるためです。

 

入門編ではあるのですが【JavaScriptでおみくじを作ろう】は HTML、CSS、JSファイルに分割されているため、ひとつのファイルですべての動作が完結していません。

 

そのため少しだけ煩雑で難しく感じます。

 

とりあえず、何でもいいので手を動かして「おみくじ」を作りたいと言うひと以外は、悪いことは言いませんので【はじめてのJavaScript】から始めましょう。

 

ドットインストール入門【JavaScriptでおみくじを作ろう】の回答

VScodeでファイルを横並びに並べて、ペラペラ漫画みたいに、タブを何度か切り替えれば、どこが間違っているか分かるはずです。

 

まずは、間違え探し(エラー探し)をしてみましょう。

 

MyOmikuji/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charaset="utf-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="css/styles.css"
  </head>
  <body>
    <div id="btn">?</div>

    <script src="js/main.js">
    
    </script>
  </body>
</html>

MyOmikuji/js/main.js

'use strict'

{
  const btn = document.getElementById('btn');

  btn.addEventListener('click' , () => {
    const n = Math.random();
    if (n < 0.05) {
      btn.textContent ='大吉'; // 5%
    } else if (n < 0.2) {
      btn.textContent = '中吉'; // 15%
    } else {
      btn.textContent = '凶'; // 80%
    }
  });
}

MyOmikuji/css/styles.css

body {
  background: #efefef;
}

#btn {
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
}

#btn:hover {
  opacity: 0.9;
}

#btn:active {
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
}

 

JavaScriptでおみくじを作ろう 動画一覧

#01 おみくじを作ってみよう (02:38)
#02 ボタンのマークアップをしよう (01:55)
#03 画面のスタイルを整えよう (02:33)
#04 クリックイベントを設定しよう (02:34)
#05 ボタンのスタイルを整えよう (02:12)
#06 ランダムな整数値を生成しよう (02:16)
#07 おみくじを表示してみよう (02:10)
#08 配列を使ってみよう (02:47)
#09 確率を操作してみよう (03:04)

 

それにしても、おみくじもいいけどさ、ぶっちゃけると【はじめてのJavaScript】の一番最初の動画に出てくる、ピンポンゲームの方がもっと興味あるんだけど？バッサリ

 

人気記事 【無料含む】プログラミングスクールおすすめは３社【断言します】

人気記事 【WordPress】ブログの始め方【初心者でも簡単です】

コメント