はじめに
こんにちは。株式会社システムアイの添田です。
アドベントカレンダー企画2日目の担当をさせていただきます。
まずはじめに簡単に自己紹介をさせていただきますと、システムアイに入社以来BPOの業務をしているため、実際にプログラミングに触れる機会が皆無な私です。
しかし、システムに携わる業務をさせてもらっている以上、少しでも「こんな風に書いたらこんな風に動く」、みたいなのを知っておくべきですし、今後の業務にも役に立つはず！ということで、今回は私が現在業務で扱っているシステムがTypeScriptで書かれているので、TypeScriptを勉強…
と思ったのですが、色々と調べるとTypeScriptはJavaScriptの上位互換であるということが分かり、まずは基本となるJavaScriptから勉強したほうがいいんじゃないかということで、タイトルにもある通りJavaScriptを学んでいく様子を記事にいたしました。
上記の通り、初心者が1から学んでいくというスタイルの記事のため、新たな知識や実務でのナレッジ等の取得を目的に来訪いただいた方には大変申し訳ないのですが、温かい目で見守っていただけますと幸いです。
実行環境の準備
JavaScriptを動かすためにはまず、環境の準備をしなくては…ということで色々ググってみました。
私の実行環境になり得る候補は以下となりました。
- Web Maker(ブラウザ)…見た感じ一番使いやすそう。
- Glitch(ブラウザ)…説明に「Node.js」等の聞いたことのある単語があって、今担当しているシステムを理解するには一番よいかも。ただUIが英語っぽい。
- Runstant(ブラウザ)…説明に「国産」の文字が！日本人なら扱いやすそう。
- eclipse(ローカル)…有名、めっちゃ有名。実際にこれを使って開発をしている方を見てました。
- Visual Studio(ローカル)…Microsoftが開発してる。ということでなんか安心感ある。
と、色々と調べているうちに衝撃の事実が…
簡単なものを動かすなら、
C h r o m e だ け で い い
とのこと。
…
Chrome上で実際にJavaScript書いてみた
1.console.log()
なんだ実行環境ってChromeだけで良かったんじゃん…
なんて落ち込んでいますが、気を取り直して…
デベロッパーツールを使うらしい。
これは実務でも割と使うことが多いので、なんとなく分かるぞ。
F12で起動！ポチッ！
初期表示はこんな画面ではなかったけれど、ゴニョゴニョしてこの画面まで持ってきました。
ということで、ここにコードを打っていきます。
まずはこれを書かなければ始まらないと偉い人が言っていたので、とにもかくにも書いてみました。
ちゃんと表示されるかな…大丈夫かな…
Enterポチッ！
ほっ…ちゃんと表示されました。
2.変数
変数とは、「データを入れておける箱のようなもの」とのことで…
宣言をするにはletかconstというのを使うらしい。
…
とりあえず習うより慣れろかなということで、実際に書いてみました。
ど、どうでしょうか…
今回はcommentという変数に「システムアイ」という文字列を設定し、comment2という変数に「最高！」という文字列を設定して、さらにそれらをくっつけて表示させてみました。
そして、次にletは再代入ができるとのことで、一度「システムアイ」と設定をしたcommentに「プログラミング」という文字列を再代入してみました。
そしてまたcomment2とくっつけると…
望んだ通りの結果となりました！！！
(やばい…楽しい。普段からバリバリコーディングしている方たちからしたら、初歩の初歩にもならねーよ、こんなことで喜んでんじゃねーよって感じだと思うのですが、当方本当に経験がないものですから温かく見守っていただけますと幸いです…)
3.データ型と演算子
この章を学んでいく中で特記することはないかなと思いましたが、比較演算子の書き方で面白いなあと思ったのが、===です。
そもそもイコールだったら=じゃないの？なんで3つも？？というところから始まりました。
勉強していくと==はゆるい比較で、===が厳密な比較とのこと。
実際に打ってみて表示した結果がこちら。
まあ同じ「1」だしそりゃtrueよね。
で、次にこちら。
同じ「1」なのに、false…
ほうほうほう…
左辺は「数値」の1、「右辺」は「文字列」の1として判断されているためこいつらは別物だよって判断されたわけですね。
==と===の違い、面白いなあと思ったのですが、==を使う機会ってあるのかなと思ったり…
それにしてもこれ、
某シューティングゲーム、グラ○ィウスのツインレーザーにしか見えない。
※なんのことやらという方は画像検索してみてください。多分私の言ってることが分かると思います。
4.if文
プログラミングの核になる部分ですよね。
ここの書き方次第で、北海道に行くつもりが沖縄に行っていたり、はたまた別の国に行ってしまったりしてしまう可能性があると…
とにかく習うより慣れろということで、とりあえず一個書いてみます。
「もしイチローの打率がバースより高ければ、「イチロー最高！」と出力する。
バースの打率のほうが高ければ、「バース最高！」と出力する。」
これでやっていきましょう。
お、できたかな…
じゃあちょっと試しにイチローの打率を0.390にして「イチロー最高！」と表示されるかどうか確認してみます。
ぐぬぬぬ…
なんかエラーが出てしまった…
constは再代入ができないのを忘れていました…
宣言からやり直して、同じ条件文で試した結果、
よかった、ちゃんとイチローが最高の打者になりました。
それと、if文はどうやら簡単なものであれば、もっと簡単に書くことができるらしいとのことで、その書き方も試してみました。
※途中宣言でミスったり「！」が抜けてたりしますが、期待した答えになりました。
resultを宣言して、じゃあそのresultってなにするの？
というと、()内で変数の比較をしてそれがTrueだったら:の左側を、falseだったら右側を返すって感じですね。
ifを使わずに書けるのが面白いなと思いました。
5.繰り返し文
これもプログラミングのすごいところですよね。
2回、3回の繰り返しだけならともかく、100回、1000回なんてなってきたらとてもじゃないけど人の手に負えない…。
でもほんのちょこっと繰り返してねっていう記述をしてあげれば簡単に1000回実行なんてできてしまうのだから、本当にすごい…。
というわけで、習うより慣れろの時間です。
1000回とか大きな繰り返し回数を聞くと、なぜかいつも真っ先に浮かぶGLAYの「100万回のキス」という曲になぞらえて、ちゃんと1万回目から始まり、100万回目まで繰り返し表示することができるのか試してみます！
※流石に本当に100万回の繰り返しは厳しいので、「i万回のキス」という形でやってみます。
GO！
あれ…なんか想像してたのと違う。
1万回のキス
2万回のキス
・
・
・
100万回のキス
っていう感じで出力されると思っていたのですが…
なにか間違えたかな…と思って文を眺めていたら、本来
${i}万回のキス
にならなくてはいけないところが、
$[i]万回のキス
になっておりました…
気を取り直してもう一度…！
あ…あ…あれ…ぇ？？？
何がおかしいんだろう…
と、さらによーく見てみると
``じゃなくて
''になってる！
というわけでまた気を取り直してもう一度！
これでどうだ…！
き、きたーーーー
そうそう求めていたのはこ
れじゃない！！！！
99万回までしかできてない…
そもそも0万回目のキスってx_x
iが1から始まらないといけない感じですか…(やっぱりiがない(0だ)と、おっと誰か来たようだ…)
以下のように修正して何度目かの正直！
今度こそどうだ！
無事100万回のキスを数えることができました。
※この記事を書いていて後から気付いたのですが、正式な曲のタイトルは「100万回のKISS」でした。
6.関数
関数は、変数と同じように宣言を行って、一度宣言しておけばその処理をもう一度書くことなくすぐに呼び出せるようになる機能で、functionというのを使うらしい。
そして、仮の引数を設定し、その引数に何を設定するかで自由に出し分けができるようなので試しに関数を作って実際に動かしてみました。
まずは関数の宣言。
「money円ちょうだい」
と出力するgiveMeMoneyという関数です。
そして引数を入れて実行。
おおおー！できました！
関数を宣言しておくことで、
console.log(`${money}円ちょうだい`);
を再度書く必要がなくなるわけですね！
便利！
では金額を増やしてみます。
一度このように関数を作れば、後は自由に請求する額を決められるってことなんですね。
素晴らしい…。
もし引数が渡されなかったときのためにデフォルト設定できる機能もあるようなので試してみました。
100万円ちょうだいって言って、冷ややかな目で見られて言葉に詰まったときのための予防線って感じですね。
実際にこれをやったら友人から縁を切られることでしょう。
7.オブジェクトとメソッド
今回の記事はここまでとさせていただきます。
これまで稚拙な記事にお付き合いいただき誠にありがとうございました。
次回作にご期待ください。
…
…
じゃなくて！
この章で実際に動かしてみてから、締めとさせていただければと思います！
(オブジェクト指向？は初心者には難しい難しいと聞いていたので、本当にやらずに締めようと思っていたことは内緒です)
まず、オブジェクトという概念の理解ですが、私は以下のように理解しました。
例えば、以下のような宣言がされているだけの状態ではデータがバラバラになっているので、これらが何を意味しているのかが分かりづらい状態だとします。
const pitcher = '千賀';
const catcher = '甲斐';
const gloveMaker = 'Mizuno';
const firstBaseman = '中村';
const secondBaseman = '周東';
const thirdBaseman = '野村';
const batMaker = 'UnderArmour';
const shortStop = '今宮';
const leftFielder = 'グラシアル';
const centerFielder = '牧原';
const rightFielder = '柳田';
const designatedHitter = 'デスパイネ';
そこでgloveMakerとbatMakerを除いたデータを、「ソフトバンクホークス」という一つの集合体として考えれば扱いやすくなるよねということ。
こうして出来上がった「ソフトバンクホークス」がオブジェクト。
※ファンなもので趣味全開ですみません。解釈は合っていると信じています。
そして、メソッドの概念としては、
この「ソフトバンクホークス」という集合体がどう振る舞うのかということと認識しました。
ということで、実際にJavaScriptで「ソフトバンクホークス」というオブジェクトを作成した後、現在のピッチャーを表示するメソッドを作成して、データの出し入れ(選手交代)をやってみたいと思います。
softbankHawksというオブジェクトが作成されました。
そして、現在のpitcherを表示した後、'千賀'から'東浜'に変えたいと思います。
現在のピッチャーが表示されました。
そして、pitcherを東浜に変えます。
できました！
千賀から東浜なんて豪華リレーですね！
実際にJavaScript(プログラミング)に触れてみて
楽しかった！(小並感
だけだとさすがにあれなので、本当に率直に思った感想を以下に書いていきます。
この記事上には現れていませんが、思った通りの動きを出すために何度も何度もエラーが出たりで試行錯誤して、この記事の作成時間(約10時間ほど)以上に格闘していました…。
本当にプログラマーの方には頭が上がりません。
でもやっとこさ自分で思い描いた動きを実現できたときはとても嬉しい！
今回触れたのはJavaScriptというWebページに動きをつけるという用途の言語でしたが、まだまだ初歩的なことしかやっていないのに加えて、そもそもの土台としてHTMLやCSSがあって…
と考えると本当にひとつのWebページを作成するのは簡単じゃないなと痛感しました。
また、現在の業務としては「こういう風に動かしてほしい」「こういう風に変えてほしい」と実際にユーザが目に見える部分の修正や改善依頼を行っている私ですが、今後も勉強を継続して知識をつけていき、こういった実際には目に見えない部分に関してもベンダーと話し合えるようになったら、よりスムースに業務を進めていけるんじゃないかと感じました。
※【はじめに】部分でも記載させていただいた今回の目的です。
末筆になりますが、このような1個人の趣味程度な記事にお付き合いいただき誠にありがとうございました。