アップルが発売する「AirPods(第3世代)」を購入してみました！ 値段は、23,800円です！ <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/350f49c22d024e47abea2e9e376f907c/IMG_9460.jpg?w=500&amp;h=190" alt=""> 今回は、AirPods(第3世代)のレビューをお届けします。 <h1 id="h2c2e759c86">まずは見た目</h1>箱はこんな感じです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/7b0ca35fb997402ebe90c2cab0d75b20/IMG_9446.jpg?w=500&amp;h=506" alt=""> Apple製品の開封前はいつもワクワクします。 それでは、開封していきたいと思います〜 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/db06535d31f048988000083fd7efb289/IMG_FB7388A52416-1.jpeg?w=500&amp;h=292" alt=""> おなじみの、「Designed by Apple in Calfornia」がお出迎えしてくれます。 箱の内容物は左から、充電ケーブル(Lightning to type C)、AirPods本体、説明書と割とシンプルです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/b04c183e28d246d5952c5057194cf2a2/IMG_F0361EC39D0A-1.jpeg?w=500&amp;h=316" alt=""> 充電ケースを開けてみると、こんな感じで収まっています。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/dd91b056afc74ef5aeeb9c538c24d51a/IMG_CD5C05F0EDC0-1.jpeg?w=500&amp;h=453" alt=""> <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/3e6f90eacb5d4a80ae83dcc37f43183d/IMG_9450.jpg?w=500&amp;h=374" alt=""> さて、AirPods(第３世代)をとりだしてみます。 見た目は以下のような感じで、デザインは従来のものと比べて大きくは変わりません。 サイズは高さ30.79mm、幅18.26mm、厚さ19.21mm、重量4.28gです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/a15e7b819d624812877b1f5c58701a87/IMG_5DF03EC76E53-1.jpeg?w=400&amp;h=557" alt=""> 非常にコンパクトです。 <h1 id="h896f814f60">装着してみた</h1>耳につけてみると、良い感じにフィットします。 第2世代に比べて、かなり装着感が安定しやすい形だと思います。 ポロッと落ちてしまう余計な心配は減りました。 また、AirPods(第３世代)はカナル型ではないので、長時間つけていても気になりませんでした。 あと、第二世代に比べて、イヤホンの足が短くなっているのもデザイン的にGoodです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/e6002d7ca269465584ae0bc0f64d7a57/IMG_B8FE6150FD03-1.jpeg?w=300&amp;h=590" alt=""> ただ、開放型のイヤホンなので、普通に音漏れはしますし、外の音はもちろん入ってきます。 <h1 id="hc4af3e9c51">音の感想</h1>このイヤホンは開放型のイヤホンなので、音の広がりが自然で開放的です。 透明感というか音の鮮明さが際立っていると思います。 その反面、ド低音は弱く、低音に特化したタイプではないと思いました。 全体的に音は軽いという印象ですね。 ただ、開放型のイヤホンにしては、低音は出ている気はします。 装着感はストレスが少なく、音もクリアで開放的なので個人的に結構勧めです！ あと、第３世代より空間オーディオが搭載されています。 空間オーディオとは、ドルビーアトモスが利用されており、通常のステレオ再生を超えた豊かな音場の広がりを感じられる、新しい立体音楽体験のことを言います。 確かに、聞いていて、空間オーディオに対応した音源を聞くと、左右に加えて高さ方向も含んだ立体的な音空間をリスナーに提供している感じがあります。 さすが、Appleですね。最高です。 空間オーディオをオンにすると以下の画像のように認識されます。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/8e7fdcd2a46d4641bf24c45e7bbc77e9/IMG_9458.jpg?w=500&amp;h=757" alt=""> <h1 id="h706bd41664">バッテリーについて</h1>AirPods(第３世代)は6時間駆動します。 ちなみに、AirPods(第2世代)は5時間駆動で、AirPods Proは4.5時間駆動なので、いままでのAppleのワイヤレスイヤホンシリーズの中では最長のバッテリー駆動を誇っています。 ただ、一点注意があります。 AirPods(第３世代)で、空間オーディオを利用し続けた場合は最大5時間駆動になります。 (ちなみに、バッテリーケース充電を利用した場合は、最大30時間の合計再生が可能です。) また、バッテリーケース自体は第2世代ではワイヤレス充電ができなかったんですが、第3世代からはワイヤレス充電ができます。 実際にバッテリーケースをワイヤレス充電してみるとバッテリーケースの中央が緑色に光ります。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/b9c8ad52fcc34e9382029e5bc594a53b/IMG_DFF76ECAAF4D-1.jpeg?w=500&amp;h=639" alt=""> <h1 id="h78c77b354c">今までのモデルとの比較とまとめ</h1><img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/ba2acd926e4a42f1b668f7fd442ba089/%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-10-26%2023.39.44.png?w=500&amp;h=757" alt=""> 第2世代から変わった点は、「空間オーディオ」と「ダイナミックヘッドトラッキング」が搭載されて音を楽しむエンタメ力が向上したのと、バッテリー駆動時間、耐水性能が向上した点でしょうか。 実際に使ってみた感覚だと、耳に優しい装着感 &amp; 音質とバッテリー駆動時間が改善されたAirPodsといった感じで、バランスが良いイヤホンに仕上がっているなという感想です。 カナル型イヤホンが嫌という方には、このAirPods第3世代はとてもおすすめできると思いました。

AirPods(第３世代)が届いたので、早速レビューしてみた。

