JavaScript

【ドットインストール】JavaScriptでおみくじを作ろうを受講した感想

JavaScriptでおみくじを作ろうの受講が完了しました。

学習内容

「JavaScriptでおみくじを作ろう」は無料会員でも全ての動画閲覧できるレッスンとなっています。

内容としてはボタンを一つ準備し、そのボタンをおす度におみくじの結果(大吉・凶など)が表示されるというもの。

これを9本の動画(約3分×9=27分)で作り上げることになります。

僕は動画を見ながら進めるのではなく最初の完成イメージを見て、最初は自分で作成して動画で答え合わせを行うという形式で進めました。

つまずいたポイントなど

JavaScriptというよりCSSでつまずきました。

マウスクリック時に押された感を出す

JavaScriptでなんとかしようと思ってましたが、普通にCSSでいけるんでしたね。

最初に自分がやってたのはJavaScriptのクリックイベントでY方向に10px下げたあとに10px上げるってことで実現できないかなぁと思ってやってました。

こんな感じですね。

ちなみにこれだと元の位置から10px下に移動したあとに、元の位置から上に移動するので結果的に上に移動してしまいます・・・。

しかも早すぎて下に移動したのは確認できないというね。

間にスリープかまして・・・とかも考えましたがスリープさせるのも1行じゃ無理っぽいのと根本的に間違えていると思って動画でこたえ合わせしました。

結果的にはCSSで該当要素が「active」になった時のスタイルを付ければ解決でした。

最初そうかなと思ったんですが、ずっと「click」って書いてたんでうまく行ってなかっただけというね。

マウスカーソルをあてた時にマウスポインタを指に変換する【 cursor: pointer;】

リンクにマウスカーソルを当てるとマウスポインタが指に変わって「クリックできますよ」ってアピールしてくるあれです。

リンク要素(aタグ)であれば勝手にそうなりますが、それ以外だとCSSに以下を追加することで実現できます。

またcursorプロパティの値は他にもたくさんあります。
http://www.htmq.com/style/cursor.shtml

要素内のテキストを選択させないようにする【user-select: none;】

要素内のテキストをドラッグすると選択した状態になると思いますが、それを無効化するCSSのプロパティが存在します。

user-selectプロパティの値には他にもあるのでチェックしておきます
https://developer.mozilla.org/ja/docs/Web/CSS/user-select

基本は初期値(auto)のままか選択不可のnoneにするかというところでしょうかね。

感想

先にも書いたとおり動画通りに進めるんどえはなく、まずは自分で考えて実装してみて動画で答え合わせという進め方を取りました。

基礎構文を学習したばかりというだけあって、JavaScriptのおみくじ判定箇所は特に苦労なく進めれましたが、CSSがまだまだですね。

といってもJavaScriptでミニアプリを作ろうシリーズでは一番簡単なものだと思うので、他のものにもチャレンジ(まずは自分で作ってみる)してみてJavaScriptとHTML、CSSの実践力をもっとつけていけるようにしていきます。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す