こんにちは、とよへいです。
最近はrailsを書いたり、ちょろっとJSを書いたりしているエンジニアです。
この記事は、技術的ポエム Advent Calendar 2018 18日目の記事です。
少し前までフロントエンドが嫌いだった私が、なぜフロントエンド嫌いを克服できたのかって話をしようと思います。
※ 注意: この記事は、事実ではなく解釈に基づいて書かれています。
なぜフロントエンドが嫌いだったのか
簡単に言うとなんかよくわからなかった。詳しく言うと、次のような感じでした。
何がわからなかったのか
- HTMLよくわからん
- HTMLってそもそも何なの？何のためにあるの？
- ブラウザよくわからん
- ネットサーフィンする時に使う便利な道具だけど、ブラウザってそもそも一体何なの？
- JavaScriptを使うことで、ブラウザに表示しているものが操作できる原理がわからん
- JavaScript、お前は一体何者だ
その結果、自分にとってフロントエンドの世界は、
- 論理的じゃなく丸暗記の世界でつまらない
- 丸暗記とかはそれが好きな人達が頑張ってくれ！俺は論理的なサーバーサイドの世界で頑張るから！
と言う感じになってました。(フロントエンドエンジニアの皆様本当にごめんなさい)
そんな感じでずっと忌避していたフロントエンドだったのですが、仕事で使う必要が出てきたので、どうにかフロントエンド嫌いを克服することに。
解決した方法
解決した方法はシンプルで、わからないものを一つずつ理解していくことでした。
自分がわからなかったのは
- HTMLとは何か
- ブラウザとは何か
- JavaScriptを使うことで、ブラウザに表示しているものが操作できるのはなぜか
と言うことだったので、一つずつ調べていくことにしました。
そもそもHTMLとは何か
- Hyper Text Markup Language の略称で、インターネットを通じて文書共有をする際に、使用するフォーマット。
- メモ帳とかで作成するプレーンテキストだと、リンクとかが実現できないから作られた。
- もっと別の方法で文書構造を綺麗に表現することはできないのかって思うけど、今尚デファクトとなっているので、色々考えてもこうするのがいいのだろう。
そもそもブラウザとは何か
- HTMLで作成されたドキュメントを、人間にとって見やすいように綺麗に整形して表示するGUIソフトウェア。
- マウスのクリック操作などを感知することができる。
- 感知した操作を元に、サーバーに対してリクエストを送ったり、レスポンスを受け取ったりできる。
- ブラウザに搭載されているレンダリングエンジンが、htmlやcssの構文解析を頑張って我々のPC画面などに描画している。
JavaScriptを使うことで、ブラウザに表示しているものが操作できるのはなぜか
- JavaScriptでブラウザの表示を操作できるように、ブラウザが実装されているから(元も子もない言い方になるが)。
- 具体的には、DOMを実装しているから。
DOMとは何か
- 仕様の名前。正式にはDocument Object Modelという。
- HTMLをJSとかで、こうやっていじれるようにしたいから、ブラウザを作るお前らは、これができるように作れよ！！(JSとかのこう書いた時に、こういう値を返すように作れよ！)って書いてる。
- 具体的に言うと、例えば次のようなコードで、
hogeと言うIDを持つ要素を取得できる。これはdocument.getElementById()と言うJavaScriptでhogeが取得できるように、ブラウザが実装されているから。
var hoge = document.getElementById('hoge');
- そこら辺の仕様については、W3Cと言う団体が仕様書を作成していて、その仕様書を元にChromeやFirefoxなどの各ブラウザは実装されている。
結局フロントエンド技術とは何か
- ブラウザで遊ぶ技術、もとい、ブラウザで表示するHTMLを操作したりする技術。操作にはJSとかを使う。
- (今のフロントエンド技術はもっと広範囲を指すものだと思うけれど、初歩的なものとしての理解を書いています。)
まとめ
個人的には、ここら辺まで理解できたところで、フロントエンド嫌いは結構克服されていました。
根本的には、わからないものをある程度ちゃんと理解したら怖くないよ！って話だと思います。
過去の自分と同じく、フロントエンドなんて嫌い！って方の、理解の助けになれば嬉しいです。
余談
ちなみにフロントエンドについて調べていて一番大変だったのは、DOMのことを理解する部分で、そこらへんの調査の軌跡は、以前の記事で雑にまとめてみています。
フロントエンド初心者がW3C勧告に出会うまで
終わり。