さて、丸腰の状態でWeb業界に入って1ヶ月ぐらいたった僕ですが、自分の中のイメージが
入る前よりさらに様々と混沌としてきているような気がします。
この世界では覚えることが沢山あるように思えてしまうけれど、大正解というわけでもなさそうで
とにかく情報が氾濫している故に、自分にとって(そのフェーズで)適切なものを選びとることが
大切かなと思っております。仮にどれだけ僕が凄い能力を持っていようと、何でもかんでも詰め込むとパンクするのは
想像に難くないので
・頑張って覚えておくべきこと
・最低限の容量のキーで様々な情報を引き出せるようにしておくこと
この2つに分けて自身のストレージを管理していきましょう。
本題はどちらかというと後者よりの内容です。
HTML、CSS、JavaScriptに関して最低の最低限ぐらいの基礎は出来てきたかと実感する場面があったので
ここで1度流行りの、クライアントサイドで活躍するJavaScriptのフレームワークにも少し触れてみようと
思い立ちました。
有名なところだとReact、Angular、Vueの3つが人気なようです。
僕は一目見てVue.jsから触れてみようと感じましたがその理由というのも
・ロゴがなんかイケてる、目に優しい
・初学者にも優しい
とかそんな印象を受けたからです。僕は優しい人が好きだし、見た目って大事ですよね。
じゃあ、そのVue.jsって実際何をどうしてくれるのってところにさっさとフォーカスしようと
インターネットの海を彷徨いました。
「初心者向け」のようなトピックにいくつか目を通してみましたが、正直よく分かんなかったです。
これは僕のスキルと、トピックが対象としている読者のスキルとで発生したズレによるもんかな〜ぐらいで
流しておきます。Vue.jsは皆、口を揃えて「公式ドキュメントが充実している」と仰るので訪れてみたら、
海外発の技術とは思えないぐらい日本語ドキュメントが充実していて、初学者をサポートしますよって
姿勢が感じられました。
ではここで、実際に適当な処理をVueで書き換えてみるのが手っ取り早く理解できるはずなので書いてみましょう。
テキストフォームの入力をリアルタイムに取得して、その上に書き換えたものを表示するという内容です。
(codepen上だとJavaScriptのロード後処理がうまくいってないようです)
See the Pen vue.js test01 by hajime (@hajimesan) on CodePen.
なるほど、JavaScriptだと画面をロードした時の処理と、ユーザー入力に対して監視する処理をしなければなりませんが
Vue.jsではそういった類のDOM操作をする必要はなく、ユーザーインターフェイスの実装に
専念することができるということでしょうか。(あってるかな)
これを「双方向データバインディング」というのだそうです。ちなみに僕は仮想DOMというワードが出てきた時点で
頭を抱えました。
ざっとこんな感じで僕のJavaScriptフレームワークへの第一歩となりました。
確かに素晴らしい技術ですが、自分はまだまだ基礎力が不足しているなと感じる面もたくさん。
こういうフレームワーク類は流行り廃りがあるようなので、可能な限り学習コストは低い方が
皆幸せになれると思います。技術を採用したはいいけれど、その場で開発に携わった人だけが
理解できるものってのはどの世界でもご勘弁願いたいところでしょう。
初の技術、いや備忘録投稿になりましたがいかがでしょうか。
初学者なので、という接頭辞を付けるのはあまり気が進まないですが何分経験が圧倒的に不足しているものでして
そのコードダサいぜ、イケてないぜってのが見受けられましたらガンガン指摘してくださると嬉しいです。
そのためにこうやって書いているところがあるので。(qiitaとかでやらんかい、というのはごもっともでございます)
以下、参考にしたリンク
jQuery から Vue.js へのステップアップ
https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f