Rollup で axios をブラウザ用にバンドルする方法。
タグ: JavaScript

Rollup の使い方
webpack の影に隠れがちな Rollup について調べてみました。

CommonJS のモジュールシステムをおさらい
JavaScript でモジュールを使う時なんかによくでてくる CommonJS ですが、今までなんとなくでやり過ごして来ていたので改めておさらいしてみました。

husky + lint-staged で品質を保つ
リントツールをインストールしても使わなければ意味がない。
というわけで人的なリント忘れを未然に防ぐためにも、huskey と lint-staged と 各種リントツールを組み合わせてコミット前に自動的にリントが行われる環境を作りましょう。リントエラー時にコミットを弾くことによって git 上のコードの品質を保つことができます。

defer と async を使ってサイト高速化
<script>
タグには defer
または async
属性を指定できます。この2つは挙動が異なるため、うまく使い分けてサイトの表示を高速化しましょう。

Babel7 がやってきた
2018年8月27日、Babel6 から2年の時を経て Babel7 がリリースされたということで、変更点をまとめてみました。

シンタックスハイライターの比較
このブログにもそろそろシンタックスハイライター(syntax highlighter)を導入しようと思って調べてみたら、なんか思ってたより種類があってげっそりです。いろいろあってドキュメント見るだけではよくわからなかったのでとりあえず一通り試してみました。シンタックスハイライターライブラリをお探しの方の参考になれば嬉しいです。

React入門 参考記事まとめ
先日 Gutenberg の記事で、ブロック開発には React の知識はそれほど必要ないと言いましたが、あれは嘘です。ごめんなさい。React の知識があるほうが何倍も開発が楽になると思います。
というわけで今回は React についてのサイトや記事をまとめました。実を言うと僕も現在進行形で React を勉強中でして、その上で役に立ったと思うものをいくつか紹介していくので、これから React を学びたいと思っている方はよかったら参考にしてみてください。
公式チュートリアル
まずは何と言っても公式サイトでしょう。一番信頼できる情報源です。日本語翻訳がないのが残念ですが、Google翻訳を片手に頑張って読むだけの価値はあると思います。
Hello World – React
React のコンセプトを体系的に学べます。実際に手を動かしながらより、理論を学びたい方にオススメです。
Tutorial: Intro to React – React
こちらも公式サイトのチュートリアルですが、やりながら勉強するタイプのものです。上記のものと比べ、自分の勉強方法にあった方を選ぶといいと思います。
解説サイト
英語を見るだけで蕁麻疹が出て死ぬという方は、日本の方が書かれているサイトを見ましょう。非公式と言っても情報が劣る訳ではなく、むしろ使う側の立場で書かれているのでこちらの方がわかりやすいかもしれません。
React入門 – とほほのWWW入門
過去に HTML や CSS などでお世話になった方もいるんじゃないでしょうか? かの有名なとほほのWWW入門ですが、なんと React までカバーしていました。僕が小中学生くらいのときによくみてたサイトなので、まさかまだ健在とは思わずびっくりです。
昔と変わらず、要点がとてもわかりやすくまとまっていてすごく読みやすい内容になってます。
一人React.js Advent Calendar 2014
React を解説するためにアドベントカレンダーをお一人で埋めたというとてもクールなページです。初歩的な部分から高度な部分まで25日間に渡って幅広く扱っています。1日ごとにテーマが決まっているので興味があるところから読めるのもグッドです。
仮想DOM
React でも取り入れられている仮想DOMという技術についても紹介しましょう。React を使用する上で知らなくてはならないものではないですが、興味がある方は読むとわくわくできるでしょう。
なぜ仮想DOMという概念が俺達の魂を震えさせるのか – Qiita
少し古い記事ですが、仮想DOMの仕組みやそもそもなぜ仮想DOMなのかと言ったところがわかりやすく書かれています。仮想DOMのメリットが分かる頃には著者の方のように魂が震えていることでしょう。
おわり
おわりです。他にオススメの記事とかありましたらこっそり教えてください。こっそり追加します。
個人的な意見ですが、React と Vue.js はどちらかを理解しているともう片方の理解がスムーズに進みますね。
以前 Vue.js を勉強していた時はとても苦しんだ記憶がありますが、今回は気軽に勉強できてる気がします。コンポーネント指向やデータの流れといった共通した概念があるからでしょう。