<p>こんにちは。妹尾です。フリーランスでフロントエンドエンジニアをやっています。詳しいプロフィールは<a href="https://blog-sorellina-coda.dev/profile" target="_blank" rel="noopener noreferrer">こちら</a>から。<br><br>2021年の目標を先日立てましたが、目標だけ立ち上げて振り返りをしなければ何の意味もないので、今後月次もしくは隔週でのスプリントのように目標管理をしていこうと思います。</p><h3 id="hd13a9bfb97">2021年の目標おさらい</h3><p>2021年の目標として立てたものは<a href="https://blog-sorellina-coda.dev/articles/d6dd89zfi" target="_blank" rel="noopener noreferrer">こちら</a>からどうぞ。</p><h2 id="hbfe66d515e">2021年1月にやったこと</h2><h3 id="h686a30b85e">お仕事</h3><ul><li>フリーランスエンジニアとして引き続き案件参画<ul><li>古いライブラリを置き換えてJestでモック作ってテストして...</li><li>Stylelintの設定を更新した</li><li>node-sassからdart-sassへ置き換えて、webpackを修正するなど</li><li>Storybook書いた</li></ul></li><li>請け負っているWordPress仕事の保守開発</li></ul><p><br>古いライブラリの置き換えが正直かなりしんどかったです。<br><br>外部ライブラリを<code>jest.doMock</code>でモックしてあげて、<code>jest.isolateModules</code>して干渉させないようにして...と、単なるコンポーネントに対してテストを書くよりよっぽど難しかったけれど、非常に勉強になりました。<br><br>JestとReact Testing Libraryの使い方はこれで少し分かってきたので、普段からもちゃんとテストを書けるようにしたいところ。<br></p><h3 id="hd851974331">言語・フレームワーク</h3><ul><li>React Nativeを絶賛学習中</li></ul><p><br></p>

<p>
<a href="https://px.a8.net/svt/ejp?a8mat=3H3QZH+5K1O1E+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-native-first-step%2F" rel="nofollow">React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応版</a><img border="0" width="1" height="1" src="https://www12.a8.net/0.gif?a8mat=3H3QZH+5K1O1E+3L4M+BW8O2" alt="">という講座と、<br /><br /><a href="https://px.a8.net/svt/ejp?a8mat=3H3QZH+5K1O1E+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-native-firebase%2F" rel="nofollow">実践編：React NativeとFirebaseで作るiOS/Androidアプリ：お店レビューアプリ開発編</a><img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=3H3QZH+5K1O1E+3L4M+BW8O2" alt="">という講座で勉強しました。
</p>

<h3 id="h08efe6d895">個人開発</h3><ul><li>ライブ配信駆動開発(<a href="https://0000.studio/gengineer" target="_blank" rel="noopener noreferrer">00:00Studio</a>)を続ける</li><li>JAMStackブログの機能・デザインアップデートを続ける</li></ul><p>ライブ配信駆動開発は14日やってみました。<br><br>日々ブログの機能追加やデザイン面の調整、バグ対応などを進めていました。</p><h3 id="h6cfaa47bdb">ブログ</h3><ul><li>7本書きました</li><li>Google AdSense申請中</li></ul><p><br>ブログを開設して1ヶ月経ちました。<br><br>週に2,3本書くのを目標にしていたので若干下振れです。<br><br>1月のPVが1500程度で、この数字が良いのか悪いのかはよく分かりませんが、技術メインのブログなのでまぁそれくらいのもんだろうと思っておきます。<br><br>今月読んでいただいたトップ3が以下の記事。</p><ul><li><a href="https://blog-sorellina-coda.dev/articles/mi8bywjolf" target="_blank" rel="noopener noreferrer">2021年のフロントエンドエンジニアに求められそうなスキル</a></li><li><a href="https://blog-sorellina-coda.dev/articles/owtquyzd4" target="_blank" rel="noopener noreferrer">JAMStackでブログを作った理由とそのメリット・デメリット − JAMStackはいいぞ</a></li><li><a href="https://blog-sorellina-coda.dev/articles/jopaphwcp" target="_blank" rel="noopener noreferrer">SIerに入社してプログラミングをやらない場合、危機感を持った方がいい理由</a></li></ul><p><br>Google AdSenseは申請してもうすぐ2週間経つのですが音沙汰なく...これでNGだったら勘弁してほしいところです笑<br><br>Google Search Consoleの設定がちゃんとできていなかったみたいなのとちゃんと検索に乗るのは早くて3ヶ月くらいとのことなので気長に検索流入が増えていくのを待とうと思います。</p><h3 id="hdfa806e43a">資産運用</h3><ul><li>粛々と米国ETFに投資をしています</li><li>iDeCoの掛金をMaxにしました</li></ul><h3 id="h24a4d124d1">プライベート</h3><ul><li>体重を76kg -&gt; 73.5kgまで落とせた</li><li>Fit Boxing2を続けていたが、肩を痛めたため2週間ほど療養...</li><li>娘の写真を毎日とはいえないけど撮りました。毎日かわいい。</li><li>0時には寝て7時に起きるのが難しい...要夜型改善</li><li>お酒は今月2回しか飲まなかった</li></ul><p>余計な間食もなく、体重が着々と落ちていっているのは嬉しいですね。<br><br>Fit Boxing2が楽しくて続いていたのですが、体をひねったときに肩を痛めてしまって今は運動量が落ちています。<br><br>夜型を改善しようというのを目標にしていたのですが、ついつい1時くらいまで起きてしまうので意識して改善しようと思います。<br><br>そして余談ですが、今年の1月4日、応援しているFC東京がルヴァンカップを制して9年ぶりにタイトルを手にしました！！✨<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:c7c8182c-88d5-4972-a4d4-22b5f7904ef2/service/gens-blog/media/136091525_3638051532944962_5448376864168559050_n.jpg" alt><br>本当に嬉しかった。今年1年頑張れる。今年こそはリーグタイトルを取りたいですね。</p><h2 id="hf1e3d36fa3">2021年2月の目標</h2><p>ちゃんと目標管理できるように記録として残しておきます。</p><h3 id="h686a30b85e">お仕事</h3><ul><li><strong>確定申告を終わらせる</strong></li></ul><h3 id="h08efe6d895">個人開発</h3><ul><li>ブログをリファクタリングする<ul><li>コンポーネントの粒度とか、カテゴリー周りの修正とか</li></ul></li><li>React Nativeでアプリ開発をする<ul><li>まだ先述のUdemyの講座が少し残っているので、まずはそこから</li><li>アプリ開発の様子も配信する</li></ul></li></ul><h3 id="h6cfaa47bdb">ブログ</h3><ul><li>最低でも8本書く<ul><li>フロントエンドの学習ロードマップとか、(今更だけど)2020年に買ってよかったものとか書きたい</li></ul></li><li>Google AdSense申請を通す<ul><li>Google様、何卒よろしくお願いします</li></ul></li></ul><h3 id="hdfa806e43a">資産運用</h3><ul><li>小規模企業共済を申し込む</li><li>米国ETFを買い増す</li></ul><h3 id="h24a4d124d1">プライベート</h3><ul><li>体重を72キロ台前半まで減らす</li><li>FIt Boxing2を毎朝やる</li><li>0時に寝る！！</li><li>開幕戦で浦和に勝つ</li></ul><p><br>それではこの辺で。<br><br>目標管理でもあるので2月中頃にも進捗書こうと思います。</p>

