事始め
フロントエンドを極めたい。 いや、極めたいわけではない。しかし、不自由なく自分のシステムをユーザが使いやすい形に落とし込めるようにはなりたい。それも、そこそこきれいな感じに、バックエンドがどん何すごいことをしていてもユーザが結局使うのはフロントエンドなわけで。。。見せ方がへたくそだから評価が下がるのだけはまっぴらごめんだ。 ってことで買ったのがこの「フロントエンドの知識地図」ってほんなわけですね。はい。まあ、html,css,javascriptの基本的なところはそこそこわかっているんだけれども、一度体系的に学びたいなとね。
とりあえず一回読んだ後の感想
前半はhtmlとcssのグリッドレイアウト以外はためにならない話ばかりだった。 しかし、後半から面白くなっていった。付箋を貼った個所をとりあえず殴り書きさせてくれ。
まずはグリッドレイアウトの話のところだよね。htmlとcssを使って、どの要素をどこに配置するかっていうのが決められるという話だ。これは大事だと思う。
あー、vscodeがwebブラウザ技術を多分に含んでいる、それすなわちwebブラウザが多分にvscodeに技術を含んでいるってことで、githubでvscodeそっくりなテキストエディタが使えるよって話。
はいはい、webのフロントエンドはフレームワークが多すぎてね、何が何かわからないじゃない。で、純粋なjsのことをvanila jsっていうみたいです。
MDNっていうのがhtml + css + jsを用いた開発の辞書みたいなもんやと
vanilaで開発しても結局モジュールごとにファイルを分けないと可読性が下がる。だったら、もうReactを使っていいんじゃねーのか、とも思ってきたわけです。
といっても、Jsのフレームワークはあくまでも処理部分をやってくれるフレームワーク。装飾はやってくれない。だから、cssの知識は必要。だけど、タグ内にクラス名を指定するだけで統一感を持たせてくれるのがBootstrapってわけですね。BootStrapは使い方だけは知っておこうよ
フロントエンドの知識地図だけど、やっぱりapiのことは説明してたよね。REST,Graphql,RPC全般。まあ、しばらくはRESTでいいよ。簡単だし、なれたし。イケてるIT系のバックエンドではRPCが使われているらしいけどね。
フロントエンドからRESTを使ってバックエンドと通信するときの関数として、fetch APIと、axiosが紹介されています。fetchはブラウザに標準でついている。が、通信機能しか備えていなくて使いづらいのでaxiosの方がいいんじゃね？って言ってます。
CORSについてもちゃんと説明していますね。原則としてwebサイトやwebアプリケーションから、ほかのサーバにあるAPIは読み出せないようになっています。なぜか？これができると、例えば悪意のあるjsスクリプトを入れてamazonの個人情報をゲットしちゃおー！とかができるからですね。でも、corsができないと不便なこともあるよね。その時は、WEBサイトではなく、APIサーバ側 (上の例でいうとamazon側) でcors okをする。 でも思ったんだけど、originがどこかってブラウザが知ってるわけじゃん？つまり、ブラウザをハックすればcorsもできるようになるって話や。
シングルページアプリケーションとマルチページアプリケーションについても説明しています。ページというのはhtmlファイル一つのことですね。で、spaはhtmlファイル一つで完結しているらしいです。 reactはspaに分類される。だけど、reactでも複数のページを作りたいことあるじゃないですか？そんな時にReactのルーティング機能を使うらしいです。
ここから先がかなりテンションが上がる内容だった。
WEBGLの話。むかしから、webブラウザなのにめちゃめちゃきれいなグラフィック出すページあるなーって思ってたんですよ。でもね、それ、WebGLのおかげだったってことなんだよね。WebGLはjavascriptからGPUを使うためのAPIなんですよね。ちなみに,webGLはopenGLから派生しています。openGLを触ったことがある身からすると、また世界がつながってしまったなという感じなんですけどね。巨人の肩の上に乗らせていただいているんですね。ありがとうございます。 使い方は簡単。canvas.getContext(‘webgl’)ってやるだけです。マジで簡単です。2dの時は、canvs.getContext(‘canvas2d’)ってやるんでしたよね。そうなんです、こうやるんですね。ただ、生のwebglはcudaとかと直接つながっているでしょうから、そのまま使うのは大変ですね。そこで、webglをラッピングしたthree.jsを使うって話です。まあ、ブラウザでも本格的なゲームが作れるって話だな。まあ、作るのはそんなに簡単ではないと思いますが。そのうちくそげーセンターってのを作りたいね。あー、しんいちろうにそういうのを見せて、作らせればいいんだな。それがいいかもしれない。
figmaっていうwebアプリが、デザイナーとフロントエンドエンジニアをつなぐ架け橋みたいなものになっているという話だ。まあ、これは便利だと思う。
その他、すごいフロントエンドエンジニアが作ったサイトの一覧があるサイトがあるので確認してみて。
chromeのdevelopper toolにLighthouseってのがあってだな。これでサイトを点数化してくれるらしい。SEOの観点からもいろいろと出してくれる。まあ、デプロイ前にはこれで点数を出してもらうのがいいと思う。ロード時間とかも考慮して点数化してるみたいだからね。
テストは大事です。ユニットテストしましょう。
コードはきれいに書きましょう。1機能1ファイルがいいみたいですよ。
CI/CDはDevOpsを志すものならできるようになってくれ、っていう話だ。jenkinsってのを使うみたいだ。確かにCI/CDのパイプラインを作るのに工数を割く必要はある。しかしだ、それ以上の効果があるって話だ。
Node.js + chrome専用のWebブラウザマニピュレーションツールがあるって話だ。seleniumみたいなもんだ。Puppeteerってやつだ。googleが開発してて、chrome専用だから、パフォーマンスはseleniumよりも高いぞ、って話だ。
詳細
めんどいのでかっと。
感想
まあ、知識地図って名前だけあって、浅かったが、新たな領域があることを知れたので買ってよかった。なかなかの良書や。モチベが上がった。