<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>明けましておめでとうございます。本年もどうぞよろしくお願いいたします。<br><br>新年を迎えるにあたり、2021年の目標を立てました！<br></p><h2 id="ha0845a2c09">2021年の目標</h2><h3 id="h686a30b85e">お仕事</h3><ul><li>フリーランスエンジニアとして生き残る</li><li>フロントエンドを主に扱い、クライアントの利益に貢献する</li><li>マイクロ法人を立てる</li></ul><h3 id="hd851974331">言語・フレームワーク</h3><ul><li>React Nativeを学んでスマホアプリ開発する</li><li>Hasura GraphQL Engineを使ってアプリ開発する</li><li>Prismaを使ってアプリ開発する</li></ul><h3 id="h08efe6d895">個人開発</h3><ul><li>ライブ駆動開発(<a href="https://0000.studio/gengineer" target="_blank" rel="noopener noreferrer">00:00Studio</a>)をほぼ日(not毎日)続ける</li><li>運営できるレベルのプロダクトを開発する</li><li>JAMStackブログの機能・デザインアップデートを続ける <a href="https://github.com/gengineer18/next-blog/projects/1" target="_blank" rel="noopener noreferrer">ロードマップ</a></li></ul><h3 id="h6cfaa47bdb">ブログ</h3><ul><li>週に2,3本ブログを書く</li><li>広告を入れて収益を出す</li></ul><h3 id="hdfa806e43a">資産運用</h3><ul><li>収入の5割程度を毎月資産運用に回す</li><li>小規模企業共済・iDeCoを満額使って節税する</li></ul><h3 id="h24a4d124d1">プライベート</h3><ul><li>毎月1kg体重を減らす</li><li>ほぼ日Fit Boxing2を続ける</li><li>娘の写真を毎日撮る</li><li>0時には寝る、7時には起きる</li><li>お酒を飲むのは月に1,2回程度にする</li><li>コロナが落ち着いた頃に実家に帰る</li></ul><p><br>目標だけは立派な状態になることなく、ちゃんと実績も伴う2021年にしたいと思います！</p>

<ol><li>お仕事</li><li>言語・フレームワーク</li><li>個人開発</li><li>ブログ</li><li>資産運用</li><li>プライベート</li></ol>

明けましておめでとうございます。本年もどうぞよろしくお願いいたします。2021年の目標を立てました！目標だけは立派な状態になることなく、ちゃんと実績も伴う2021年にしたいと思います！

フリーランスエンジニア2年目の2021年の目標を立てる

