DOMのお話
What is DOM？
そろそろJavaScriptを本格的に学ぼうと思い、Reactについて学習していたらDOM
というワードがなんども出てきて、見過ごすとこができないと感じたので、DOMについての記事を読んでわかったことをまとめていきたいと思います。
DOMとは
「Document Object Model」の略で、直訳すると「ドキュメントを物として扱うモデル」です。これはHTMLやXMLを扱うための仕組みのことです。
主に以下の３つの特徴を持っています
①ツリー構造と呼ばれる階層構造をとる
②それぞれノードという言葉で説明される
③WebページとJavaScriptなどのプログラミング言語とをつなぐ←Reactを利用する時に必ず必要な知識
①階層構造をとる
HTMLは<body>の下に<section>の下に<p>などといった階層構造を構築することができる。この階層構造を定義しているものこそがDOMと呼ばれる仕組みになる。
②ノードという単語を用いて表現される
https://eng-entrance.com/wp-content/uploads/2016/07/図3-768x864.png
上の図にあるように、ノードとは各要素(HTMLではエレメントやタグ)自体のことを表す。特定のノードを基準とした時に、その上にあるノードを「親:parent」ノードと表現し、その下にあるノードを「子:child,children」ノードと表現する。
また同一階層にあるノードのことを「兄弟姉妹:sibling」ノードと表現する。
例えば、「そのタグの子ノード全体を所得して、その親ノードから削除する」のような使い方をする。
③Webページとプログラミング言語をつなぐ役割を持つ
(1)ID名からノードを所得して、操作する
ID名とはタグにつける一位の名前のことである。CSSを勉強した時や、JavaScriptの基本を学習した時に出てくる。
ID名を指定するメソッドは以下のように定義される
document.getElementById(id);
例としては document.getElementId('section-2').style.color = 'red'
とすると、section2のidの配下のの文字色は赤色になる。
(2)子ノードを所得して、操作する
子ノードを指定するメソッドは以下のように定義される
var nodeList = elementNodeReference.childNodes;
-elementNodeReferenceは基準ノードを指している
-nodeListは基準ノードについている子ノードを全てさす
例としては「section-2」の子ノードのうち2番目の子ノードの文字列を変更してみると、
var baseElement = document.getElementByID('section-2');
var section2node2 = baseElement.childNodes[5];
section2node2.innerHTML = '子ノード2は変更されたよ';
こうすると、セクション2の子ノード2の文字列が変更されているのが確認できる。
⚠︎baseElement.childNodes[5];は2番目のノードを所得したいはずなのになぜ[5]なのか？
ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、不思議な配列の添字担っているように見える。
例えば、Chromeブラウザで1番目のノードを所得したい場合は添字が「3」になる。
(3)親ノードを所得して、操作する
親ノードを指定するメソッドは以下のように定義される。
var parentNode = elementNodeReference.par4entNode
-elementNodeReference 基準ノード
-parentNode 基準ノードの親ノード
例としては、「section-2」の親ノードを所得して、その親ノードの子ノード(つまりsection-2)全てを削除してみる。
var baseElement = document.getElementById('section-2');
var parentNode = baseElement.parentNode;
parentNode.removeChiuld(baseElement);
以上のように記述するとセクション2が全て消える。
以上のようにDOMで定義されている「ノード」などの仕様などを通じてJavaScriptからHTMLを操作することができることを確認できた。
これが「DOM」が「WebページであるところのHTML」と「プログラミング言語であるところのJavaScript」をつなぐ役目を持つということ。
以下のサイトをめちゃめちゃ参考にしました。
Railsにredisを使ってPVランキングを実装した話
Redis周りのエラーは検索しても僕的には読みずらいので後世に残すために書いたよ
-やろうとしたことは、PV数ランキング順に並び替えて、PV数とそのタイトルを(上位２件)表示するというものです。
とりあえず、redisとはなんぞやと思ったので、ドットインストールでredisの映像を一通り見ましたが、PV数ランキング実装とは程遠いものに感じました。(基礎的なことは載っているのですが、俺が知りたいのはそんなことじゃない！irairaって感じでしたね)
もっとわかりやすいのはないのか！と思って検索に検索に検索をかけたところ、ありました。それは"公式ドキュメント"です。時間はかかりますが、めちゃめちゃわかりやすかった気がします。
よし、これで実装できると思い、学校にいる間ずっと頭の中で実装のイメージをしていました。
練りに練った実装アイディアを記述したところ、なんとエラー。。。。
実装した内容としては、githubを見ていただければわかると思うのですが、
↑githubURL
posts_controller.rb
のshowアクションにshowアクションにアクセスされるたびに、REDIS.zincrby を利用して、1追加していきます。
また、set_ranking_dataというメソッドを追加します。中身の処理としては、上位二件のランキングデータを所得して、そのidを@ranking_postsというインスタンス変数に渡します。
次に、表示したいページのビューをいじります。
index.html.erb
<% @ranking_posts.each do |post| %>
<p><%= link_to post.title, post_path(post.id) %></p>
<span><%= REDIS.zscore("posts/daily/#{Date.today.to_s}",post.id) %>PV</span>
<% end %>
以上のコードを記述してやれば終わりです。
ここで、zsoreの括弧の中のパスが事故っていたので、謎のコンパイルエラーが出ていました。
参考にして、非常にわかりやすいと思ったサイトは
このサイトなので、ぜひ参考にしてください。
とりあえず、ご飯を食べてきたいと思います。おわり
適当に扱ってたbundleが重要だった話
これは自分用のメモです
今まではbundleはgemのことを何かやってくれているのだな〜ぐらいにしか考えていなかった。
gem install bundler
これはbundlerをインストールするためのコマンドです。
ではbundlerとは？
bundlerとは、プロジェク内で使うGemのパッケージ管理ツールです。
bundlerを利用することによって、アプリケーション単位でgemを管理できるのです。
似たようなものとしては、rbenvです。
rbenvはプロジェクトごとにRubyのバージョンを管理します。また、Ruby自体のバージョンは、プロジェクト毎にrbenvで管理します。
rbenvと同じで
bundlerもプロジェクト毎にGemを管理して、gemのバージョンは、プロジェクト毎にBundlerで管理する。
bundlerでできることは？
上記で示したこと以外にも重要なこととして、Bundlerを利用することで、アプリケーション単位でgemを管理できる。即ち、システム側にはgemはインストールせずに、アプリケーションディレクトリにインストールできるということです。システムに依存しないため、アプリケーション内でのgemのバージョンの整合性の問題はなくなる。
適当に扱ってたbundleが重要だった話
これは自分用のメモです
今まではbundleはgemのことを何かやってくれているのだな〜ぐらいにしか考えていなかった。
gem install bundler
これはbundlerをインストールするためのコマンドです。
ではbundlerとは？
bundlerとは、プロジェク内で使うGemのパッケージ管理ツールです。
bundlerを利用することによって、アプリケーション単位でgemを管理できるのです。
似たようなものとしては、rbenvです。
rbenvはプロジェクトごとにRubyのバージョンを管理します。また、Ruby自体のバージョンは、プロジェクト毎にrbenvで管理します。
rbenvと同じで
bundlerもプロジェクト毎にGemを管理して、gemのバージョンは、プロジェクト毎にBundlerで管理する。
bundlerでできることは？
上記で示したこと以外にも重要なこととして、Bundlerを利用することで、アプリケーション単位でgemを管理できる。即ち、システム側にはgemはインストールせずに、アプリケーションディレクトリにインストールできるということです。システムに依存しないため、アプリケーション内でのgemのバージョンの整合性の問題はなくなる。
git push heroku masterができた話
ようやくherokuとお友達になれました
多分普通にQiita等々で上がっている通りにやれば
git push heroku master
と打ってやれば、herokuにpushできるはずですが、僕が出たエラーとしては、
remote: !
remote: ! An error occurred while installing ruby-2.3.1
remote: !
remote: ! This version of Ruby is not available on Heroku-18. The minimum supported version
remote: ! of Ruby on the Heroku-18 stack can found at:
remote: !
remote: ! https://devcenter.heroku.com/articles/ruby-support#supported-runtimes
remote: !
これです。
エラーを読むと、herokuさんでサポートしているrubyの最小のversionよりも開発環境で使用している、rubyのバージョンが小さいと怒られています。
つまり、rubyのバージョンを挙げてやればいいのです。
現在のrubyのバージョンを調べてやる(ruby -v)と、なんと、2.3.1。。。これは驚愕です。。。herokuさんの公式ドキュメントによるとrubyのバージョンは最低でも2.4.5は必要らしいので、そりゃエラーが出ますよね。
ここでrubyをどこで何で管理していたのかを完全に忘れてしまったので、調べます(which ruby)。
~/.rbenv/shims/ruby
が返ってきて、rbenv(アールビーエンブ)で管理しているということがわかります。 (勝手にrvmで管理していると思ってた。。。)
次に、rbenvでインストールすることがでrubyのバージョンを調べます(rbenv install -l)。
すると大量のAvailable versionが表示されます。ここでrbenv install 2.5.0を叩いてやると、なぜかalertされたので、2.5.3を叩き直すと、無事2.5.3バージョンのrubyがインストールされました。
今の段階で、rbenvの管理下には2.3.1と2.5.3のrubyがあり、2.3.1を利用するという設定になっているので、2.5.3に切り替えてやります(rbenv local 2.5.3)。
ここでrailsのファイルの中にある、gemファイルの中の、rubyのバージョン指定も2.3.0から2.5.3に書き換えてやります。
それからbundle installをしてやればokと思いきや
`find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundle (Gem::GemNotFoundException)
というエラーが出ました。
これはbundler周りなので、一旦gem uninstall bundlerを叩いてやり、
Gem 'bundler' is not installed
が返ってきたので、
gem install bundler -v 1.17.3(現段階で2.0...をのぞいて最新のもの)を叩いてやりました。
これでもう一度bundle installを叩いてやればokです。
git commit -m " "を叩いて、
git push heroku masterしてやればできました。
ちなみに、git push heroku masterした後に、heroku上で動かすためには、heroku上のデータベースもマイグレイトしてやる必要があるので、
heroku run rails db:migrate を叩いてやりましょう
シェルスクリプトを初めて作成した話
面倒なことは自動化
railsの環境構築をドットインストール中心に行ったので、
開発環境としてはvagrantを立ち上げてCentOSの上で動いています。
全然悪いことではないのですが、いちいちvagrantにログインしなくてはいけなく、いつも
cd
cd MyVagrant
cd MyCentOS
vagrant up
のコマンドを打ち込まなくてはいけなく、非常に煩わしいです。
面倒なことは自動化するのが世の常です。
それゆえシェルスクリプトを作成してやろうと思い、作成しました。
やったことは簡単です。
ファイル名.sh という名前のシェルスクリプトを作成します。
中身は、
#!/bin/sh
cd
cd MyVagrant
cd MyCentOS
vagrant up
こんな感じです。
ポイントとしては、１行目と最後に改行を追加するぐらいですかね。
これをホームディレクトリの配下におく。
その後に、権限の設定を行わないといけないので、
chmod 755 ファイル名.sh
を実行。
（なぜテキストファイルに実行権限を持たせるかというと、、、
シェルはインタプリタであるからです。実行権限を与えてシェルに伝えると、スクリプトとして実行される。）
これで実行したいときに、
./ファイル名.sh
を実行するだけで簡単に実行できるのです。
以上です。
