2021.6.2

プログラミングのおさらいとJavaScriptとの出会い！…Vol.3

みなさん、こんにちは！

UNIT_SAPPOROコミュニティスタッフ兼一期生のSeiji★なり！（何故、なり？）

HTML&CSSを爆速で駆け抜けた一期生。今だプログラミングの「プ」にまで到達していない事に愕然としつつ、理解しているしていない関係無しに授業はJavaScriptに突入していきます…HTML/CSSはカリキュラムの一週目で駆け抜け、翌週から当面、JavaScriptという言語になるのです。

少しプログラミング言語についておさらいします。

実は、という表現が正しいかどうかになるのですが…HTML/CSSは「プログラミング言語」ではありません。

HTMLは「マークアップ言語」

CSSは「スタイルシート言語」

と呼ばれ、「プログラミング」に該当するタイプではありません。

プログラミングの定義は「計算が出来て、データ処理が容易」というのがわかりやすいでしょうか？HTML/CSSはそういう意味では計算してデータ処理をしているわけではないんですね（もう少し詳しく言うと、HTML/CSSは指定された情報を出力しているだけで、CSSは装飾しているにすぎません）。

そんなHTML/CSS編の苦闘はコチラよりご確認出来ます！

で、JavaScriptというプログラミング言語なんですが…この言語、かなり「お古」です。古参とさえいえるでしょう。インターネットが普及し始めた90年代初頭に生まれ、この言語の目的は「Webサイトを表示するブラウザ上で動く言語」です。

簡単に言えば、ヘッダーの画像がスライドしていたりするのは、この言語で行います。

とはいえこの言語、実は昔、厄介モノにされた経歴なんかあります。パソコンを壊す言語としても扱われてしまったんですね。なので、ネット古参組の私はブラウザの機能で「JavaScript」を読み込みしない設定なんかをして使っていたものです…しかし、近年になり、プログラムの改定や様々な対応が進んだ結果、「めっちゃ使える言語」になりました。

パソコンだけに留まらず、スマホやタブレットでも動きますし、スマホのアプリなんかもJavaScriptは利用されていますし、サーバー連携など昔はphpという言語の得意技だったのですが、クラウドシステムの登場なんかもあって、JavaScriptで昔は出来なかった事も出来るようになってきました。

そのため、古参言語の一つといえど、多くのデバイスやシステムで動く事から、学ぶことになるのですが…

先生の話が何言っているのかワケワカメ！

\(^_^)/←顔文字の使い方が古い…

百聞は一見に如かず。JavaScriptの言語を見ていただきましょう。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script>
$(‘#pull_health’).on(‘click’, function () {
    const randomNumber = Math.floor(Math.random() * 5);
    if (randomNumber == 0) {
        $(‘#result’).text(‘大吉’);　　// text()で指定した部分を書き換え
    }
    else if (randomNumber == 1) {
        $(‘#result’).text(‘中吉’);
    }
    else if (randomNumber == 2) {
        $(‘#result’).text(‘小吉’);
    }
    else if (randomNumber == 3) {
        $(‘#result’).text(‘狂’);
    }
    else if (randomNumber == 4) {
        $(‘#result’).text(‘大狂’);
    }
    else {
        alert(‘はずれ’);
    }
});
$(‘#pull_love’).on(‘click’, function () {
    const randomNumber = Math.floor(Math.random() * 5);
    if (randomNumber == 0) {
        $(‘#result’).text(‘大吉’);　　// text()で指定した部分を書き換え
    }
    else if (randomNumber == 1) {
        $(‘#result’).text(‘中吉’);
    }
    else if (randomNumber == 2) {
        $(‘#result’).text(‘小吉’);
    }
    else if (randomNumber == 3) {
        $(‘#result’).text(‘狂’);
    }
    else if (randomNumber == 4) {
        $(‘#result’).text(‘大狂’);
    }
    else {
        alert(‘はずれ’);
    }
});

…駆逐されるのは、我々かJavaScriptか…

さぁ、講義中に飛び交う初めて聞くワード群！

Github? 変数? 演算子? そんな中、一週間後の課題は「じゃんけんアプリ」を創ってこい！とのお達し！

そのために、授業中は「おみくじアプリ」を作りながら学んでいきます！

↑はその一説で、私がちゃんと書きましたよ！

ボタンをクリックするとランダムでおみくじ結果が表示されるーというものです！

さぁ、我々は生き延びる事が出来るのか…次回、こうごご期待ください！