<h1 id="h5bdb7c5c52">記事の目的</h1>関数の型付けといってもどこまでガチガチにやるのか？という議論があると思います。 今回はその議論の参考となる記事を書きたいと思い、関数の型付けのレベルを段階に分けて説明していこうと思います。 <h1 id="h013472d402">TypeScriptで関数をガッチガチにするまでのロードマップ</h1><h2 id="h84238380ca">第0段階 (型付けなし😱)</h2> 以下に<code>x + y</code> で足し算を行うJavaScriptで定義したadd関数を記述してみました。 こちらはまだ型付けは一切していない状態です。 (ちなみに以下のコードは型付けをしていないのでバグの温床となるリスクが高いです。その理由は<a href="https://www.atukan-blog.com/blog/7gocwtp2qu_u" target="_blank" rel="noopener noreferrer">こちら</a>で説明しています。)<pre><code>let add = (x, y) =&gt; {
&nbsp;return x + y;
};

console.log(add(1,2)); //3</code></pre> <h2 id="hfde36817b6">第1段階 (最低限の型付け😀)</h2> 上記のコードに型を追加してみると以下のようになります。 それぞれのパラメータに型を追加し、関数自体に戻り値の型も追加しています。 これにより、例えば引数に文字列が渡されるよなバグ等を未然に検知できる状態になりました😀<pre><code>let add = (x: number, y: number): number =&gt; {
&nbsp;return x + y;
};

console.log(add(1,2)); //3</code></pre> <h2 id="h185b7e13a7">第2段階 (ある程度の型付け😎)</h2> add関数は、<code>２つの数値x,yの引数を持ち、返り値も数値</code> ということが分かっていたとします。 この分かっている情報も型として定義しちゃいましょう！ <code>２つの数値x, yの引数を持ち、返り値も数値</code> を型で定義すると<code>(x: number, y:number) =&gt; number</code>のように記述できます。 これを使ってletで定義されたaddに対して型付けすると以下のようになります。<pre><code>let add: (x: number, y: number) =&gt; number = ( //: (x: number, y: number) =&gt; number を上記ソースコードのaddの横に追加しただけ
&nbsp;x: number,
&nbsp;y: number
): number =&gt; {
&nbsp;return x + y;
};

console.log(add(1,2)); //3</code></pre> <h2 id="hcaa229d2df">第3段階 (良い型付け🤤)</h2> <code>(x: number, y:number) =&gt; number</code> のxとyの名前は自由に決めることができます。 今回はadd関数が何をする関数なのかをわかりやすくするために、<code>x</code> + <code> y</code> つまり、<code>baseValue</code> + <code>increment</code>と意味が伝わるように表記してみます。 つまり、<code>(x: number, y:number) =&gt; number</code> を<code>(baseValue: number, increment:number) =&gt; number</code>のようにします。 これにより、addの型をみるだけで、addがどのようなことをする関数なのかが分かりやすくなりコードの可読性が高まります。 関数の役割を把握できるということから、TypeScriptは設計書的な役割も果たしているとも言えます。<pre><code>let add: (baseValue: number, increment: number) =&gt; number = (
&nbsp;x: number,
&nbsp;y: number
): number =&gt; {
&nbsp;return x + y;
};

console.log(add(1,2)); //3</code></pre> <h2 id="h2397c339dc">第4段階 (ガッチガチ😈)</h2>上記のaddの型はtypeで外だしすることも可能です。 こっれにより、addTypeを他の関数に流用することもできますし、コード自体も見やすくなります。<pre><code>// add関数のパラメータとリターン型をここで定義する
type addType = (baseValue: number, increment: number) =&gt; number;

// 上記で定義したaddTypeを活用
let add: addType = (
&nbsp;x: number,
&nbsp;y: number
): number =&gt; {
&nbsp;return x + y;
};

console.log(add(1,2)); //3</code></pre> <h1 id="ha214098e44">まとめ</h1>以上、TypeScriptで関数をガッチガチにするまでのロードマップでした。 型付けするといってもどこまでやるのかという議論があると思いますが、その際にこの記事がお役に立てれば幸いです！

TypeScriptで関数をガッチガチにするまでのロードマップ