<p>2020年初から新型コロナウイルスの流行により、世界中で普段通りの1年は過ごせなくなるような1年でしたね。<br><br>生活様式がガラリと変わったこの1年について、自分がどういうことをしていたか振り返ってみます。</p><h2 id="h0eebb277f0">フリーランスエンジニアとして</h2><p>2019年9月にフリーランスになったため、1年以上をフリーランスとして生き残る事ができました。<br><br>2020年はフリーランスエンジニアとして計4社のクライアント様とお付き合いさせていただきました。<br><br>業界、会社の規模の大小、扱う技術などそれぞれ違いを肌で感じることができ、1つの会社で勤め上げていては経験のできないような知見を幅広く得ることができました。<br><br>フルコミットだけでなく週3、週2で並行稼働をさせていただいたり、週5勤務の傍で1日数時間副業ベースでお仕事をさせていただいたり、時間の使い方や融通をどう利かせるか、非常に勉強になった1年でした。<br><br>体感としては週5フルコミットの方がスイッチングコストの少なさやお任せいただける案件の粒度(腰を据えて取り組めるかどうか)の面で優れているなと感じたので、2021年も方針は継続したいと思っています。</p><h3 id="h2c1128326d">1社目</h3><p>フリーランスになって初めてご契約させていただいた会社で、新聞のWeb版を更新・新規機能開発をするお仕事でした。<br><br>バックエンドのテンプレートエンジンに集中していたリソースを、責務の分離・開発サイクルの高速化を行うためVue&#x2F;Nuxtを使ってのリプレースに取り組んだり、デザイナーさんと共同で既存ページのリニューアルをしていました。<br><br>コンテンツも非常に多かったので、数ヶ月スパンで各コンテンツにリニューアルをかけていくのは日々新たな発見があって楽しかったです。<br><br>4月からはコロナウイルスの影響で原則リモートワークとなりましたが、ある程度お仕事に慣れた状態でリモートワークに移る事ができたのはロスが少なくよかったことかなと思います。<br><br>技術的にもチャレンジングなことをしてみようという環境であったので、ご縁があればまた協働させていただきたいなと思っています。</p><h3 id="h303afa1500">2社目</h3><p>地方創生BtoBコミュニティプラットフォームを開発するベンチャー企業様とのお仕事でした。<br><br>ベンチャーらしくスピード感があり、ベータ版から正式版へのリリースの間にデザイン、フロントエンドアーキテクチャのブラッシュアップに取り組ませていただきました。<br><br>案件内で素のReactからNuxtへの置き換え -&gt; やっぱり既存資産を生かすためNextへ置き換えというシフトチェンジがありましたが笑 モダンフロントエンドの知見を広げる良いきっかけになりました。VueよりもReactの方がいいと思うようになったのもこの頃です。<br><br>フルコミットしたい私の意向と予算の都合で契約は満了となってしまいましたが、コロナ禍で地方創生を目指す機運は高まっていると思うので今後のご活躍が楽しみな企業様でした。</p><h3 id="ha1a53ce251">3社目</h3><p>現在もお付き合いさせていただいている企業様で、オンライン教育事業を手がけています。<br><br>昔から僕が好きなコンテンツを提供されていた企業でもあり憧れの企業様と協働できることを嬉しく思っています。<br><br>現在はメディア周りのリファクタリングに取り組んでいるのですが、ただのWebページよりも難易度は非常に高く感じていて、JavaScriptの基礎を見直さなくてはと痛感しています。<br><br>プロパーのエンジニアの方々、参画されているエンジニアの方々のレベルも非常に高く、なんとか自分の実力が見合うようにと必死です。</p><h3 id="h3427c61a08">4社目</h3><p>父の事業のお手伝いとしてWeb制作及び保守をさせてもらっています。<br><br>ホームページのリニューアルと題して、技術について当初はNuxtで静的サイト生成&amp;Netlifyにホスティングさせるように組んだのですが、ドメイン周りの変更に難があり、結果旧サイトで使っていたWordPressでのテーマ開発しなおし&amp;デザインは発注することになりました。<br><br>デザインスキルも身に付けなくてはいけないなと...WordPressはちょこちょこキャッチアップしていければ良いかなと思っています。</p><h2 id="hb93cbd3722">利用技術まとめ</h2><p>HTML&#x2F;CSS&#x2F;JavaScriptは当然のものとして割愛。<br>フォーマットはpotato4d氏の<a href="https://d.potato4d.me/entry/20201129-frontend-2020/" target="_blank" rel="noopener noreferrer">こちら</a>をまねさせていただきました。<br>業務と個人開発で使ったことのある技術を羅列しています。</p><ul><li>Language&#x2F;Platform<ul><li>TypeScript</li><li>Web Components</li><li>jQuery</li></ul></li><li>JavaScript Framework<ul><li>React</li><li>Next.js</li><li>Vue.js</li><li>Nuxt.js</li></ul></li><li>UI Library<ul><li>Material-UI</li><li>Vuetify</li><li>Chakra UI</li><li>lit-html</li></ul></li><li>Styling<ul><li>Sass</li><li>styled-components</li><li>emotion</li></ul></li><li>API Layer<ul><li>axios</li><li>Firebase</li></ul></li><li>Build Environment<ul><li>Webpack</li></ul></li><li><span style="color:#24292e">Developer Experience</span><ul><li><span style="color:#24292e">ESLint</span></li><li><span style="color:#24292e">Prettier</span></li></ul></li><li><span style="color:#24292e">Testing</span><ul><li><span style="color:#24292e">Jest</span></li><li><span style="color:#24292e">React Testing Library</span></li></ul></li><li><span style="color:#24292e">Firebase</span><ul><li><span style="color:#24292e">Firestore&#x2F;Authentication&#x2F;Storage&#x2F;Hosting&#x2F;Functions</span></li></ul></li><li><span style="color:#24292e">Backend</span><ul><li><span style="color:#24292e">PHP(WordPressをちょっとだけ)</span></li><li><span style="color:#24292e">Golang(触っただけ)</span></li><li><span style="color:#24292e">Velocity</span></li><li>GraphQL</li></ul></li><li><span style="color:#24292e">データベース</span><ul><li><span style="color:#24292e">MySQL(Google Cloud SQL)</span></li><li><span style="color:#24292e">PostgreSQL(Heroku)</span></li><li><span style="color:#24292e">Cloud Firestrore</span></li></ul></li><li><span style="color:#24292e">ミドルウェア</span><ul><li><span style="color:#24292e">Hasura GraphQL Engine</span></li></ul></li><li>アプリケーションサーバー<ul><li>Google App Engine</li></ul></li><li><span style="color:#24292e">静的サイトホスティング</span><ul><li>Vercel</li><li>Netlify</li><li>Firebase Hosting</li></ul></li><li>HeadressCMS<ul><li>Contentful</li><li>microCMS</li></ul></li><li><span style="color:#24292e">IDaaS</span><ul><li><span style="color:#24292e">Firebase Authentication</span></li></ul></li><li><span style="color:#24292e">UI Design</span><ul><li>Figma</li></ul></li><li><span style="color:#24292e">概念的なもの</span><ul><li><span style="color:#24292e">JSX</span></li></ul></li></ul><p><br><span style="color:#24292e">羅列すると長いですね笑</span><br><br><span style="color:#24292e">2020年序盤はVue&#x2F;Nuxtを中心に使っていましたが、Reactを知ってからはVueより圧倒的にReactの方が書きやすい、理解しやすい、TypeScriptフレンドリーという事がわかりReactを主軸にすることとしました。</span><br><br><span style="color:#24292e">Vueは確かにHTML,CSSが書けると書き味が良さそうに見えますが、templateに型補完が効かなかったりemitやv-modelなど双方向に影響を与え合うコンポーネントが書けるため修正の影響範囲が意外なところから発見されるパターンが起こりえて辛みも感じました。</span><br><br>2020年はNext.jsの盛り上がりが顕著で、2021年に個人開発をするならVercelでホスティングしつつNext.jsの恩恵に乗っかるのが間違いがないのかなと思いました。<br><br>また、業務でWeb Componentsを使う機会がありましたが、Shadow DOMの概念が難しかったり、開発手法はまだまだ確立されていない印象を受けました。<br><br>触っててかなり難易度が高かったなと記憶していますが、今後主流になるようなら確りとキャッチアップしたいです。<br><br>2021年はWebフロントエンドに留まらずReact Nativeでスマホアプリ開発に挑戦したりNode.jsを学習してバックエンドまで作れるようになりたいと考えています。</p><h2 id="hf8a02c5e24">プライベートの話</h2><h3 id="h6764a579bb">家族の話</h3><p>今年の3月に無事に娘が誕生しました！<br><br>スクスクと順調に大きくなってきていて、毎日かわいさが更新されていきますね。<br><br>それに伴い最近引越しをして、娘を育てやすい環境に移りました。リモートワークが中心になったので必ずしも交通の便がいいところに住む必要がなくなったのは一個人の話としてはコロナの不幸中の幸いかもしれません。<br><br>娘は「ママ」と喋れるようにはなりましたが「パパ」はもう少し時間がかかりそうです。<br><br>平均的な赤ちゃんよりも成長が速そうで、寝返りもお座りもハイハイも伝い歩きもすぐにできるようになっていました。天才かもしれません。親バカですねw<br><br>来年は手を繋いで公園でお散歩とかできるようになったらいいなぁと思っています。</p><h3 id="h1c0b6c418e">サッカーの話</h3><p>今年はコロナ禍でFC東京のサッカー観戦にスタジアムまでは2月までの2試合しか行けなかったのが残念でした。(ACLの2試合なのでJリーグは見れてない)<br><br>年明けのルヴァンカップ決勝はなんとか見に行く事ができるので、コロナをもらってこないように気をつけつつ優勝に向かって闘うチームを見届けたいと思います。</p><h3 id="h12ea2a29e6">個人開発の話</h3><p>4月頃に<a href="https://stgrmeikan.com/" target="_blank" rel="noopener noreferrer">Jリーグスタグル名鑑</a>というWebアプリをリリースしました。<br><br>しかしながらコロナの影響で今年はスタジアムグルメの提供に制限があり、自分自身もスタジアムまで行けていないということもあり盛り上がりはほぼほぼ無い状態です。<br><br>アプリ開発にも時期や旬、時勢によって影響を受けるということを身をもって学びました。<br><br>その後もちょこちょこと趣味で開発を進めましたが、リリースには至っていないもの(リリースしたけどすぐ閉じたもの)ばかりなので、Webアプリで何かちゃんと運営できるものを開発したいですね、、何かちゃんと運用できるアプリを作りたいです。<br><br>また、このブログをNext.js×TypeScript×microCMSの技術スタックで開発しました。(執筆時点ではまだ未完成ですが)<br><br>Nuxtで作ったブログよりもパフォーマンスがかなり良くなっており、Next.js、Vercelはかなり伸びそうな実感を得ています。<br><br>このブログを作るにあたり<a href="https://0000.studio/gengineer" target="_blank" rel="noopener noreferrer">00:00 Studio</a>というサイトで毎日作業配信（ライブ駆動開発）をすることにしました。<br><br>人に見られることによって作業進捗へのモチベーションを維持しています。<br><br>習慣としてかなり良いと思うので、ブログの開発が終わっても続けていきたいですね。<br><br>参考）Qiita:<a href="https://qiita.com/Hiroshiba/items/86b9ec67029d5f2b33f8" target="_blank" rel="noopener noreferrer"> 生放送駆動開発を1000日やったら進捗出たのでみんなもやろう！</a></p><h3 id="hb0d331ded4">お金の話</h3><p>フリーランスに転身してからサラリーマン時代より見た目上のお金は多く入るようになったので、投資を勉強して投資信託や米国高配当ETFを積立購入しています。<br><br>税金や投資などを知ると、これまでの浪費が本当にもったいなかった、社会人になってすぐ投資を始めておくべきだったと後悔するくらいでした。<br><br>特にふるさと納税はもっと早くやるべきでした。得しかしない制度ですね。<br><br>フリーランスにとって退職金は存在しないのでiDeCoや小規模企業共済などを使ってうまく節税・老後の資産形成をしなくてはと思っています。<br><br>楽天経済圏にどっぷり浸かることでポイントで生活費を支払い、支出を最適化してより自由に過ごせるように来年も頑張りたいと思います。<br><br>FC東京＆西武ファンですが5と0のつく日の前日は楽天・ヴィッセル神戸に勝ってもらってもいいかなと笑</p><h2 id="hcbec2bf0d9">終わりに</h2><p>2020年もあっという間に過ぎました。<br><br>仕事にもコロナの影響はありましたが、リモートワークを中心にしたことによってワークライフバランスはかなり向上したと思っています。<br><br>通勤ってストレスなんだなぁ...というのと自分が朝9時前にオフィスに着いて仕事を始められるような体にはできていないという事がよくわかりました笑<br><br>2021年も引き続きコロナの影響は残り続けそうですが、自分も家族も健康には気をつけて過ごしていきたいです。<br><br>いちエンジニアとしても来年はさらにスキルアップしていきたいです！</p>

<ol><li>フリーランスエンジニアとして</li><li>利用技術まとめ</li><li>プライベートの話</li><li>終わりに</li></ol>

フリーランスエンジニアとしての2020年振り返りです。今年はフロントエンドを中心に技術を習得できた一年でした。2021年も引き続き精進します。

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

フリーランスエンジニア2年目の2021年の目標を立てる

フリーランスフロントエンドエンジニアが2020年を振り返る