<ol><li>2021年1月にやったこと</li><li>2021年2月の目標</li></ol>

フリーランスエンジニアの個人的な振り返り（2021年1月）

<p>こんにちは。妹尾です。フリーランスでフロントエンドエンジニアをやっています。詳しいプロフィールは<a href="https://blog-sorellina-coda.dev/profile" target="_blank" rel="noopener noreferrer">こちら</a>から。<br><br>今日は「フロントエンド開発入門」という本について紹介していきます。<br><br>本書はWeb系エンジニアに興味を持っている方、特にフロントエンド技術に興味を持っている方に特にお勧めな書籍です。<br><br>Webフロントエンド開発が未経験の方でも十分に読める内容であり、フロントエンドに携わったことのある方ならばより深く共感を持って読めると思います。<br><br>本書はフロントエンド開発の変遷や、必要とされている技術、アジャイル開発のようなWeb系開発の手法について解説がされているため、現代フロントエンド開発へ入門するための教科書と言えるでしょう。</p>

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1771/9784798061771.jpg?_ex=200x200" style="border: none;" /></a></div><div class="booklink-info"><div class="booklink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" >フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装</a><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">安達 稜/武田 諭 秀和システム 2020年10月09日頃    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" >楽天ブックスで探す</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4798061778/gengineer-22/" target="_blank" rel="nofollow" >Amazonで探す</a></div>                                    	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