こんにちは。 &nbsp; 最近Flutterが流行っているということで、Flutterでアプリ作成して、AppStoreにアプリリリースしてみました。 &nbsp; もともと作ってみたいアプリがありまして、 「英単語とその意味」をスマホに定期的にpush通知するアプリを作ってみました。 <a style="color:#47a89c" href="https://apps.apple.com/jp/app/%E8%8B%B1%E5%8D%98%E8%AA%9E%E9%80%9A%E7%9F%A5/id1582213197?uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="noopener noreferrer">英単語通知</a> まずはじめにアプリの簡単な紹介をさせてください！ <h1 id="hf64589793f">アプリ説明</h1>アプリを起動しなくてもプッシュ通知により片手間で英単語を学習できるというアプリです。 英単語をひたすら覚えるという学習にはやる気が出ないという方も多いはず。 そんな方におすすめなのがこのアプリです。 英単語通知アプリでは、覚えるべき「単語」と「意味」をプッシュ通知してくれるため、通勤時間中やトイレの中など隙間時間でアプリ起動の手間もなくチャットメッセージを受けるような感覚で英単語学習が可能です。 単語の難易度やプッシュ通知の時間間隔、非通知時間帯が選択可能です。 TOEIC頻出単語にも対応しているので、試験対策にもおすすめです。 ストレスなく効率的に英単語力を上げたい方はぜひとも活用したいアプリです。 &nbsp; &nbsp; それでは、このアプリを作って、リリースするまでのざっくりな過程をこの記事に記していこうと思います！ <h1 id="h216afcd7fc">1日目 ~ 5日目 (Flutter学習期間)</h1>まずはFutterを勉強しよう！ということで、Udemyで学習しました。 自分はこのコンテンツで学習しました。<iframe frameborder="0" allowfullscreen="true" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fflutter-bootcamp-with-dart%2F"></iframe><a style="color:#47a89c" href="https://www.udemy.com/course/flutter-bootcamp-with-dart/" target="_blank" rel="noopener noreferrer">www.udemy.com</a> <h1 id="h390cedcccd">6日目〜12日目 (アプリ作成期間)</h1> &nbsp;以下のような構成のアプリを作ろうとまずは設計しました。 ①の通知設定では、 ・どのレベルの単語を通知するか ・何分間間隔で通知するか ・通知したくない時間帯 を設定することができます。 その情報をFireStoreというFirebaseのデータベースに各ユーザーごとに保存しておきます。 &nbsp; ②の各ユーザの設定情報を参照では、 FirebaseのcloudFunctionsという機能を使っていて、定期的に各ユーザの通知設定情報を参照するスケジューリングしています。 &nbsp; ③の通知実行では、 FIrebaseCoudMessagingという機能を利用して、Push通知をしています。 &nbsp; このような機能を約6日で作成しました。 <h1 id="h0007064ac4">12日目〜14日目(アプリリリース期間)&nbsp;</h1>次にアプリリリース開始！となるのですが、ここが結構めんどくさかったです。 この記事を参考に勧めました。<iframe frameborder="0" allowfullscreen="true" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Fkasa_le%2Fitems%2Ffed9f25b92091bd162ce"></iframe><a style="color:#47a89c" href="https://qiita.com/kasa_le/items/fed9f25b92091bd162ce" target="_blank" rel="noopener noreferrer">qiita.com</a> &nbsp; 12日目に申請してから2日後の14日目にようやく申請が通り、見事AppStoreに自分が作成したアプリが公開されました！！ こんなかんじです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/754a12528b3c4c32ac9668c3698ec2dc/%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-10-23%2022.46.07.png" alt=""> ここに表示されたときは、正直かなり感動しました。。。 <h1 id="h3bcda3e6b0">最後に</h1>いや〜、AppStoreに自分の成果物が掲載されるのはとても嬉しいですね。 今後も、ほしいアプリがあったら作成していこうと思います。

2週間でFlutter初心者がアプリ作成して、AppStoreにリリースしてみた。

こんにちは、あつかんです。 Macユーザーの方はファンクションキーを使用するとき、わざわざfnキーを押しながら使用していますか？ ファンクションキーを多様する人にとってはこれはわずらわしい操作ですよね。 &nbsp; そこで、今回はfnキーを押さなくてもファンクションキーを機能させる方法を紹介していこうと思います。 <h1 id="hc354d8821e">方法</h1>まずは以下の画像のりんごマークをクリックしてください。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/e66b902909c6453e8661af4ea78ddbaf/%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-10-23%2022.39.02.png" alt=""> こんな画面が開かれるので矢印のところをクリック <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/b1e087d6d2b545889a4ce5539eac172b/%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-10-23%2022.39.25.png" alt=""> 以下の画面が現れるので、キーボードアイコンをクリック <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/e36b49f503e743d5af7187a1320fd129/%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-10-23%2022.39.47.png" alt=""> 以下の画面の、"F1、F2などのキーを標準のファンクションキーとして使用"という欄にチェックを入れてください。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/6af4819c46ef4e5190d533be129d26a4/%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-10-23%2022.40.11.png" alt=""> 以上です。 簡単でしたね！ &nbsp; これでfnキーを押しながらファンクションキーを押すという鬱陶しい作業から解放されます。 &nbsp; ここで、ファンクションキーに重複されている機能である音量調整ボタンや画面の明るさ調整ボタンはどうやって機能させればいいの？って疑問が発生します。 この場合は逆に、fnキーボタンを押しながらそのボタンを押すことによって解決できます。 &nbsp; お役に立てたなら幸いです。 では、あつかんでした〜

【Macユーザー必見】fnキーを押さずにファンクションキーを使用する方法

こんには、あつかんです。 この記事を読んでいる人はおそらくMacユーザーの方だと思います。 Macユーザーの方は、かなを漢字に変換する際にエンターを２回押していますか？ 私は以前、２回エンターを押していました。 これってかなりめんどくさくないですか？ めんどくさいと思っているあなたへ、その解決方法を紹介していこうと思います！ <h1 id="had0b1b94af">解決方法</h1>まずは、リンゴマークをクリックして、システム環境設定をクリック！！ <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/7b26991e79ea4af7ad40de3c419364ca/%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-10-23%2022.33.52.png" alt=""> 次はこんな画面が表れます。矢印のところをクリックしてみてください。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/f197db2cbece44cc82bbbee4e5eee01e/%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-10-23%2022.34.40.png" alt=""> そしてキーボードアイコンをクリックします。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/0227c7b302ae468dbeb8115d1789b9a0/%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-10-23%2022.35.01.png" alt=""> キーボードアイコンをクリックすると以下の画面が現れるので、入力ソースってボタンをクリックしてみてください。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/53d2c24d8df746429960ac6908257194/%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-10-23%2022.35.26.png" alt=""> すると、以下の画面が現れます。その画面にあるWindows風の操作キーのチェック欄をチェックしてください。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/f887602c446f4785b47bdd0efbea1c93/%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-10-23%2022.35.53.png" alt=""> 以上です。 とても簡単でしたねｗ これで二回エンターを押すという鬱陶しさから解放されます！ ちなみに自動で変換されるのも鬱陶しいと思っている方は、ライブ変換のチェックを外してみてください。 私はライブ変換も鬱陶しいと思っていたので無効化しました。 &nbsp; これで今後は快適変換ライフが送れますね！！ &nbsp; ではでは〜

