サイドバー
目次
03.初めてのJavascriptでおみくじアプリ
ホームページに動きをつけたり、メモ帳機能をつけたりするためには、Javascript(ジャバスクリプト)というプログラミング言語を学ぶ必要があります。
3つも言語が出てきましたが、基本的にHTML、CSS、Javascriptの3つの言語を用いれば、ホームページ、スマホアプリを作成することができます。
Webプログラミングでは、このうちJavascriptが一番難しく、少しずつ、サンプルコードを写経してアプリを作りながら、勉強していくことになります。
今回は初めてのJavascriptとして、『占ってみよう！』ボタンをクリックすると、『大吉』『中吉』『吉』『凶』がランダムで表示されるホームページを作成し、公開してみたいと思います。
デザインについては、前回に引き続き、CSSフレームワークBulmaを用いてみたいと思います。
ソースコード
https://github.com/adash333/javascript-test/blob/master/index.html
今回作るもの
0.用意するもの（開発環境）
パソコン
Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
1.GitHubアカウントは作成済みとします
GitHubアカウントの作成方法については、このサイトについてをご覧下さい。
2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る）
GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。
- 「Repository name」のところに、「javascript-test」と入力し、
- 「Create repository」ボタンをクリックします。
3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成
すると、以下のような画面になるので、「creating a new file」をクリックします。
以下のような真っ白な画面が出てきます。
- name your file… のところに、index.html と記入し、
- 下の方に、以下のコードをがんばって打ちこみます（<head></head>で囲まれた部分はコピペがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めです。）
- 入力し終わったら、下の方へ移動して、
- Commit new file をクリック
Javascriptのコードは、こちらのサイトを参考にさせて頂きました。
Javascriptのコード<script></script>は</body>の直前に記載する
index.html内にJavascriptのコード<script></script>を書く場所はいろいろあるのですが、最初のうちは</body>の直前に記載するのがお勧めです。
今回は、『占ってみよう』ボタンをクリックしたときに実行する関数random()を、<script></script>の中に記載しています。
関数を定義する方法
function random() {
（ここにrandom()関数の内容を定義します。）
}
Math.floor()関数は、小数点以下を切り捨てる関数です。
Math.floor(5.32) //=> 5 Math.floor(3.14) //=> 3 Math.floor(-1.7) //=> -2
Math.random()関数は、0以上1未満の実数を返す関数です。
// その時によって0以上1未満の中でランダムな値が返ってきます。 Math.random() //=> 0.9427193981204487 Math.random() //=> 0.8130707622404834 Math.random() //=> 0.6202760854276965
document.getElementById(“omikuji”).innerHTML = msg; は、
id="omikuji" である<div></div>の中身を、"msgの中身"に置き換える。
ということになります。
4. GitHubでindex.htmlをホームページとして公開
以下のような画面になるので、画面右上の方にある、「Settings」をクリック。
- Settingsページが表示されるので、下の方へ行き、
- GitHub Pagesのところの、Source のところの、None をクリック
- master branch をクリック
- Save をクリック
5. 公開されたホームページを確認する
公開されているホームページアドレス（URLといいます）は、Settings画面から確認することができます。
- Settingsの画面になっていますので、そのまま下の方へ行き、
- GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック
私の場合は、https://adash333.github.io/javascript-test/ がリンクとなり、実際、以下のようになりました。
スマホでは、以下のように表示されます。
コード解説
HTMLのタグ、要素、タグの中身について
今回のおみくじアプリでは、HTMLファイル内の以下の場所を、Javascriptを用いて書きかえています。
<button id="omikuji" class="button is-danger has-text-centered is-outlined">結果</button>
classの部分は今回はスタイルを指定しているだけなので省略すると、以下のようになります。
<button id="omikuji">結果</button>
これは、
<button開始タグ>(タグの中身)</button終了タグ>
と表すことができて、この<button開始タグ>から<button終了タグ>までをひとくくりにして、『要素』elementと呼びます。
タグは、tag
タグの中身は、javascriptで指定するときはinnerHTMLと呼びます。
HTMLのtagタグ、element要素については、https://saruwakakun.com/html-css/basic/htmlが非常に分かりやすいです。
HTMLの特定の要素elementの中身innerHTMLを書き換える方法
単純化したおみくじ結果の表示部分を再掲します。
<button id="omikuji">結果</button>
この『結果』の部分を書き換えるjavascriptコードは以下のようになっています。
document.getElementById("omikuji").innerHTML = msg;
これは、
- HTML内で、
- id=“omikuji”である要素の、
- 中身(今回は『結果』の部分)に、
- 変数msg(“大吉”など)を代入する
ということになります。
getElementById(“omikuji”)は、idがomikujiである要素elementをgetするという意味になります。
参考:https://www.sejuku.net/blog/30970
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方
2017年 by マサト
オプション：おみくじアプリのPWA化
参考サイト
https://www.sejuku.net/blog/63774
【JavaScript入門】コピペで簡単！サンプル集紹介と活用法
https://htmlst.hatenablog.jp/entry/2017/03/15/050740
2017-03-15
おみくじを作る方法
