ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、
ついに本日公開できる状態になりました。
Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。https://t.co/8TAJ1hNgbM
— 君塚史高 (@ki_230) 2017年7月3日
デザイン、サーバサイド、フロントすべてやりきりましたが、その反動でPC版は鋭意制作中となっております。
また、平日は仕事、休日は育児という感じなので、隙間隙間で進めて、かれこれ半年かかってしまいました。
時間がかかってしまったことの原因としては、デザイン、サーバサイドが専門外で勉強しながら進めたこと、
そして何より、普通に実装が終わりそうなタイミングで、思いつきでReactの採用を決めたことです。
- ReactをつかうならReduxをつかいたい。
- Reactをつかうなら、webpackをつかいたい。
- webpackをつかうならPostCSSをつかいたい。
- Reactをつかうなら、サーバサイドでレンダリングしたい。よし。Expressをつかおう。
- Expressをつかうならサーバを借りよう。せっかくだからNginxにしてみよう。OSはなんとなくUbuntuにしてみよう。
と、連鎖的に勉強しなければならないものが増えていき、さらにSCSSで書いた部分が完全に移植できなかったり、
JavaScriptをほぼ1から書き直したり、と、あれこれしているうちに時間がかかってしまったんですが、その分学びも大きいものになりました。
（でも、完成したコードを親切なサーバサイドエンジニアに見てもらったところ、サーバサイドレンダリングのやりかたが根本的に違うと教えてもらいました。直さなければ！）
なので、しばらくはここでの学びを忘れないうちにメモしていこうと思います。
まずは、一番時間を引き伸ばしたであろうReactから。
個人的にはまったReactでHTMLと違う書き方をしなければならない箇所
ReactはJavaScript内にHTMLを書くことのできるすごいやつなのですが、一部普通のHTMLと書き方が異なる点があります。
僕はノリでReactを採用したので、なかなかはまりました。何処かで誰かの役に立つことを祈りながらまとめておきます。
class属性
誤）
<div class="box"></div>
正）
<div className="box"></div>
classが予約後なのでエラーが吐かれます。
classNameと書きましょう。これは基本ですね。
style属性
誤）
<div style="background: red;"></div>
正）
<div style={{background: "red"}}></div>
オブジェクトを渡しましょう。
{}内にはJavaScriptが記述できます。{}内にオブフェクトを渡しているので{{}}という形になっているのです。
scriptタグ
誤）
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA', 'auto'); ga('send', 'pageview'); </script>
正）
<script dangerouslySetInnerHTML={(() => { return { __html: `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA','auto');ga('send','pageview');` }; })()} />
アナリティクスとか、Facebookとか、Twitterのscriptを埋め込む時、
普通に埋め込むと{}とかがエスケープされてしまうので、dangerouslySetInnerHTMLをつかいました。
dangerouslySetInnerHTMLを知らなかった頃は、わざわざ外部ファイルにしようとしていました。
charset
誤）
<meta charset="UTF-8" />
正）
<meta charSet="UTF-8" />
これ、最後まで気づきませんでした。
キャメルケースにしておかないとレンダリングされません。
サイトが文字化けしたので気づきました。
以上です。どこかで誰かの参考になったらうれしいです。