Macのエンター2回の変換が鬱陶しいと思っている方へ

こんにちは。 &nbsp; あつかんです。 最近、お金のことを少しずつ勉強しています。 それに伴い、銀行にあずけている現金比率を下げようと思っている今日この頃です。 理由としては、以下の2つ。<ul><li>今の日本の銀行の金利がかなり低いため、資産価値が上がらない。</li><li>株価が上昇しても、資産価値があがらないので機会損失と感じる</li></ul>ということで、一定の現金以上をもつということがもったいないというデメリットを感じているわけです。 (銀行に現金を預けておくことのメリットは強いて言うならば安心感でしょうか。) 個人的には現金保有率が高いというのは、何も生み出さないので、それもそれで問題だと思っています。 なので、現金保有率をある一定水準まで抑えて、それ以外は現金以外の資産に変換させようと思っています。 &nbsp; ってなかんじで、まずは現状把握ということで、自分の資産の比率をまとてみようと思います。 &nbsp;<h4 id="hb744016ffb">資産構成</h4>自分の資産は以下で構成されています。<ul><li>現金</li><li>株式</li><li>確定拠出年金</li><li>仮想通貨</li></ul>円グラフでそれぞれの割合をだすとこんな感じです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/4b0fc9a0cd3d4b8b8d33568ebff41e9e/%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-10-22%207.05.51.png" alt=""> <h1 id="hb744016ffb">資産構成</h1>現金保有率がある程度低いですが、もうすこし下げて行きたいところ。 目安は20%程度の現金があればいいかなと考えていあす。 &nbsp; 株式の率が高いですね。 自分は以下の企業に投資していまして、成績としてはこんな感じ。<ul><li>プレイド&nbsp;- 187,550円</li><li>ソフトバンク + 16,9010円</li><li>ServiceNow + 18,122円</li></ul>&nbsp;ほぼプラマイゼロ。 プレイドさんが、今後伸びていくことを期待しています。 ちなみに、ソフトバンクからは配当金を年5万円ほど頂いています。 &nbsp; 投資信託は、確定拠出年金です。 企業型なので、働いている会社から月々数万円頂いていまして、それを運用しています。 &nbsp; 仮想通貨は、、、<ul><li>ETH</li><li>IOST</li><li>XLM</li><li>KISHU</li></ul>を持っていますが、どれも下がっていまして、仮想通貨では約37万円程度損してます。笑 まぁ、経験と勉強はできたかなとは思っています！笑 仮想通貨はちょっとボラリティがたかすぎなので、今後十数年後上がっていたらラッキー的な気持ちで、当分の間は放置します。笑 &nbsp;<h1 id="h0378d5c43d">今後の方針</h1>今後は、<ul><li>分散投資</li><li>積立投資</li></ul>でやっていこうと思っています。 &nbsp;<h2 id="hba7a691914">分散投資</h2>分散投資の観点からすると、今保有している3つの銘柄だけだと少ないとおもうので、投資先をすこしずつ増やしていこうと思います。 ちなみに今きになっている企業、<ul><li>ソフトバンクグループ</li><li>Asana</li><li>アトラシアン</li><li>NewRelic</li><li>Okta</li></ul>あたりです。直近ではソフトバンクグループに投資しようと検討中。 &nbsp;<h2 id="hccec33bc02">積立投資</h2>積立投資では、積立Nisaと投資信託をとりあえずやってみようかなと思います。 最近PayPay銀行口座を作成してので、PayPay銀行で積立Nisaをしようかな。 積立Nisaは年間最大40万まで投資できます。 通常、金融商品から得られた利益は約20%ほどが税金として取られますが、Nisaであればその分の税金がとられないからお得になるわけです。 &nbsp; ということで、今後は、<ul><li>分散投資</li><li>積立投資</li></ul>で資産形成していこうと思います。 &nbsp; ただ、投資した資産はリスク資産でもありますので、万が一のために現金をある程度持っておく必要はありますね。 個人的には見解としては、自分の生活費 × 6ヶ月分 以上の現金を維持していれば、それ以外はリスク資産に投じても問題ないと思っています。 ちなみに、自分の1ヶ月あたりの生活費は、こんな感じです。 項目 コスト(円) 家賃 96000 光熱費 12000 通信費 8000 交通費 10000 食費 40000 雑費 20000 合計 186000 &nbsp; &nbsp; &nbsp;なので、1,116,000円の現金があれば、それ以上の現金は余剰資産と捉えて、投資に回しても良いと判断できます。 家賃、食費、雑費(服とか、日用品とか)はおさえられそうなので、1ヶ月16万円程度にはしておさえて、もうすこしリスク資産に回していきたいところ。<h4 id="hcf83e1357e"> </h4> <h1 id="h3bcda3e6b0">最後に</h1>今回のブログでは自分の資産がわからない程度に色々赤裸々に書いてみました。 なにか参考になれば幸いです。 &nbsp; ではでは〜

自分の資産のポートフォリオを赤裸々にまとめてみた