<h2 id="h9707d3a59a">概要</h2><blockquote><span style="color:#0f1111">最近のWeb開発ではフロントエンドの技術が必須です。とはいえ、HTMLに追加される新しい要素や属性、増えていくCSSプロパティやルール、年々アップデートされるJavaScriptなど、複雑かつ膨大な情報を整理するだけでも大変です。本書は、初級者向けにフロントエンド開発支援ツールの選び方や使いこなし方、効率的に開発をするための基礎知識が身につく入門書です。複数の支援ツールから「なぜそれを使うのか」選択する基準がわかります。（</span><a href="https://www.shuwasystem.co.jp/book/9784798061771.html" target="_blank" rel="noopener noreferrer">秀和システム「この本の内容」 説明文</a><span style="color:#0f1111">より引用）</span></blockquote><p><br>Webフロントエンド開発において、非常に技術・ツールは流行の変化が早く、「どこから学び始めれば良いかわからない」「学習できたと思ったらまた次のツールが出てきた」などの感想を持つ方もいるでしょう。<br><br>しかし、著者も記しているように2010年代に比べると混沌とした技術変遷は穏やかになりつつあります。<br><br>それでもフロントエンドエンジニアが担当する技術領域は広範囲に渡ります。<br><br>この本ではフロントエンドのWebアプリ開発領域で主要となる技術・ツールについて、<strong>「なぜその技術・ツールを使うのか」</strong>を主眼において解説されています。<br><br>「変わり続けるプラットフォームで変わらないことを学ぶ」と帯にも書かれていますが、本書を読むことで変わり続けるWeb開発記述の変遷の中でベースとして身に付けておきたい知識を得ることができます。<br></p><h2 id="h0d376e5d4e">構成</h2><p>本書の構成は大きく3部構成です。</p><ol><li>導入編 なぜ使うかを知る</li><li>実践編 どう使うかを学ぶ</li><li>応用編 より深く学ぶために知る</li></ol><h3 id="h72fabbaf4f">パート1 導入編</h3><p>パート1は紹介されたツールが「何を解決するもので」なぜ「導入するのか」を、これまでのフロントエンドの歴史的変遷を踏まえて理解するパートです。<br><br>パート1では以下のことを学ぶことができます。</p><ul><li>フロントエンドエンジニアの歴史</li><li>フロントエンドに求められるスキル</li><li>フロントエンドにおける一般的なツール群</li><li>開発の現場における仕事の進め方</li></ul><p>一部コードは書かれているものの、ここで重要なのはコードよりも雰囲気を掴むことなので、特に初心者の方はパート1だけでもまず読み進めても良いでしょう。<br><br>特に開発現場での仕事の進め方について触れられている点は非常に良い点でした。<br><br>パート1で、フロントエンドに求められる技術スキルの範囲はやはり広いということが理解できると思います。</p><h3 id="h783b0e84a5">パート2 実践編</h3><p>パート2はフロントエンド開発の基盤構築からライブラリ・フレームワークの導入、設計・実装方法など、実際の開発現場のことを想定しながら学習できるパートです。<br><br>パート2では以下のことを学ぶことができます。</p><ul><li>既存アプリケーションの開発環境構築</li><li>設計と実装</li><li>CI&#x2F;CDによって受けられるメリット</li></ul><p>実際に手を動かしながら読み進められるパートです。<br><br>このパートではReact, TypeScript, styled-components, Jestが取り扱われていますが、昨今のフロントエンド事情からしてもこれらの技術を触れる・理解できているのは重要だと思います。<br><br>意識が薄れがちなパフォーマンスにおいてもLightHouseとGitHub Actionsを使った定期的なパフォーマンス計測が紹介されており、実践的な内容になっています。</p><h3 id="h7e120506d6">パート3 応用編</h3><p>パート3ではパート2よりもさらに発展的な内容が解説されています。<br><br>フロントエンドエンジニアとして開発チームでどう仕事に取り組むべきか、マインドセットなども紹介されています。<br><br>パート3では以下のことを学ぶことができます。</p><ul><li>解析とモニタリング</li><li>チーム開発とWebへの貢献</li></ul><p>保守運用フェーズで必要となってくるデータ解析や、エラーモニタリングについて、また、スクラム開発の詳説がなされています。<br><br>フロントエンドはユーザーから見える部分、いわばユーザーがWebサービスを使用するかどうかの入り口に当たるので、日々Google Analyticsなどの解析ツールを使いこなして、サイト・アプリ改善に活かしていくことがビジネスの成功に繋がります。<br><br>ある意味でビジネスに深く関われるのがフロントエンドが重要かつ面白いと個人的に思う点です。<br><br>OSSやコミュニティなどへの貢献について記されているのもこのパートです。</p><h2 id="h0b23a3ce2c">本書で紹介、取り扱われている技術・ツール・考え方</h2><ul><li>Node.js</li><li>Vue.js &#x2F; Angular &#x2F; React</li><li>Babel</li><li>webpack</li><li>TypeScript</li><li>Redux</li><li>Flux</li><li>Prettier &#x2F; ESLint</li><li>Mocha &#x2F; Jest &#x2F; Karma</li><li>Google Analytics &#x2F; Google Optimize</li><li>Sentry</li><li>スクラム開発</li></ul><p>どれもモダンフロントエンドを志向する現場で使う可能性の高いものです。</p><h2 id="h9be0c3393d">おわりに</h2><p>「フロントエンド開発入門」という本について紹介しました。<br><br>本書が発刊されたのは2020年10月なので、ブログ執筆現在(2021年1月)でもほぼ最新のフロントエンド開発事情を知ることができる本でもあります。<br><br>自分の経験から振り返ると、SIerからフロントエンドエンジニアへ転身する時点でこの本に巡り合いたかったと思いました。<br><br>フロントエンドエンジニアを志す人、今フロントエンドエンジニアとして従事している人、HTML&#x2F;CSSはやってみたけど次に何をすれば良いかわからない人にぜひ読んでみていただきたいです。</p>

<ol><li>概要</li><li>構成</li><li>本書で紹介、取り扱われている技術・ツール・考え方</li><li>おわりに</li></ol>

 「フロントエンド開発入門」という本を紹介しました。本書はWeb系エンジニアに興味を持っている方、特にフロントエンド技術に興味を持っている方に特にお勧めな書籍です。

書評: フロントエンド開発入門

