読者です 読者をやめる 読者になる 読者になる

じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

Node.jsさわってみた! | JavaScript 17/100

最近、勉強会を開いていまして、今後イベント開催が増えてきそうなので、スライドの使い方を勉強したいとおもいまして
今日からちょくちょくスライドで発表みたいなこともしていきたいと思います!

今回は簡単にNode.jsについて触れてみたので、ご査収ください:D



ちなみに勉強会のURLも貼っておきます!w
お時間ある方はぜひよろしくお願いいたします。

connpass.com

跳ね返りを考慮したボールをRefreshしない | 16/100 JavaScript Challenge

See the Pen js 16/100 by zyory (@zyoryzyory) on CodePen.

インタラクションなtoDoList | 16/100 JavaScriptチャレンジ

See the Pen js 15/100 by zyory (@zyoryzyory) on CodePen.

CanvasAPIを使って粒子を拡散させる。 | JS 15/100

CanvasというHTMLのライブラリを使って粒子がレフレクトするのを実装しました。
いままでHTMLに直接要素を書き込んで、Viewに反映させていたので、APIを使って描写するということがいかに優れているかわかりました!
今度はCanvasを使って、ホタルの墓を実装していきたいとおもいます。

See the Pen js 15/100 by zyory (@zyoryzyory) on CodePen.

ModalWindow by JavaScript | JS 14/100

さて、prototypeやobserverの考え方を取り入れたモーダルウインドウのコードを勉強しました。
どこまでprototypeで疎結合なコードにするかや、observerで他のコードにより上書きされない仕組みを作るかなど、自分にとってはかなり複雑なコードに見えます。
jsのコード中盤で

(data-index + 増減値 + それらの総数) % それらの総数

というコードがありますが、この記述をすることによって、prev or nextボタンを押すと、カウンタが動くという仕組みになっています。


また、$containerを表示している際に、$overlayを後ろ側に差し入れることで

Modal.prototype.hide = function(e) {
this.$container.fadeOut();
this.$overlay.fadeOut();
};

黒幕(overlay)をクリックしたときでもfadeOutが動くようになっているので、これはよいなとおもいました。
prototypeで機能を切り出す感覚が身についてきたので、そろそろチュートリアルサイトを卒業できるのかな・・・、と淡い期待を抱いて精進していきたいと思います。

こういうコードを実装していくと、まったく自分では思いつかない発想ばかりなので、いろいろな人のコード・書籍で勉強する必要があると感じました。

今回のような記述を省略できる、モーダルウインドウなどのライブラリ、おそるべし。


See the Pen js 14/100 by zyory (@zyoryzyory) on CodePen.