JavaScriptでおみくじを作ろうの受講が完了しました。
#ドットインストール
「JavaScriptでおみくじを作ろう」完了。まずは自分で作ってみて、動画で答え合わせする感じでやってみたけどだいたい行けてた。
今のところJavaScriptよりCSSのほうが自分にとってハードルが高い。#プログラミング学習 #駆け出しエンジニアと繋がりたい— じゅに💻脱サラに命かける人 (@Jyu210) December 26, 2019
目次
学習内容
「JavaScriptでおみくじを作ろう」は無料会員でも全ての動画閲覧できるレッスンとなっています。
内容としてはボタンを一つ準備し、そのボタンをおす度におみくじの結果（大吉・凶など）が表示されるというもの。
これを9本の動画（約3分×9=27分)で作り上げることになります。
僕は動画を見ながら進めるのではなく最初の完成イメージを見て、最初は自分で作成して動画で答え合わせを行うという形式で進めました。
つまずいたポイントなど
JavaScriptというよりCSSでつまずきました。
マウスクリック時に押された感を出す
JavaScriptでなんとかしようと思ってましたが、普通にCSSでいけるんでしたね。
最初に自分がやってたのはJavaScriptのクリックイベントでY方向に10px下げたあとに10px上げるってことで実現できないかなぁと思ってやってました。
こんな感じですね。
|
1 2 3 |
変数.style.transform('translateY(10px)'); 変数.style.transform('translateY(-10px)'); |
ちなみにこれだと元の位置から10px下に移動したあとに、元の位置から上に移動するので結果的に上に移動してしまいます・・・。
しかも早すぎて下に移動したのは確認できないというね。
間にスリープかまして・・・とかも考えましたがスリープさせるのも1行じゃ無理っぽいのと根本的に間違えていると思って動画でこたえ合わせしました。
結果的にはCSSで該当要素が「active」になった時のスタイルを付ければ解決でした。
最初そうかなと思ったんですが、ずっと「click」って書いてたんでうまく行ってなかっただけというね。
マウスカーソルをあてた時にマウスポインタを指に変換する【 cursor: pointer;】
リンクにマウスカーソルを当てるとマウスポインタが指に変わって「クリックできますよ」ってアピールしてくるあれです。
リンク要素（aタグ）であれば勝手にそうなりますが、それ以外だとCSSに以下を追加することで実現できます。
|
1 |
cursor: pointer; |
またcursorプロパティの値は他にもたくさんあります。
http://www.htmq.com/style/cursor.shtml
要素内のテキストを選択させないようにする【user-select: none;】
要素内のテキストをドラッグすると選択した状態になると思いますが、それを無効化するCSSのプロパティが存在します。
|
1 |
user-select: none; |
user-selectプロパティの値には他にもあるのでチェックしておきます
https://developer.mozilla.org/ja/docs/Web/CSS/user-select
基本は初期値（auto）のままか選択不可のnoneにするかというところでしょうかね。
感想
先にも書いたとおり動画通りに進めるんどえはなく、まずは自分で考えて実装してみて動画で答え合わせという進め方を取りました。
基礎構文を学習したばかりというだけあって、JavaScriptのおみくじ判定箇所は特に苦労なく進めれましたが、CSSがまだまだですね。
といってもJavaScriptでミニアプリを作ろうシリーズでは一番簡単なものだと思うので、他のものにもチャレンジ（まずは自分で作ってみる）してみてJavaScriptとHTML、CSSの実践力をもっとつけていけるようにしていきます。