Next.jsでGoogleAnalyticsを導入する方法が結構大変でしたので、ほぼコピペでGoogleAnalyticsを導入するためのブログを書いてみました。<h2 id="h47aaf9f946"> .envファイルの作成と修正</h2> まず、プロジェクトのルートに.envファイルを作成します。 作成したら、以下の内容を記述します。<pre><code>NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=googlaアナリティクスのID</code></pre>googleアナリティクスのIDは以下の手順で取得できます。<ul><li>設定→データストリーム→ウェブタグを選択して該当箇所をクリック</li></ul><img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/5045b46893b14ce38f847543261e48f8/%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-10-18%2021.20.32.png" alt=""> <ul><li>下記画像の<code>ここのID</code>に記載されているIDが<code>googleアナリティクスのID</code>です。</li></ul><img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/79b38b3496a9474f9692089e0a9422e9/%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-10-18%2021.22.46.png" alt=""> <h2 id="hfc84b6baa5">gtag.jsの作成</h2>libs/の直下にgtag.jsファイルを作成します。(libsディレクトリがない場合は、プロジェクトルートにlibsディレクトリを作成してください。)<pre><code>export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''

export const existsGaId = GA_ID !== ''

export const pageview = (path) =&gt; {
&nbsp; window.gtag('config', GA_ID, {
&nbsp; &nbsp; page_path: path,
&nbsp; })
}

export const event = ({action, category, label, value = ''}) =&gt; {
&nbsp; if (!existsGaId) {
&nbsp; &nbsp; return
&nbsp; }
&nbsp; window.gtag('event', action, {
&nbsp; &nbsp; event_category: category,
&nbsp; &nbsp; event_label: JSON.stringify(label),
&nbsp; &nbsp; value,
&nbsp; })
}</code></pre> <h2 id="h66dd646881">GoogleAnalytics.jsの作成</h2>components/の直下にGoogleAnalytics.jsを作成し、以下の内容を記述します。(componentsディレクトリがない場合は、プロジェクトルートにcomponentsディレクトリを作成してください。)<pre><code>import Script from 'next/script'
import { existsGaId, GA_ID } from '../libs/gtag'