<p>JAMStack・・・JavaScript &#x2F; API &#x2F; Markupの頭文字。<br><br><span style="color:#1a202c">JavaScriptで外部APIを叩いてMarkup(HTML)を構成する技術のこと。</span><br><br>このブログはJAMStackな技術を用いて作成しました。<br><br>作るに至ったきっかけやメリット・デメリット、そこで得た知見などをブログ構築の一番手の選択肢であるWordPressと比較しながら紹介します。<br><br>そもそもJAMStackって何？という方は、先日2021年の「フロントエンドエンジニアに求められそうなスキル」という記事の中でJAMStackについて紹介している箇所があるので併せて読んでいただければと思います。<br><br><a href="https://blog-sorellina-coda.dev/articles/mi8bywjolf" target="_blank" rel="noopener noreferrer">https://blog-sorellina-coda.dev/articles/mi8bywjolf</a><br></p><h2 id="h27111e9216">なんでJAMStackで作ったの？</h2><p>イケてる技術＆好きな技術で自前のブログを作りたい！というのがモチベーションの源泉です。<br><br>以前Nuxt.js, Contentful, Netlifyを主に使ってブログを構築したこともありましたが、ブログそのものを更新しなくなってしまいました。<br><br>その前のブログをそのまま使うでもよかったかもしれませんが、</p><ul><li>今はReactが好きで、Next.jsのSSG&#x2F;ISGがブログに適しているので使いたかったこと</li><li>上記に付随して、個人的にVueベースのNuxtを使いたい要求が弱くなったこと≒メンテに対するモチベーションが沸かなくて辛い</li><li>以前のブログはCSSのパフォーマンスが悪く画面のチラつきが鬱陶しく感じていたこと</li><li>Contentfulが正直使いづらい(簡単にブログを更新したいだけなのに英語を読みながらコンテンツ管理したくない)</li></ul><p>という点から、Next.js &#x2F; TypeScript &#x2F; Vercel &#x2F; microCMSの構成で作り直すことにしました。<br><br>結果としてトップページ、記事ページともにLighthouseで高スコアが出るくらいの改善がなされました。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:c7c8182c-88d5-4972-a4d4-22b5f7904ef2/service/gens-blog/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-01-23%2023.36.26.png" alt><br>やはり静的Webサイトの生成はパフォーマンスに優れていますね。<br><br>ページ遷移も非常にサクサクで、体験もよく感じています。</p><h2 id="hc3a07fcea1">WordPressじゃダメ？</h2><p>正直、ブログで収益化を目指すならWordPressで作った方が圧倒的に立ち上げが速いと思います。<br><br>ブログ向けのテーマやプラグインも充実していますし、事例も豊富です。<br><br>SEO対策もすでに整っているテーマなどが販売されていますし、WordPressブログは始めるだけならとても簡単です。<br><br>ただ、ページデザインの自由度はJAMStackブログに軍配が上がると思いますし、偏見が入りますがWordPressのセキュリティ対策が正直面倒に感じています。<br><br>今、個人開発でWordPressか...という若干過激派思想的な部分も正直あります。</p><h2 id="h72f4f74d01">JAMStackのメリット</h2><h3 id="hd10e8f1ec5">クライアントサイドでJAMStackブログは動くこと</h3><p>JAMStackのメリットは、SPA(Single Page Application)としてクライアントサイドで動くため、自前でサーバーを立てたりレンタルサーバーと契約する必要がないところです。<br><br>静的なアセットをVercelなどのホスティングサービスに乗せて配信しているだけなので、サーバーの管理をする必要がありません。<br><br>例えばWordPressだとサーバー側でページを構築するため、サーバーが停止してしまった場合にブログの読者にページを提供できなくなってしまいます。<br><br>JAMStackの場合、ページの構築はビルドを行うタイミングになるので、仮にサーバーが不具合で止まるとしても記事・ページを新しく作る段階で影響を受ける程度です。<br><br>すでに配信されているページには影響を受けません。<br><br>また、レンタルサーバーを契約すると大体月々1000円ほどかかる見込みですが、JAMStackなこのブログは<strong><s>「完全無料」</s></strong><s>で動いています。</s>ドメイン代で年1000円ちょっとかかってます🙇‍♂️<br><br>今後ブログを収益化すると考えるとこのランニングコストの差は大きいと思います。</p><h3 id="hddfe2d5fe8">セキュリティに対して比較的安全であること</h3><p>JAMStack構成ではサーバーを基本的に持たないため、攻撃の入り口になるような対象がなく、安全性を保ちやすくなります。<br><br>WordPressのセキュリティ対策が面倒と前述したのは、WordPressはサーバー上で動くためです。<br><br>世界の約3割のサイトがWordPressで構築されていると言われており、攻撃者からすればWordPressのサイトをターゲットにすることも多いです。<br><br>常々脆弱性対策をしなくてはならないのがWordPressのデメリットとも言えます。<br><br>ログインページを&#x2F;wp-admin&#x2F;のままにしていませんか？攻撃者の格好の的ですよ。</p><h3 id="h7d81356872">静的サイトのため高速</h3><p>JAMStack構成の場合、ページをサーバーからの返却ではなく静的アセットとして事前生成しておくことでCDN(<span style="color:#252525">Content Delivery Network</span>)から配信できるので非常に高速です。<br><br>サーバーでの処理を挟まないため高速化が実現できているというわけです。<br><br>ブログとしての用途だとコメント機能など一部例外はありますが、動的に値が変わる要素はほぼ無いので、オリジンサーバーを介して配信する必要がありません。<br><br>また、静的アセットの配置などもGithub連携などCI&#x2F;CDの構築が容易である点はメリットだと思います。</p><h3 id="hac760cc108">もしもの時に...</h3><p>JAMStackブログでは、View、API、ホスティングをそれぞれ別のサービスを用いて作るため、例えばViewのところが気に入らなくなった時に他のところは残して作り直すのが容易です。<br><br>例としてNext.js &#x2F; microCMS &#x2F; Vercelでこのブログは作っていますが、今後Next.jsが落ち目になり新しいフレームワークで作った方が良いとなれば、Next.jsの部分は他の技術に置き換えてmicroCMSでブログコンテンツの管理は続ける、ということが可能です。<br><br>各サービスで責務の分離がされているので障害時にも何が悪いかの切り分けがしやすいのもメリットだと思います。</p><h2 id="h7433da2982">JAMStackのデメリット</h2><h3 id="h4756a766cf">自分で作るものが多い</h3><p>WordPressには先人たちの作った数々のプラグインやテーマが存在するため、デザインを深く考えなくてもいい感じのブログが作れます。<br><br>一方JAMStackブログでは内部処理やUIコンポーネントはパッケージ、ライブラリとして提供されているものがあるものの、基本的には自分でページデザインを考え、コンテンツデータ取得の処理を書かなくてはならないため、構築まで時間がかかります。<br><br>WordPressならおそらく1時間もあればブログとしての体を成すものが作れると思いますが、JAMStackで0から作るとそれ相応の時間がかかります。<br><br>僕はいろいろ調べながら作って2〜3週間くらいでブログの体を成す形に仕上げました。</p><h3 id="h884039bc62">時間ぴったりにブログを公開するのが難しい</h3><p>JAMStackは作成したコンテンツを公開する際に、コードをビルドしてHTMLなど静的アセットを生成し配信しています。<br><br>コードのビルドがいつ終わるかはページ数次第なので、「17時ぴったりに情報解禁！」と思って17時に公開ボタンを押したとしてもビルドが終わるまでの数分間はページ表示ができません。<br><br>WordPressならコンテンツ公開の時点でサーバーにコンテンツを登録し、ユーザーが見に来たタイミングでページを作るので時間通りに公開も可能で、(調べてないので分かりませんが)タイマー配信もできるのではないでしょうか。</p><h3 id="ha93cad7d44">ページが多いとビルド完了まで時間がかかる</h3><p>先述の通りコンテンツ公開の都度全てのページに対してビルドを行なっているので、ページ数が多いと公開まで時間がかかってしまいます。<br><br>もちろんビルド中にはそれまでに公開しているコンテンツに影響は無いので個人ブログ程度の分量ならほぼ影響はありませんが、ニュースサイトのように莫大なページ数を持つWebサイトにはJAMStackは向いていないと言えます。</p><h3 id="ha96df7d158">選択肢が多い</h3><p>JAMStackではいくつかのサービス、フレームワークを組み合わせて構築するので、「どれを使って構築していいかわからない！」となる場合がありそうです。<br></p><ul><li>静的サイトジェネレータ： Next.js &#x2F; Nuxt.js &#x2F; Gatsby.jsなど</li><li>ヘッドレスCMS：microCMS &#x2F; Contentfulなど</li><li>ホスティングサービス：Vercel &#x2F; Netlify &#x2F; Firebase Hosting &#x2F; AWS S3など</li></ul><p><br>WordPressならWordPressだけで完結できるのでJAMStackのこのサービスの組み合わせは煩雑に写るかもしれません。<br><br>どの組み合わせがいいか迷ったときはNext &#x2F; microCMS &#x2F; Vercelで良いのではないでしょうか。<br><br>メリットのところでも書きましたが、合わなければそのサービスの部分だけ置き換えることも十分可能です。</p><h2 id="h157b8f3d90">これまでに得た知見</h2><p>ざっと箇条書きにします。</p><ul><li>CI &#x2F; CDの構築がとても簡単。WebhookでmicroCMSとVercelをつないでいるので、microCMSでコンテンツ公開すればすぐVercelでビルドを行ってくれる。</li><li>デザインからAPI構成まで自分で考える必要がある。コントロールが効きやすいので作ってて楽しい。</li><li>microCMSめちゃくちゃ使いやすい。個人的にはContentfulよりmicroCMSの方がいい。</li><li>SEO対策のためのコードやOGP画像生成を作るのはNext.jsの&#x2F;apiで行なった。</li><li>コードリファクタリングの余地がかなりあるので対応したい。</li><li>SEO対策用にAPIに概要欄を設けてdescriptionを書くようにしたのは効果がありそう。</li><li>サイトマップをどうやって作るかは模索中。</li><li>Webhookでブログの記事公開を検知させてNext.jsでSSGしているが、Webhook外してISRするのでもいいような気はしている。</li><li>難易度はめちゃくちゃ高いわけではない。フロントエンドエンジニアを目指したい初学者にはJAMStackブログの構築・運用をお勧めしたい。</li></ul><h2 id="ha214098e44">まとめ</h2><p>JAMStackは2021年現在、注目されている技術であり、ブログの構築の場合WordPressよりも運用コストは低いと考えています。(導入コストは若干高いですが...)<br><br>JAMStackブログの構築は以下のようにメリットが多くデメリットも実はほとんどない手法だと思います。</p><ul><li>クライアントサイドで動くためサーバーの管理が要らない</li><li>サーバーを持たないのでセキュアであるし、レンタルサーバー代もかからない</li><li>静的サイトなため非常に高速に描画が可能</li><li>自分で作るものが多いがプログラミングスキルアップに繋がる</li><li>ビルドに時間がかかったり時間通りに公開が難しいが、個人ブログには影響なし</li></ul><p><br>知見のところで述べましたが、フロントエンドエンジニアを目指したい人ほどJAMStαckでブログを立ててみるのは有効な気がしています。<br><br>Viewの部分はゴリゴリJSフレームワークを使って作りますし、APIとの接続≒バックエンドとの連携は現場で必ず使う技術ですし、ブログを立てた後はそこに学習記録を残していくことで求職時のアピールにも繋がります。<br><br>トレンドな技術でブログを立ててみたい！という気概があればぜひJAMStackに挑戦してみてはいかがでしょうか。</p>

