どうもどうも！当サイト管理人のほたぴんです！
出来るだけ毎日プログラミングに触れる時間を作るために今回ブログを開設いたしました！
プログラミング始めたばかりの方は特に何をどうやっていいか分からず色々調べ回っている事でしょう
そんな中「Javascriptは初心者におすすめ！」とかっていう記事よく見ませんか？(笑)
間違いではありませんが、本当に全くのゼロからのスタートの方にはおすすめと言われてもどう始めたらいいかなんて全く分かりませんよね、、、
とはいえプログラミングが出来るようになる為にはとにかく毎日コードを書いて書いて書きまくるしか無いのです！
なので、そんなスーパー初心者の方々が少しでも自信をつけて一人前になれるように今回、Javascriptを使って簡単なアプリを一緒に作っていきたいと思います！
Javascriptってなに？
早速答えを言うとただのプログラミング言語です！
それ以上でもそれ以下でもありません。。
通常人間は言葉を用いて人間同士コミュニケーションをとる必要があります。
日本語・英語・中国語など世界にはたくさんの言語がありますが、機械に何か命令を下したい時に人間の言語を用いて命令を下しても残念ながら機械は人間の言葉を理解することが出来ないので何も起こりません。
そこで機械の言葉であるプログラミング言語を用いて機械に命令を下す必要があるのです。
そのプログラミング言語のうちの一つが今回メインに扱っていくJavascriptという訳です。
もっと専門用語などを用いればJavascriptが得意な事や苦手な事など細かな説明ができますが、初心者の段階でコードをコードを書くにあたって特に必要ない知識なので覚えなくていいです！
興味がある方は時間がある時にJavascriptの公式リファレンスなどを読んで見てください！
Javascript公式
アプリの詳細
今回作成していくアプリは「電卓」です！
アプリとか言っておきながら電卓かよ、、とテンション下がってしまう気持ちはよく分かりますが電卓のwebアプリは計算機能の実装の手順が分かりやすく学べるので学習効率が非常に良いと言えます！
また、アイデア次第では様々な機能を実装することができるので市販の電卓やスマホについてる電卓よりもアナタ好みのアプリを作る事もできますよ！
例えば生年月日を入力してとあるボタンを押せばその人が生まれた日が何曜日だったのか表示させる機能とか、、？
兎に角、どんなものを作るかはアナタのアイデア次第です！ってことです！
そして今回作成予定の電卓はこのような感じです！
上記の動画のように簡単な四則演算ができる電卓の完成を目標にしていきます。
また、今回の電卓アプリはあくまで学習用アプリでリリースなどは考えていない為、レスポンシブ対応やセキュリティ面の脆弱性などは考慮しないものとします！
そして、電卓作成の流れとしては大きく分けて３ステップです。
①ボタンの作成
②機能の作成
③デザインの作成
以上です！
それでは早速ボタン作成からやっていきましょう！Let’s Go!!!!!
コーディング
ボタンの作成
まずはHTMLを用いてボタン作成を行なっていきます。
みなさんも下記のコードを参考にしながら自分の手を動かしてコードを書いていきましょう！
<body>
<div id="numberArea">
<h1>Web Calculator</h1>
<input type="text" id="numberSpace"><br>
</div>
<div id="line1">
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
<button id="button4">4</button>
<button id="button5">5</button><br>
</div>
<div id="line2">
<button id="button6">6</button>
<button id="button7">7</button>
<button id="button8">8</button>
<button id="button9">9</button>
<button id="button0">0</button><br>
</div>
<div id="line3">
<button id="plusButton">+</button>
<button id="minusButton">-</button>
<button id="timesButton">*</button>
<button id="devidedButton">/</button>
<button id="point">.</button><br>
</div>
<div id="line4">
<button id="allClear">AC</button>
<button id="equal">=</button>
</div>
</body> 上記のコード内で利用した重要なタグだけ役割を説明します！
①inputタグ
⇨数字や文字列を入力するスペースを作成します。
電卓で言うところのディスプレイの役割を果たします。
②buttonタグ
⇨web上で機能するボタンを作成します。
buttonタグでボタンを作成しただけではまだ機能をつけていない為、押しても何も起こりません
そして非常にスペルミスが多いタグの一つとなっていますので注意しましょう！
全てのコードを書き込んだ後、下記の画像のようになっていれば正しくコードが書けています！
コードを打ち込む際の注意点として、id名などは後ほどCSSを実装する際に必要になってくるので今の段階でコードの中に記載しています。
そのままid名などをコピーしても良いですし、ご自身で分かりやすいid名をつけていただいても構いません！
そして、この段階ではまだボタンの形を作って表示しているだけに過ぎないのでボタンとしての機能は何も備わっていない為、ボタンを押しても何も反応しないはずです。
それでは次の章で今作成したボタン達に機能をつけていきましょう！
機能の作成
今回作成する電卓の機能については前述の通り、Javascriptを用いて記述を行なっていきます。
Javascriptの記述方法に関して、script.jsという外部ファイルを作成しそのページ内にJavascriptのコードを書き込んでいこうと思います。
全くの初学者の方にとってはHTMLと違いコードが見辛くなったり急に難易度が上がったかのように感じてしまうかもしれませんが、慣れてしまえばとても簡単な事の繰り返しになりますし、プログラミングの腕を磨くには正直慣れるしかないので理解出来るようになるまで何度も繰り返し学習を行っていきましょう！
改めて、今回の機能面の作成手順は以下の順番で進めていきます
①ファイルの作成
②JavascriptのファイルとHTMLのファイルを繋げる
③ボタンを押すと数字が入力されるプログラムを作成する
④AC(オールクリア)ボタンの機能を作成する
⑤コードをきれいにまとめる(応用の為飛ばしても大丈夫です！)
⑥＝(イコール)ボタンを押すと計算されプログラム
上記の6ステップに分けて機能の実装を行なっていきます！
①ファイルの作成
ファイルの作成方法に関してはご自身で使用しているエディタツールによって方法が異なってくるかと思いますので、各ツールの操作方法に従い新たなファイルを作成してください。
その時、先ほどボタン作成のコードを打ち込んだindex.htmlという名前のファイルと同じ階層にscript.jsというファイル名で新規ファイルを作成するという点にご注意ください。
次に、新しく作成したscript.jsのファイルとindex.htmlのファイルを繋げる処理を行なっていきます！
②JavascriptのファイルとHTMLのファイルを繋げる
先ほど作成したscript.jsのファイルとindex.htmlのファイルを繋げるにはHTMLの記述うの中のheadタグ内に下記のコードを打ち込んでください。
<script src="./script.js"></script>基本的にheadタグ内であればどこに記述しても構いませんが、headタグ内には重要なコードが複数記述されているのでheadの終了タグの直前あたりに上記のコードを書いておくと他のコードの邪魔をする事なく、スッキリとした書き方にもなると思います！
上記のコードが正しく書けたらHTMLファイルとJavascriptファイルがしっかりとつながっているかどうか確認する為にalertと呼ばれる警告文を表示する為のプログラムを記述してみます。
script.jsのファイルの中に下記のコードを書き込んでみてください！
alert("こんにちは");下記の画像のようになっていたらファイル同士の接続が完了し、正しくコードを反映できている証拠です！
もしも、何も表示されていない場合はリンクした際のスペルミスや更新がまだできていないなどの可能性が考えられます。
また、アラートの枠は出ているけど「こんにちは」の文字が反映されないなどの場合はコーデディングミスの可能性が高いので”(ダブルクォーテーション)を忘れていないかなど細かくチェックしてみてください！
JAvascriptの動作確認まで無事完了したらようやく先ほど作成したボタンに機能をつけていきましょう！
③ボタンを押すと数字が入力されるプログラム
電卓のメイン機能をつける前に数字の入力機能を作成していきます！
まず初めにコードの記述例を下記に記載しますので遺書に入力してみてください！
<button id="button1" onclick="inputNumber1()">1</button>function inputNumber1(){
document.querySelector('input').value += '1';
}上記のコードの記述が完了すると1のボタンを押すとテキストエリアに1という数字が入力されます！
ちょっと感動ですね！笑
それでは1のボタンの機能が完成したら続けて0〜9までの数字と四則演算の記号、小数点ボタンそれぞれに同じようなコードを繰り返して記述して下さい。
また、上記のコードをコピペすると全てのボタンを押した際に1と入力されてしまうので、変更する必要がある部分は適切な数字や記号へと修正してください。
下記に完成品のコードを記載しておきますが、出来るだけご自身で考えてから答え合わせのような感覚で下記のコードを参照してください！(コピペ厳禁です！笑)
<button id="button1" onclick="inputNumber1()">1</button>
<button id="button2" onclick="inputNumber2()">2</button>
<button id="button3" onclick="inputNumber3()">3</button>
<button id="button4" onclick="inputNumber4()">4</button>
<button id="button5" onclick="inputNumber5()">5</button>
<button id="button6" onclick="inputNumber6()">6</button>
<button id="button7" onclick="inputNumber7()">7</button>
<button id="button8" onclick="inputNumber8()">8</button>
<button id="button9" onclick="inputNumber9()">9</button>
<button id="button0" onclick="inputNumber0()">0</button>
<button id="plusButton" onclick="inputPlus()">+</button>
<button id="minusButton" onclick="inputMinus()">-</button>
<button id="timesButton" onclick="inputTimes">*</button>
<button id="devidedButton" onclick="inputDevide()">/</button>
<button id="point" onclick="inputPoint">.</button>function inputNumber1(){
document.querySelector('input').value += '1';
}
function inputNumber2(){
document.querySelector('input').value += '2';
}
function inputNumber3(){
document.querySelector('input').value += '3';
}
function inputNumber4(){
document.querySelector('input').value += '4';
}
function inputNumber5(){
document.querySelector('input').value += '5';
}
function inputNumber6(){
document.querySelector('input').value += '6';
}
function inputNumber7(){
document.querySelector('input').value += '7';
}
function inputNumber8(){
document.querySelector('input').value += '8';
}
function inputNumber9(){
document.querySelector('input').value += '9';
}
function inputNumber0(){
document.querySelector('input').value += '0';
}
function inputPlus(){
document.querySelector('input').value += '+';
}
function inputMinus(){
document.querySelector('input').value += '-';
}
function inputTimes(){
document.querySelector('input').value += '*';
}
function inputDevide(){
document.querySelector('input').value += '/';
}
function inputPoint(){
document.querySelector('input').value += '.';
}ここまでコードが書けるとAC(オールクリア)ボタンと＝(イコール)ボタン以外の全てのボタンに機能をつける事ができたかと思います！
④AC(オールクリア)ボタンの機能を作成する
それでは続いてAC(オールクリア)ボタンの実装についてです。
AC(オールクリア)ボタンとはこのボタンが押された際にテキストエリア内の全ての記述を消すことが出来るボタンなので、考え方としてはテキストエリアを空欄で上書きする機能をつければ言い訳です！
という事を踏まえて、先ほどの数字や記号入力のコードも参考にしながらACボタンを押した際に「空欄」を入力するプログラムを作ってみてください！
正解はコチラです。
<button id="allClear" onclick="allClear()">AC</button>function allClear(){
document.querySelector('input').value = ' ';
}これで残るボタン機能は＝(イコール)ボタンの実装のみです！
ですが、イコールボタンの実装に移る前によりコードが見やすくなるように少し修正をしていきましょう！
⑤コードをきれいにまとめる（応用）
そもそもなぜコードを見やすくする必要があるのかというと、さまざまな理由がありますが一番はコードの可読性つまり読みやすさを上げる為です。
基本的にプログラミングは自分ひとりではなくチームを組んでやることが多いため、自分ひとりが分かれば良いという考えだとチーム全体での生産性は下がってしまいます。
また、1人で作業する場合においてもコードがスッキリしていた方が何かしらのエラーが発生した際に原因の特定をスピーディーにスピーディーに行えると言ったメリットもあります。
その為、コード出来るだけ短くまとめて書くことは重要です。
また、コードをまとめて書くことをコードのサブルーティン化と呼ぶこともあります。
実際にお仕事でプログラムを書く際には必須のスキルと言っても過言ではないので練習段階から常に意識しておくとサブルーティン化の癖がつくでしょう！
それではまず初めに解答例を出しますので一緒に学習していきましょう。
<button id="button1" onclick="add('1')">1</button>
<button id="button2" onclick="add('2')">2</button>
<button id="button3" onclick="add('3')">3</button>
<button id="button4" onclick="add('4')">4</button>
<button id="button5" onclick="add('5')">5</button>
<button id="button6" onclick="add('6')">6</button>
<button id="button7" onclick="add('7')">7</button>
<button id="button8" onclick="add('8')">8</button>
<button id="button9" onclick="add('9')">9</button>
<button id="button0" onclick="add('0')">0</button>
<button id="plusButton" onclick="add('+')">+</button>
<button id="minusButton" onclick="add('-')">-</button>
<button id="timesButton" onclick="add('*')">*</button>
<button id="devidedButton" onclick="add('/')">/</button>
<button id="point" onclick="add('.')">.</button>
<button id="allClear" onclick="update( '' )">AC</button>function add(i){
document.querySelector('input').value += i
}
function update(i){
document.querySelector('input').value = i
}それではコードの解説をしていきます。
サブルーティン化する前のコードに関してはそれぞれのボタンに一つずつ関数を作ってそれを適用させる処理を施していましたので、簡単に書ける反面、手間がかかりコードの可読性も落ちてしまっていました。
そこで、今回はまずaddという名前でiという文字列が入力されたときiという文字列を入力するという関数を作り、数字や記号など全ての追加入力の機能を一つの関数で行えるようにしました！
そしてもう一つのupdateという関数に関してはiという文字列が入力されたときiという文字列を上書き入力するという機能になっているためACボタンの役割をしっかりと果たすことが出来るようになりました！
機能自体はサブルーティン化前と変わらないので、難しい場合はこの章自体を飛ばしても電卓自体は完成するのでご安心ください！
⑥＝(イコール)ボタンを押すと計算されプログラム
まずはいつも通りコードを記載していきます。
<button id="equal" onclick="equal()">=</button>function equal(){
const v = document.querySelector('input').value
try{
const f = new Function('return ' + v)
update(f().toString())
}catch(_error){
update(_error)
}
}急に難易度が上がったように見えますが、一つずつ理解を進めていけばなんら難しいことはありません！
考え方は今までと全く変わらず、equalという名前の関数を作ってそれを適用するだけとなります。
そして1行目(const v = document.querySelector(‘input’).value)のコードでvという変数を定義し、その変数vの中にテキストエリア内に入力されている文字列を格納します。
その後try~catch関数を用いてどのような処理を行うのかを記載していきます！
ちなみにtry~catch関数とは簡単にいうと、予め例外が発生する可能性がある処理を記述してもし実際に例外が発生してしまった場合はどのように処理を行うかを指定するものになります。
つまり、tryの中に例外が起こる可能性のある処理を記述する必要があるので、今回の場合は
const f = new Function(‘return ‘ + v)とupdate(f().toString())の二つのコードを記載し計算結果をストリング型(数字型)で返すように指示を出します。
そして、catchの中にはupdate(_error)のコードを記述しておきます。
その結果、例外がなければストリング型(数字型)で答えを表示し、想定外の出来事が起きた際にはerrorと表示されるようになっているはずです！
これにて、最低限の機能面の実装が完了しました！(オメデトウ!!)
何度か計算を行い、自分が作ったプログラムがしっかりと作動するかを確認してみましょう！
他にもルート機能や税率計算機能などつけることができる機能はいくつかありますので、より完成度の高い電卓を目指す方は頑張ってみてください！
デザインの作成
デザインに関しては皆さんの好みのCSSを当ててください！
念の為見本のCSSのコードを記載しておきますが、あくまでボタンの位置を調整したりするくらいの簡単なものなのでオリジナリティあふれるデザインをぜひ考えてみて下さい！
#numberArea{
display: flex;
flex-direction: column;
text-align: center;
}
#numberSpace{
margin: 0px 550px;
}
#line1{
display: flex;
justify-content: center;
}
#line2{
display: flex;
justify-content: center;
}
#line3{
display: flex;
justify-content: center;
}
#line4{
display: flex;
justify-content: center;
}
#button1,#button2,#button3,#button4,#button5,#button6,#button7,#button8,#button9,#button0{
padding: 10px 15px;
margin: 5px;
}
#plusButton,#minusButton,#timesButton,#devidedButton,#point{
padding: 10px 16px;
margin: 5px 5.5px;
}
#allClear{
margin-top: 10px;
margin-right: 67px;
padding: 10px 20px;
}
#equal{
margin-top: 10px;
margin-left: 67px;
padding: 10px 20px;
}以上です！
電卓に限らず、クライアント様に何かを売り込む際などは同じ機能でもデザイン一つで契約が決まる事も多いのでたかが見た目と手を抜くことなく自分だけの世界一電卓を作ってみて下さい！
コメント