const GoogleAnalytics = () =&gt; (
&nbsp; &lt;&gt;
&nbsp; &nbsp; {existsGaId &amp;&amp; (
&nbsp; &nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Script defer src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Script id="ga" defer strategy="afterInteractive"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {`
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.dataLayer = window.dataLayer || [];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function gtag(){dataLayer.push(arguments);}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gtag('js', new Date());
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gtag('config', '${GA_ID}');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Script&gt;
&nbsp; &nbsp; &nbsp; &lt;/&gt;
&nbsp; &nbsp; )}
&nbsp; &lt;/&gt;
)


export default GoogleAnalytics</code></pre> <h2 id="h1dbc07b44d">usePageView.jsの作成</h2>hooks/の直下にusePageView.jsを作成し、以下の内容を記述します。(hooksディレクトリがない場合は、プロジェクトルートにhooksディレクトリを作成してください。)<pre><code>import { useEffect } from 'react'
import { useRouter } from "next/router";
import { existsGaId, pageview } from '../libs/gtag'

export default function usePageView() {
&nbsp; const router = useRouter()

&nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; if (!existsGaId) {
&nbsp; &nbsp; &nbsp; return
&nbsp; &nbsp; }

&nbsp; &nbsp; const handleRouteChange = (path) =&gt; {
&nbsp; &nbsp; &nbsp; pageview(path)
&nbsp; &nbsp; }

&nbsp; &nbsp; router.events.on('routeChangeComplete', handleRouteChange)

&nbsp; &nbsp; return () =&gt; {
&nbsp; &nbsp; &nbsp; router.events.off('routeChangeComplete', handleRouteChange)
&nbsp; &nbsp; }
&nbsp; }, [router.events])
}</code></pre> <h2 id="h42947f2c61">_app.jsの修正</h2>pagesディレクトリの_app.jsがあると思いますので、以下<code>//追加</code>と記載してある行を追加してください。<pre><code>import React from 'react'

import usePageView from '../hooks/usePageView' // 追加
import GoogleAnalytics from '../components/GoogleAnalytics' // 追加

const App = ({ Component, pageProps }) =&gt; {
 usePageView() // 追加
 return (
 &lt;&gt;
 &lt;GoogleAnalytics /&gt; // 追加
 &lt;Component {...pageProps} /&gt;
 &lt;/&gt;
 )
}

export default App</code></pre><h2 id="hcf83e1357e"> </h2>以上で、Next.jsでGoogleAnalyticsを使うための設定は完了となります。 あとはビルド&amp;デプロイして実際にアクセスし、GoogleAnalyticsを確認してみましょう！ 以上です！

【ほぼコピペで実装】Next.jsにGoogle Analyticsを導入する方法

<h2 id="h31c0fde886">本記事の目的</h2>jsonデータを見やすくする方法を紹介します。 <h2 id="h1019f6a808">jqコマンドでjsonデータを見やすくる</h2><code>jq</code> コマンドを使うことでjsonデータを見やすくすることが可能です。 まずは<code>jq</code> コマンドをインストールしましょう。 <pre><code>brew install jq</code></pre> では早速<code>jq</code> コマンドを使ってみましょう。 以下のようなデータがあったとします。<pre><code>[{"name": "taro", "age": 10},{"name": "ziro", "age": 20},{"name": "saburo", "age": 30}]</code></pre> こちらのデータをjqコマンドを使って出力すると<pre><code>echo '[{"name": "taro", "age": 10},{"name": "ziro", "age": 20},{"name": "saburo", "age": 30}]' | jq</code></pre> このようになります。<pre><code>[
&nbsp;{
&nbsp;&nbsp;"name": "taro",
&nbsp;&nbsp;"age": 10
&nbsp;},
&nbsp;{
&nbsp;&nbsp;"name": "ziro",
&nbsp;&nbsp;"age": 20
&nbsp;},
&nbsp;{
&nbsp;&nbsp;"name": "saburo",
&nbsp;&nbsp;"age": 30
&nbsp;}
]</code></pre> jqコマンドを使わない場合は、<pre><code>echo '[{"name": "taro", "age": 10},{"name": "ziro", "age": 20},{"name": "saburo", "age": 30}]'</code></pre> このようになります。<pre><code>[{"name": "taro", "age": 10},{"name": "ziro", "age": 20},{"name": "saburo", "age": 30}]</code></pre><code>jq</code> コマンドを使わない場合は見にくいですね。 <h2 id="ha214098e44">まとめ</h2>jsonのデータを出力する時は<code>jq</code> コマンドを使いましょう！

【jq】jsonデータを見やすくする

<h2 id="h0118c3f969">この記事の目的</h2>自分のQiitaの記事のVIew数とLGTM数を取得する方法を説明します。 本記事を作成するにあたって<a href="https://qiita.com/Sho-heikun/items/6d5b938d1ea4adb89a08#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E7%99%BA%E8%A1%8C%E6%96%B9%E6%B3%95" target="_blank" rel="noopener noreferrer">こちら</a>の記事を参考にさせていただきました。 <h2 id="h95b6231649">VIew数とLGTM数を取得するAPI</h2> まずはじめに<code>jq</code> コマンドをインストールしましょう。 <code>jq</code> コマンドはAPIの返却形式のJSONを見やすく整形してくれます。 <pre><code>brew install jq</code></pre> 次に、APIを実行するために<code>アクセストークン</code>を取得しましよう。 <a href="https://qiita.com/settings/applications" target="_blank" rel="noopener noreferrer">こちら</a>から取得してください。 取得したら以下のコマンドにパラメータ入力してください。 パラメータは以下の2つです。<ul><li> <code>アクセストークン</code> </li><li><code>取得したい記事数</code> &nbsp;</li></ul> <pre><code>curl -sH 'Authorization: Bearer アクセストークン' \
"https://qiita.com//api/v2/authenticated_user/items?page=1&amp;per_page=取得したい記事数" \
| jq -r ".[].id" \
| xargs -P 3 -I {id} curl -sH 'Authorization: Bearer アクセストークン' https://qiita.com/api/v2/items/{id} \
| jq '"\(.title), VIEW: \(.page_views_count),&nbsp;LGTM: \(.likes_count)"'</code></pre> パラメータを入力したら、あとは<code>Terminal</code> などでにコマンドを貼り付けて実行するだけです！ 実行すると以下のような情報を取得できます。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/47a348844dfa475ab8f1ce6f21289f01/%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-10-18%2011.14.14.png" alt=""> <h2 id="ha214098e44">まとめ</h2>本記事では、QiitaのVIew数とLGTM数をAPIで取得する方法をご紹介しました！

QiitaのVIew数とLGTM数をAPIで取得する

<h1 id="h9707d3a59a">概要</h1>TypeScriptがなぜ必要なのかをざっくりと把握することを目的とします。 <h2 id="h2295b759c0">対象者</h2>TypeScript聞いたことあるけど、なにがいいんだろうと思っている方。 <h2 id="hc6b05770d1">JavaScriptの簡単な概要と問題点について</h2>TypeScriptはとJavaScriptのスーパーセット(上位互換)です。JavaScriptでできることはTypeScriptでもできます。 TypeScriptという言語はJavaScriptの問題点を補うために生まれました。 そのため、まずはじめにJavaScriptの概要と問題点を簡単に抑えておきましょう。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/08c5b8d7d04844df8100ebff82b5fd10/superset.png?w=300&amp;h=298" alt=""> <h2 id="h2dd7e59397">JavaScriptの概要</h2>JavaScript (ECMAScript としても知られています) は、ブラウザ用のスクリプト言語としてその生涯をスタートさせました。 JavaScripを利用することで、Webサイトにて複雑な機能を実行することができます。 例えば、Webサイトを訪問したとき、ポップアップ画面を表示したり、アニメーションが動いているのを見たことがあるのではないでしょうか？ あのようなブラウザが「動く」ために、指示を出しているプログラミング言語としてJavaScriptが利用されています。 また、インターネットの普及に応じてブラウザを利用するユーザーが増えてきたことから、ますますJavaScriptの人気が出てきました。 それに伴い、Webブラウザの開発者は、実行エンジンの最適化やJavaScriptでできることの拡張 (API の追加) によってJavaScriptの需要の増加に対応してきました。そして、Web開発者はさらにJavaScriptを使用するようになりました。 さらには、node.jsを使ってバックエンドをJavaScriptで実装するなど、ブラウザ以外でも利用できるほど普及してきました。 最近では、JavaScriptだけを使ってフロントエンドとバックエンドを開発するフルスタックエンジニアがたくさんいます! <h2 id="h4147897c4a">JavaScriptの問題点</h2>上記の歴史で発展してきたJavaScriptですが、この言語には実は粗末さがあります。 以下にいくつかの例を挙げてみましょう。 <ul><li>"" == 0の条件判定がTrueとなってしまう。</li></ul>&nbsp;<pre><code>if ("" == 0) {
// 条件式の結果はTrueとなりif文が実行される
}</code></pre> <ul><li>以下のように文字列をいれた変数に数値を再代入できてしまう。</li></ul> <pre><code>let moji = 'Hello World!';
moji = 10;</code></pre> ほとんどのプログラミング言語は、コンパイル中、つまりコードが実行される前に上記のような事象に対してエラーを返却してくれます。 ですが、JavaScriptにおいてはこのような予期しない動作を許してしまう問題点があります。 <h2 id="h4994ad2229">TypeScriptの特徴</h2>TypeScriptの最大の特徴は「静的型付け言語」であることです。 この特徴により、TypeScriptは型定義や型推論を行うことができます。 今回は型推論について紹介していこうと思います。 型推論とは文字の通り、TypeScriptが変数や関数の戻り値などの型を推論してくれる便利な機能です。 型推論ができると何がいいのでしょうか？ たとえば以下のコードを書いたとします。 <pre><code>let moji = 'Hello World!';
moji = 10;// error : Type 'number' is not assignable to type 'string'.</code></pre> エラーとして、「型「number」は、型「string」には代入できません。」という内容が返却されています。 mojiという変数は最初にstring型とTypeScriptでは型推論されたため、その後にnumber型の10を代入ができないということを伝えているわけですね。 これは型を推論したからこそ検知できたわけです。 このようにJavaScriptでは型の矛盾を許していましたが、TypeScriptで矛盾を検知できるため、エラーを未然に防ぐことができます。 <h2 id="ha214098e44">まとめ</h2>以上がTypeScriptの特徴の１つである型推論についてでした！ 型推論だけでも大いにメリットはありますね。 この記事で`なぜTypeScriptが必要なのか？`の理解が進みましたら幸いです。 今後は型定義について紹介していこうと思います。 <h3 id="h7605dc6208">参考文献</h3><a href="https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html" target="_blank" rel="noopener noreferrer">https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html</a>

なぜTypeScriptが必要なのか？

<h2 id="hac84e4e38d">モチベーション</h2>学習したニューラルネットワークの中身ってどうなっているんだろう？と思ったのがきっかけで本記事を書いてみました。 そのため、ニューラルネットワークの内部状態を観察し、実際に何が起きてるのか理解するために重みを可視化してみました！<img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/4556ceda16704f39a2754995e4a81e3f/%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-10-13%201.50.01.png?w=500&amp;h=280" alt=""> <h2 id="h8a175a9b0e">前提</h2>MNISTの手書き文字を分類するよう学習したネットワークの重みを可視化することでニューラルネットワークの内部状態を観察してみようと思います。 以下の画像では6の画像を入力して、出力ニューロン0~9の6番目の出力ニューロンの値が一番高いので、入力画像は6であると判断できています。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/de100fd7e0174d9f9808f61c0df0395f/%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-10-17%205.36.56.png" alt=""> そのように判断させるためには学習が必要となります。 上記のニューラルネットワークは以下の図で示したような誤差逆伝播法で学習させました。 誤差逆伝播法を簡単に説明すると ・ ニューロンの重みWを誤差が小さくなる方向へ推移させる取り組みのこと(誤差小さくする行いをいわゆる学習と呼びます。) ・ 誤差関数の傾きが正なら重みを小さく、傾きが負なら重みを大きくしながら誤差の値を小さくする(誤差が小さくなる方向は、勾配の情報で判断する) の２点です。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/1106ffddf9624d9d85dd4873bf3762b2/%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-10-17%205.37.22.png" alt=""><h2 id="heee29fd161">重みの可視化</h2> まずは0に対する確率値を出力するニューロンの重みを可視化してみよう思います。 0なので最初(0番目)の出力ニューロンへの繋がりだけに注目してみましょう。 左図の最初(0番目)の出力ニューロンへの繋がりと重みだけに注目すると右図のように表現できます。 ここでXは入力画像のピクセル値、Wは重みを表しています。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/b8fb6bd9f3a4474faebe31ae44afb748/%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-10-17%205.37.55.png" alt=""> 上右図のモデル図を式に近い形で表現すると以下のようになります。 そして、このW1~W784が重み行列です。(この重み行列のそれぞれの値には0~255の範囲の数値が入っています。) <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/5ce9cd745ea2413aa666b56165773949/%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-10-17%205.38.18.png" alt=""> この構成で訓練したネットワークを例に、最初の出力ニューロンに流れ込む重みを可視化してみます。 このニューロンの役割は数字の0を識別することです。重みが最も低いところが黒(0)、最も高いところが白(255)になるように色をつけます。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/5226d6dac17a404bb436a17b4546a50b/%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-10-17%205.38.46.png" alt=""> なにか0のようなもの可視化されましたね。 このように見える理由は、ニューロンが何をしているのかを考えるとより明確になります。このニューロンは0を識別する役割を担っているので、0に対して高い値を、それ以外に対して低い値を出力することをゴールとしています(計算としては以下の図のような行列演算を行っています)。0に対して高い値を出力するには、0の画像の中で明るくなることが多いピクセルに対して高い重みを割り当てます。また、0以外の数字に対して比較的低い値を出力するには、0以外の画像で明るいことが多く、0の画像で暗くなるピクセルに低い重みを割り当てます。重みの図の中心部分が暗くなっているのは、0の画像ではここが大抵ピクセル値0になることが多く、他の数字では大抵明るくなるからです。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/673bc63d21284e31b54d33835b81138d/%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-10-17%205.39.05.png" alt=""> <h2 id="h2998dd9ce2">10個の出力ニューロン全てに対する重みを可視化してみる</h2> 学習の枚数毎(10000, 100000, 1000000, 10000000枚)に重みを可視化してみました。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/e8547e196835419f8914fd45aab06589/%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-10-17%205.39.57.png" alt=""> <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/3e4beb27b81b4d729b11ff2c061ea564/%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-10-17%205.40.15.png" alt=""> <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/bf06143e7a2a40b383ded4f619a952cc/%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-10-17%205.40.34.png" alt=""> <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/e40ae1a4d4f1413c8069282953300c6a/%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-10-17%205.40.49.png" alt=""> ニューラルネットワークは学習の過程で重みを上記のように変化させています。 学習が進むにつれて、可視化された重みは徐々に数値の平均をとっているような気がします。 <h2 id="ha214098e44">まとめ</h2>今回は学習されたニューラルネットワークの内部状態(重み)を可視化してみました。 この記事を通して、ニューラルネットワークに興味を持っていただけると幸いです。

ニューラルネットワークの中身を可視化してみる

<h2 id="h0118c3f969">この記事の目的</h2>TypeScriptを使うとJavaScriptで発生する予期せぬバグが減るっていわれてるけど、具体的にどのようなケースでエラーが減るの？という疑問を具体的な例で解決する。 <h2 id="hac2021d775">どんなエラーが片付くか？</h2><h3 id="hc2ac375ab7">ケース1: タイプミスが減りバグが抑制される</h3>TypeScriptは、JavaScriptで起こりうるタイプミスや型付けができないことによって発生するバグを抑制してくれます。 以下のJavaScriptのコードを見てみましょう。 このコードは最後のコンソール出力で<code>noteBook.color</code> を出力しようとしていますが、<code>noteBook.colorr</code>となっているためタイプミスが発生していると考えられます。 sample.js<pre><code>const noteBook = {
&nbsp;color: "黒",
&nbsp;price: 980,
&nbsp;size: "A4"
}
console.log(noteBook.colorr); // colorをcolorrにしてある</code></pre> こちらのJavaScriptのコードを実行してみると、undefinedが出力されます。 特にエラーの文言は出力していないため、この変数を使った処理で予期せぬバグが発生しない限り、このエラーには気付けません。 <pre><code>$ node sample.js
undefined</code></pre> そこで、TypeScriptの登場です。 上記の<code>sample.js</code> を<code>sample.ts</code>にコピペしてみます。 sample.ts<pre><code>const noteBook = {
&nbsp;color: "黒",
&nbsp;price: 980,
&nbsp;size: "A4"
}
console.log(noteBook.colorr); // Property 'colorr' does not exist on type '{ color: string; price: number; size: string; }'. Did you mean 'color'?</code></pre> JavaScriptの場合だとタイプミスがあった場合でもundefined が返却されるだけでしたが、TypeScriptの場合はコーディング中に指摘してくれます。 エラーとしては、<code>type '{ color: string; price: number; size: string; }' にはプロパティ 'colorr' が存在しません。colorのことでしょうか？</code> と出力してくれています。 VsCodeでコーディングした場合はこのように指摘してくれます。(ありがたい...!!) <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/39f6b3f379d1451ca9fa047533e7e17a/%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-10-17%205.53.00.png" alt=""> <h3 id="h6fe77e7a0b">ケース2: 静的型付けで変数の型を制約させる</h3>JavaScriptの変数は動的型付けとなり、どんな値でも変数に代入することができます。 しかし、複数人でアプリケーションを構築する場合、予期せぬ値を使用されてしまうことがあります。 例えば、「数値型を引数に取りたい関数に文字列を渡してしまう」などです。 TypeScriptでは予め変数の型を定義できるため、他の値が設定されそうになると「この変数（引数）は数値型なので文字列型は代入できませんよ」と伝えてくれる機能があります。 まずは以下のJavaScriptのコードを見てみましょう。 sample2.js<pre><code>function sum(a, b) {
&nbsp;console.log(a + b);
}

sum(1, 2);</code></pre> こちらのコードを実行すると以下のように出力されます。 <pre><code>$ node sample2.js
3</code></pre> 当たり前ですね。笑 次に、sum関数の引数に文字列を入れて`sample2.js`を実行してみようと思います。 sample2.js<pre><code>function sum(a, b) {
&nbsp;console.log(a + b);
}

sum(1, "2"); //2つ目の引数に文字列"2"を代入</code></pre> こちらを実行したら、一般的にはエラーを出力してもらいたいところですがJavaScriptの場合は以下のようにエラーを出力せずに実行できてしまうんです。。<pre><code>$ node sample2.js
12</code></pre>このようにsum関数に<code>文字列"2"</code> が代入されたことによって、JavaScriptさんは<code>a + b</code>を文字列の連結と認識してしまい<code>"1" + "2" = "12"</code>という処理をしてしまったようです。 これはsum関数を実装したプログラマーにとっては予期せぬ振る舞いですね😱 こういったエラーですが、TypeScriptの<code>型定義</code> で解決できます！！ 以下のコードは上記のsampe2.jsのsum関数の引数に対して、`型定義`を施してあります。 <code>型定義</code> の方法は簡単で、引数(変数)のとなりに<code>:型</code>を書くことで実現できます。 今回は、引数には数値型しか受け付けたくないので、引数の隣に`:number`を記述しています。 sample2.js<pre><code>function sum(a: number, b: number) {
&nbsp;console.log(a + b)
}

sum(1, "2"); //Argument of type 'string' is not assignable to parameter of type 'number'.</code></pre> お、TypeScriptさんはコード実行前に最後の行に対して、エラーを指摘しているようです。 <code>string 型の引数は number 型のパラメータには代入できません。</code> と指摘されています。 そのとおりですね。とても親切。 ちなみにVsCode上だとこのようにエラーが表示されます。 <img src="https://images.microcms-assets.io/assets/f7c85d551f504e7d87956e00f6521783/1aa863be4b5f406495ebc92cf5fd5387/%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-10-17%205.55.20.png" alt=""> <h2 id="ha214098e44">まとめ</h2>以上がTypeScriptを使うことによって、エラーが解決される具体的なケースでした。 TypeScriptを使えば、エラーに迅速に気づけますし、バグを含んだコードをcommitするリスクも低減されるので手戻り工数も削減されます。 それでは、よいTypeScriptライフを！

あつかんブログ🦄

TECH, FINANCE, WORK...