久しぶりにLPを作ってみて感じたこと

副業で久しぶりにLPを作る作業を2件行った。

最近はSPA開発がほとんどだったので勝手を忘れてしまいまずどういう環境で作ろうか？などを考えながらやっていたのでその備忘録

Gatsby、Parcel

今回は2枚のLPページを作ったのだが、要件的にはこんな感じだったので、技術選定をした。

1枚目（Gatsby）

• SVGを使ったアニメーションが多め
• 要素が多いけどアニメーション以外のCSSはそこまで難しくない
• ロジック割と多め

2枚目（Parcel）

• アニメーションがほとんどなくロジックもそこまでない
• レスポンシブでCSSはまあまあ書く

Gatsbyの選定理由は自分が使いやすかったためとアニメーションを生のJavaScriptで書くのが辛いと感じたからだ。またGatsbyのtemplateでデザインに近いものがあって、ほぼそのtemplateを流用できたのも選定の理由。

Parcelの選定理由は最初静的なHTML、CSS、JavaScriptで作ろうと思ったのだが、CSSが辛いのでSCSSを使いたいという気持ちとJavaScriptは、そこまで多くないけど処理ごとにファイルは別けたいと思ったこと、更に開発サーバーでホットリロードしながら作業したいということもありParcelにしてみた。

webpackにするまでもないような時にParcelはオススメ。

作成してみて

割と実装自体はサクサクできたが、レスポンシブのCSSが久しぶりだったのでメディアクエリのSCSSの変数の書き方とか、レスポンシブのレイアウト作る時の注意点などをすっかり忘れていたので最初調べながら作業していた。

SPA開発を長くしているとロジックばかりになりがちなので、こういう突発的なLP作業などをするとCSSのリハビリにもなるので、定期的にやっていくことはいいことだと思った。