その33ヶ月つづけてみました。👍JavaScriptドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、ついに本日公開できる状態になりました。PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけてます。PC版は鋭意制作中です。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を採用したので、なかなかはまりました。何処かで誰かの役に立つことを祈りながらまとめておきます。className="box"></div>classが予約後なのでエラーが吐かれます。classNameと書きましょう。"red"}}></div>オブジェクトを渡しましょう。{}内にはJavaScriptが記述できます。{}内にオブフェクトを渡しているので{{}}という形になっているのです。普通に埋め込むと{}とかがエスケープされてしまうので、dangerouslySetInnerHTMLをつかいました。dangerouslySetInnerHTMLを知らなかった頃は、わざわざ外部ファイルにしようとしていました。/>これ、最後まで気づきませんでした。キャメルケースにしておかないとレンダリングされません。サイトが文字化けしたので気づきました。どこかで誰かの参考になったらうれしいです。...「最近のGooglebotはJavaScriptも評価するから、ReactとかVueも...2018-05-041年ぶりに己のウェブサイトを更新しようとして、もろもろアップデートしました。kimizuka.fmGWをつかってひさしぶりに更新しようとしました。^なにか新しいことをはじめたくなりますね。...2017-04-18webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。^なにか新しいことをはじめたくなりますね。注目記事プライバシーポリシーはてなブログをはじめよう!kimizukaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。