<ol><li>なんでJAMStackで作ったの？</li><li>WordPressじゃダメ？</li><li>JAMStackのメリット</li><li>JAMStackのデメリット</li><li>これまでに得た知見</li><li>まとめ</li></ol>

JAMStackのメリット・デメリットを解説し、JAMStackでブログを作ることの有効性について書きました。JAMStackは2021年のフロントエンド技術トレンドとして上がってくると思っています。

JAMStackでブログを作った理由とそのメリット・デメリット − JAMStackはいいぞ

<p><a href="https://0000.studio/" target="_blank" rel="noopener noreferrer">00:00 Studio</a>という、クリエイターが作業の様子を淡々とライブ配信するサービスが昨年末に正式リリースされました。<br><br>こちらのサービスで約1ヶ月(毎日ではありませんが)ライブコーディングを続けてみました。<br><br>そこで、自分の作業の様子を配信することで感じたいくつかのメリットを書いていきます。</p><h2 id="h488b6d7660">ライブ配信を始めようと思ったきっかけ</h2><p>きっかけは2つのそして後述する2つの記事を読んだことです。<br><a href="https://qiita.com/Hiroshiba/items/86b9ec67029d5f2b33f8" target="_blank" rel="noopener noreferrer">Qiita: 生放送駆動開発を1000日やったら進捗出たのでみんなもやろう！</a><br><br><a href="https://kensuu.com/n/nf4270e069c20" target="_blank" rel="noopener noreferrer">note:「プロセス・エコノミー」が来そうな予感です</a><br><br>「自分の作業の様子を生放送で配信する」こと、「作業の様子(プロセス)を共有することがお金を稼ぐメインになる時代がきている」ことから、(人に見られているというプレッシャーから)自分の作業の進捗を出すだけでなく、自分や自分の作品・サービスの認知度向上、ファンの獲得が狙えるよ、ということです。<br><br>自分一人での開発だとだらけてしまいがちなところも人の目があるとサボることもできないので、「これは良いかもしれない！」と思い昨年末からライブ配信駆動開発を始めました。</p><h2 id="h2c243e6cf6">ライブ配信駆動開発で何を作ったか</h2><p>この1ヶ月では、このブログ(<a href="https://blog-sorellina-coda.dev/" target="_blank" rel="noopener noreferrer">https://blog-sorellina-coda.dev/</a>) の開発の様子を配信していました。<br><br>ReactNativeで作りたいアプリもあるのでそれに向けた勉強の様子(Udemyで勉強しています)を配信したこともあります。</p><h2 id="h28056bc44a">ライブ配信駆動開発でわかったメリット</h2><h3 id="hb4046d30a3">モチベーションの向上</h3><p>先述の通り、見ている人がいる以上作業をサボることができません。<br><br>大体1時間から2時間弱毎回配信をしていますが、「ここまでやろう」と決めていたところよりもさらに先まで作るくらいの進捗が出ることもあります。<br><br>視聴者が自分の作っているWebサービスの様子を知っているので、よく個人開発で起こりがちな「モチベーションが続かずリリースしないでお蔵入りする」ことが避けられると思っています。<br><br>個人開発の敵はある意味「孤独」だと思っていて、誰か他の人に作っている様子を共有することでその孤独感を解消しつつ作業を進めることができるのは大きなメリットだと感じました。<br><br>また、配信でしゃべりながら作業を進めることで、ラバーダッキング手法(<span style="color:#202124">ゴム製のアヒルのおもちゃに話しかけることで、頭の中で問題が整理されて解決を導く手法</span>)のように詰まった時の解決も容易になることがあります。<br><br>しゃべることで後述の「アーカイブを動画メモとして使う」ことの威力も上がります。</p><h3 id="ha0821e76c5">アーカイブを動画メモとして使う</h3><p>暴論ですが、人は自分が書いたコードの意図を忘れます。<br><br>だからこそコメントをコードに残すべきで、文字情報をコードに残しておくことで意図を思い出すことができます。<br><br>さらに踏み込んだ内容として、自分の配信をアーカイブして、そのアーカイブ動画をメモがわりに見ることができるので、コメントとして文字化したものだけでなく思考・プロセスを確認することができます。<br><br>文字情報だけだと欠けてしまうような、「どう考えて、どういうサイトを検索して、どういう解決策を試したか」というプロセスが残るため、次に似たような実装をする時の思い出すきっかけや、「あの参考にしたサイト、どうやって探したんだっけ…」と忘れた時も動画メモを通して確認ができることもあります。<br><br>00:00 Studioでは自分の配信をアーカイブすることができるので、上記のメリットを享受できます。</p><h3 id="hf79987a30c">セルフブランディングができる</h3><p>自分の作業の様子やサービス開発の様子を発信し、視聴者が自分や自分のサービスのファンになってくれることもあります。<br><br>SNSが発達した現代において、発信することで「まず、知ってもらうこと」が容易になってきました。<br><br>ライブ配信は大きな広告を出すことなく人にリーチできる手段の一つだと思っています。<br><br>また、こうしたライブ配信を通じて自分を知ってもらい、仕事に繋がる可能性もあります。<br><br>百聞は一見に如かずと言いますか、普段どう勉強や開発をやっているかわからない人よりも、勉強や開発の様子を配信している人の方がプログラミングの実力や普段の様子などを知れる分、採用担当者が経歴書だけを読むより説得力が強いのは明らかだと思います。<br><br>00:00 Studioでは「差し入れ」と称して小額から投げ銭がいただける制度もあるのでちょっとしたおこづかいがもらえるかもしれません。<br><br>Youtube Liveだといくつか収益化までハードルがあるのでさくっと始めたい人には00:00 Studioの方が敷居が低いと思います。</p><h3 id="h9c8aa13492">擬似的モブプログラミング</h3><p>個人開発だと自分の書いたコードのレビューは誰にもしてもらうことが基本的にはできず、詰まった時も自力で解決する必要があります。<br><br>自分のコーディングの様子を配信しているので、視聴者からアドバイスや解決策をコメントしてもらえることがあります。<br><br>自分がドライバーで、視聴者がナビゲーターとなる擬似的なモブプログラミングが配信を通してできるので、詰まった時の解消スピードもたった一人で進めるよりも上がります。</p><h3 id="hf7a75178ef">動画の配信方法が理解できる</h3><p>これはかなり限定的なメリットです。<br><br>00:00 Studioで配信をする前はYoutube Liveで2,3日ライブコーディング配信をしたことがありました。<br><br>Youtube Liveでは配信のためにOBSというソフトを使う必要があり、操作に慣れがいる部分があります。<br><br>たまたま業務で動画配信のためにOBSを使う機会があり、操作方法を知っていたのですんなりと作業できたことがあります。<br><br>一般に動画の配信はOBSを使うことが多いみたいですね。OBSはかなりメモリを食うみたいで、M1チップでないMacbook Proを使っているのでファンがめちゃくちゃうるさく回っていました。<br><br>00:00 Studioは画面共有で配信するスタイルなので負荷が少ないみたいです。</p><h2 id="h39cedaf24d">個人開発者や初学者はライブ配信駆動開発をしてみよう</h2><p>この記事では個人開発をしているエンジニアに向けに書いていますが、初学者のエンジニア志望の方にもライブ配信駆動開発は有用な手法だと思います。<br><br>「初心者だと作業が止まりがちで見る人がつまらないのでは…」という心配もあるかもしれませんが、視聴者からのアドバイスを受けられる可能性もあります。<br><br>エンジニア転職の際にも「ライブ配信で勉強の様子を配信していました！コードを書く様子はアーカイブ動画に残っているので見てください！」とアピールできます。<br><br>学習の様子やポートフォリオ作りを配信していたりすると、自分で考えて、勉強してWebサービス・ポートフォリオを作っている証明にもなりますね。<br><br>アピール材料は多いに越したことはありません。</p><h2 id="h69cb3f0210">ライブ配信駆動開発で気をつけた方がいいこと</h2><p>主に画面共有の形で配信することが多いですが、「見せてはいけないもの」を見られてしまわないかは気をつけましょう。<br><br>請けている案件のフォルダだったり、Google検索の履歴だったり、.envの秘匿情報だったりと、思いがけず配信してしまうと時に事故の原因になりかねません。<br><br>僕は基本的にデュアルディスプレイで配信して、片方を配信用画面、もう片方を退避用のスクリーンとして使っています。<br><br>配信を始める前に配信用のディスプレイをchromeとVSCodeだけにして配信しています。<br><br>手間はありますが一時的に.envを触る時は退避用のスクリーンで操作することにしています。</p><h2 id="h9be0c3393d">おわりに</h2><p>ライブ配信駆動開発でモチベーションを高めながら開発を進めることがこの1ヶ月はできているので、とても有用な手法であると実感しています。<br><br>一つ自分の改善点を挙げるとすると、夜に配信することが多く、子供が隣の部屋で寝ているので音声オフで配信することも多く、動画メモとしての使い方の威力半減や視聴者さんとのコミュニケーションがテキストベースになってしまうことです。<br><br>統計など取ってはいませんが音声オフの時はオンの時よりも視聴者さんの離脱率が高いような気がします...音声オンで喋りながらの配信の方がもしかしたら良いかもしれません。<br><br>最後に宣伝になりますが、ほぼ毎日、大体22時ごろにライブ配信をしながら開発をしています！<br><br>コメントなどいただけたらとても嬉しいです！<br><br>00:00 Studioのマイページリンクは↓<br><a href="https://0000.studio/gengineer" target="_blank" rel="noopener noreferrer">https://0000.studio/gengineer</a></p>

<ol><li>ライブ配信を始めようと思ったきっかけ</li><li>ライブ配信駆動開発で何を作ったか</li><li>ライブ配信駆動開発でわかったメリット</li><li>個人開発者や初学者はライブ配信駆動開発をしてみよう</li><li>おわりに</li></ol>

ライブ配信駆動開発を続けてみて1ヶ月ほどたったので、そのメリットについて語ってみました。

ライブ配信駆動開発を続けて1ヶ月ほど経ったけど、この手法は有用だ！

<p>SIer所属のシステムエンジニア(SE)の方にはもしかしたら耳が痛い話かもしれません。<br><br>「俺はプログラミングなんかしないで、1つの会社でマネジメントして稼いでいく！」という方には不向きな内容です。<br><br>結論から言うと、SIer所属でプログラミングを業務で行っていない場合、もし転職やフリーランス転身を考えた時に「詰む」可能性があります。<br><br>かつて自分も金融系元請けSIerとして新卒入社し、4年目頃から一切業務上でプログラミングをすることがなくなっていきました。<br><br>そうした状況に危機感を感じ、動くなら20代のうちと考えたため、5年目途中でSIerを退職、フリーランスに転身しました。<br><br>僕のように文系卒・SIer所属で「業務でプログラムなんて書いてないな…この先不安だな...」と思っている方に読んでいただければと思います。<br></p><h2 id="he109e62154">SIer所属でもプログラミングをしていないなら市場価値は上がらない</h2><p>Sierの仕事はプログラミングスキルがない場合でも成り立つようになっています。<br><br>プログラミングをしなくても</p><ul><li>客先とのミーティング、要件定義</li><li>マネジメント</li><li>ドキュメント作成</li><li>テスト</li><li>ユーザーからの問合せ対応</li></ul><p>といった仕事があります。<br><br>上記の仕事は上流と呼ばれるマネジメント系統の仕事ができるのであれば、それなりの給与(1,2年目でも額面500万くらいはもらえてました。元請けだったからではありますが)はもらえます。<br><br>一方で、ドキュメント作成やテスト、ユーザーからの問合せ対応などを中心にしている場合、転職時に市場が求めるスキルがついているかと言われると「ノー」かもしれません。<br><br>SIerでのテストは、全てがそうとは言いませんが、人力で目視で、Excelにエビデンスのスクショを貼って確認するパターンが多く、テストコードを書く文化があるとは言い難いものです。<br><br>そしてプログラムを書かない場合、得てして「自社のシステムに詳しい」が、世間一般で使われている技術には疎くなる可能性が高くなります。<br><br>一般にSEは「手に職がある」と言われることが多いですが、システムエンジニアとしての市場価値を考えるとプログラムのわからないエンジニアは転職の難易度が上がります。<br><br>仮にWeb系自社開発企業への転職やフリーランスへの転身を目指すとすると、企業から求められるのは手を動かしたシステム開発経験です。<br><br>どんなプログラミング言語で何年ほど開発経験があるのかを問われ、その経験が乏しい場合は採用を見送られるか、転職先でもテストやドキュメント作成の仕事に追われることになるでしょう。<br><br>日本の終身雇用制度はもう長くは持たないとされている中、本当に「手に職」をつけてIT業界に留まるならばプログラミングの知識・経験は必須だと考えています。<br><br>むしろプログラミングをせずに何年もSIerに留まっていた場合、新卒社員よりも年を取ってしまっている分市場価値は下がっているかもしれません。<br><br>場合によっては詰みます。</p><h2 id="h39c6186671">SIerでマネジメントを中心にするからプログラミングはできなくてもいい...本当に？</h2><p>テストやドキュメント作成、マネジメントをやるにしても結局のところプログラミングの知識が求められることを忘れてはいけません。<br><br>SIerにおいてSEにプログラミング経験がないと、その案件は燃えやすくなると言えるでしょう。<br><br>要件定義や基本設計においてもプログラミング経験がない人が行う場合、開発フェーズで考慮漏れの問題が見つかりがちで「要件が固まってないじゃないか」とか「そもそも設計がクソだ」と案件炎上することもあります。<br><br>不具合対応でも同じく「顧客からシステム不具合の連絡を受ける」→「SEが課題としてExcelに事象をまとめる」→<strong>「事象の解決策がわからないので下請けのベンダーにお任せする」</strong>→「SEがベンダーからの回答を(プログラムのことがわからないので詳細が割愛されて)顧客に伝える」→「顧客に伝わらなくてさらなる問合せに...」と、不毛な伝言ゲームになることもあります。<br><br>「これ俺ら要らなくない？直接ベンダーさんから顧客に伝えてもらうのが確実じゃない？」と思うことがかつて実際にありました...<br><br>実際にどのようにプログラムを組むことでシステムが動いているかを知ることで、適切な設計の知識や開発手法、扱っているシステムの全貌がわかってくると僕は思っています。<br><br>確かに一生マネジメントとして同じ会社で生きていくなら良いのかもしれませんが、SIerのマネジメント職は役職に比例してストレス過多＆残業地獄になることも多いです。<br><br>36協定ギリギリ、もしくはオーバーするほど働いて、体を壊して休職される方も見てきました。</p><h2 id="hdd3fa63310">SE＝システムエンジニア？</h2><p>SEはシステムエンジニアの略とされていますが、プログラミングでシステムを構築する業務を行わない場合、「システム」を「エンジニアリング」していると言えるのでしょうか。<br><br>プログラミングをしないSEの業務は主にマネジメントや顧客との折衝、テストや問合せ対応など、WordやExcelを主に使うドキュメント作成ばかりです。<br><br>Excelで設計書を書き、テスト結果をスクリーンショットしてExcelに貼り、各業務フェーズの終わりに上層部へ報告する際にExcelで見栄えよく資料を作る...もはやSE＝資料エンジニアの略ではないかと思ったこともあります。<br><br>「システムを使った、もの作りをしています！」と掲げた会社で資料しか作らないとなると...必要な仕事だとわかってはいるものの考えるところがありますね。</p><h2 id="hb2d9536fa9">じゃあどうしたらいいの？</h2><p>プログラミングを勉強しましょう。<br><br>自社が使っている言語からでも、転職に向けて興味のある言語からでも良いです。<br><br>システム内製部署に部署異動を願い出て、プログラミングをする側に回してもらうのも選択肢としてはありますが、「確実に異動ができるわけではない」、「年次が上でマネジメント寄りの仕事しかさせてもらえない」というケースもあり得るので、少なくとも独学するよう行動するのが良いと思います。<br><br>プログラミングを通してSIerの仕事のクオリティが上がるならそれはそれで良いですし、転職するにしても「SIerでしたが、プログラミングは経験がある」というステータスだと完全な未経験からの転職よりも有利にはなると思います。<br><br>なんの言語をやればいいかわからない！という場合はまずJavaScriptをやってみると良いです。<br><br>ユーザーが触る画面を持つシステムを作っている場合はほぼ間違いなく(バージョンはめちゃくちゃ古いかもしれませんが)JavaScriptは使われています。<br><br>JavaScriptをおすすめする理由は以前書きました。こちらも目を通してみると良いかもしれません。<br><br><a href="[object Object]" target="_blank" rel="noopener noreferrer">プログラミング学習の最初の一歩にはJavaScriptが有力な選択肢である4つの理由</a></p><h2 id="h9be0c3393d">おわりに</h2><p>僕はユーザー系金融元請けのSIerに新卒で入社し働いていました。ユーザー系のSIerならまったり高給という巷の噂に釣られた形です。<br><br>幸い大きい企業であることからコンプライアンスの意識も高く、よく聞くデスマーチ的な会社で寝泊りは経験しませんでしたが、長い時は22時まで残業を週5で、しかも始業は8時台と、Web系エンジニア職とはかなり解離があると思っています。<br><br>最初に配属された部署がシステム内製部署だったため、Javaでのプログラミングを業務で経験できたことは運がよかったです。(今思い返すと自動テストなんてなかったのでめちゃくちゃ辛かった...)<br><br>システムの担当異動でプログラミングを業務内ですることはほぼなくなり、まさに資料エンジニアになって危機感を感じたところで退職しました。<br><br>「人も、自分も使うようなものを作って社会と自分の生活を便利にしたい」という思いがあったので、ただの資料作りよりも自分の手でプロダクトを生み出すことのできるエンジニアになりたいと思い転身しましたが、今のところは良い判断ができたんじゃないかと考えています。<br><br>文系卒でもシステムエンジニアにはなれます。引く手数多です。ただプログラミングを仕事にすることがないかもしれません。<br><br>本当にそれでいいかは考える必要があります。<br><br>経験ができたからこそわかったことなので難しいのですが、ここで書いたことは最初に内定が出たからという理由でSIerに入社を決めた当時の自分に言い聞かせたいことです。<br><br>今似たような立場に置かれている人にとって考えるきっかけになれば嬉しいです。<br><br>そして余談ですが同じ仕事をしているのに銀行からの出向で来ている同年次のメンバーの方が給料が高く部長職も出向行員でポストが埋まるので、SIerのような仕事がしたいなら最初からSIerのような子会社ではなくシステム部門に入るべきだと思います。</p>

<ol><li>SIer所属でもプログラミングをしていないなら市場価値は上がらない</li><li>SIerでマネジメントを中心にするからプログラミングはできなくてもいい...本当に？</li><li>SE＝システムエンジニア？</li><li>おわりに</li></ol>

実体験を元に、SIerでプログラミングをやらない場合は自分の市場価値が危うくなる理由を解説しました。