はじめに
初心者が学びの内容を言語化することで、その日に得た知識やスキルを深化させることを目的としている記事です。
現在の学習状況
完全未経験者がプログラミングの勉強を始めて66日が経過しました。
この2ヶ月の学習状況は以下の通りです。
・Progate(有料版)→HTML/CSS, JavaScript, jQuery, Ruby, Ruby on Rails
・ドットインストール(無料版)→HTML/CSS, JavaScript, jQuery
・JavaScript教材（確かな力が身につくJavaScript「超」入門 ）→6章まで済み
・ポートフォリオ制作→スパイスカレー屋さんの検索・情報共有用のSNSを制作中
実施内容・結果
- ☆マークが何個か並んでる時に、X個目の☆を1回クリックしたら左からX番目まで黒塗りされるという機能を実装（カレー屋さんの評価用とかに使用予定）
- また、もう1回クリックしたら黒塗りが解除される機能も実装
See the Pen VEJGZr by Masashi Fukuzawa (@fuku_tech) on CodePen.
所感
- 力技感が半端ない、絶対にもっと綺麗に記述できる方法があるはず。
- ☆の数が増えた時などを想定すると大変になるためもっと一般化して記述すべき。
- 今後学習を進め、より綺麗なコードで記述できる表現を見つけ次第、適宜更新していきたい。
- 全然最適解ではないと思うが、自分で考えながら実装できたという点で前進した。
まとめ
- jQueryを用いて☆マークの黒塗り機能を実装した。
- 現時点では力技感満載なので適宜知識と技術を更新していきたい。
追記・更新
①@hogefugaさんからご提案いただいたコード
・咀嚼するためにポイント箇所にコメントを記入
See the Pen 20181031 for Qiita コメント反映後 by Masashi Fukuzawa (@fuku_tech) on CodePen.
（メモ）知識補完のために参考にしたURL
--------------------------------------------------------------------------
・join()メソッドについて
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
・match()メソッドについて
https://www.sejuku.net/blog/25583
・文字列を数値に変換する方法について
https://lealog.hateblo.jp/entry/2013/02/28/005010
https://uxmilk.jp/11582
・正規表現について
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
https://www.webprofessional.jp/expressions-javascript/
https://www.mnet.ne.jp/~nakama/
・変数var, letと定数constの使い分けについて
https://sbfl.net/blog/2016/07/14/javascript-var-let-const/
--------------------------------------------------------------------------
②@htsignさんからご提案いただいたコード
・知らない＆曖昧な知識や表現を調査、補完
（メモ）知識補完のために参考にしたURL
--------------------------------------------------------------------------
・:rootについて
https://developer.mozilla.org/ja/docs/Web/CSS/:root
・疑似要素について
https://saruwakakun.com/html-css/basic/before-after
・CSSでFont Awesomeのアイコンを表示する方法について
https://tech.jastin.net/how-to-display-font-awesome-only-css/
・font-weightでSolid, Regular or Brands, Lightを切り替え
https://qiita.com/Garyuten/items/6d68da5cdac6dab9ba26
・:checkedについて
https://developer.mozilla.org/ja/docs/Web/CSS/:checked
・$(document.body)ついて
https://ginpen.com/2013/12/03/find-elements-without-finding/
・jQuery、フィルターを使った要素の指定方法
http://www.hp-stylelink.com/news/2013/11/20131122.php
・prop()メソッドについて
http://js.studio-kingdom.com/jquery/attributes/prop
--------------------------------------------------------------------------