<p>Q. どうして急に(しかもこの歳で)プログラミングに興味を持ったのか？<br><br>A. 仕事の中で、エクセルの関数や条件式を使って業務効率化に取り組んだことがきっかけでした<br><br>今はやり？の業務効率化への取り組みとして、私の会社でも「各自で仕事の合間にできることをやってみよう」という動きがあり、「システムへの登録作業を効率化する」ツール作成にチャレンジすることになりました。<br><br>ツール作成に取り組む中で、エクセルの関数や条件式でやりたいことを実現したくて、いろいろ調べたり試してみたり...思ったように動かずに、原因に当たりをつけてまた調べたり試してみたりみたり...<br>「なんとか動くようになったけど、もっとシンプルにできないかな？」<br>「他の人が見たときにもっとわかりやすくならないかな？」<br>そういったトライ＆エラーの過程がとても楽しく、仕事中あんなにも「時間が溶けた」のが初めての体験でした。<br><br>「これをずっとできる仕事があったらいいのに...」<br><br>ここでふと頭をよぎったのがプログラミングで、私とプログラミングとの出会いでした。<br><br></p>

プログラミングを学ぶきっかけ

<p>このブログのトップページ、結構イイ感じじゃないですか？（自画自賛）<br><br>うちの子の可愛い写真をずらっと並べることができて満足しているのですが、なんとこのトップページ、Mantineの公式ページからコードをコピペしただけで実装できました💡<br></p><h4 id="h046876a126"><strong>手順</strong></h4><p>公式HPで「Mantine UI」→「Blog UI」→<a href="https://ui.mantine.dev/category/article-cards" target="_blank" rel="noopener noreferrer">「Article cards」</a>と進むとカッコいいデザインが並んでいるので、好きなものを選びます。<br>ちなみに私は今回、「Articles cards grid」を選びました。<br><br>記載されているコードをコピペしてコンポーネントを作成して、ブログのトップページから作成したコンポーネント呼び出します。<br><br><img src="https://images.microcms-assets.io/assets/6c5a297734fe4cae812ad0b1ab6d4fb3/e4030544407241c6b482ac6a3f205fcf/%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%202022-10-01%2016.03.02.jpg?w=600&amp;h=444" alt=""><br><br>すると、なんということでしょう！<br>こんなに手の込んでそうなページがあっという間に出来上がりました✨<br><br>あとは、自分のブログデータをpropsとしてコンポーネントへ渡すだけで、完成です🎉</p>

ブログ記事の一覧表示について

<p>インストールができたら、次は初期設定です。<br>初期設定までできてしまえばもうこっちのものです。<br><br>ということで、さっそくやっていきましょう。<br></p><h4 id="h046876a126">手順</h4><p>まずは、pagesフォルダ内に_document.tsファイルを作成します。<br>ファイルの中身を<a href="https://mantine.dev/pages/getting-started/" target="_blank" rel="noopener noreferrer">公式ページ</a>からコピペします。<br>（お詫び: 下に貼ったのはただの画像で、コードコピーはできません）<br><br><img src="https://images.microcms-assets.io/assets/6c5a297734fe4cae812ad0b1ab6d4fb3/b84d06fdd320432ea1f6f4931cea0879/%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%202022-10-01%2014.30.02.png?w=600&amp;h=408" alt=""><br><br>次に、_app.tsを編集します。<br>こちらも公式ページをそのまま真似します。<br><br><img src="https://images.microcms-assets.io/assets/6c5a297734fe4cae812ad0b1ab6d4fb3/3a748552976848fcaf023330056b46d4/%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%202022-10-01%2014.31.20.png?w=600&amp;h=514" alt=""><br><br>最後に「yarn dev」を実行します。<br><br>これで、晴れてMantineを使えるようになりました🎉<br><br>次回からはいよいよ、コンポーネントを使っていきたいと思います。</p>

Mantineの初期設定について

<p>「なにはともあれ環境構築！」<br>ということで、さっそくやっていきましょう。<br><br></p><h4 id="hdbf98b940f">前提条件</h4><p>Next.js + TypeScriptを使用した開発環境へのMantine導入方法です。<br>パッケージ管理ツールはyarnを使用します。<br><br></p><h4 id="h046876a126">手順</h4><p><a href="https://mantine.dev" target="_blank" rel="noopener noreferrer">公式HP</a>の「Get started」へ進み、使いたいパッケージを画面上で選択します。<br>ちなみに私はこんな感じで選んでみました。<br><br><img src="https://images.microcms-assets.io/assets/6c5a297734fe4cae812ad0b1ab6d4fb3/bd1760cf98bf44939f1466faee2b80c5/%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%202022-10-01%2020.53.28.jpg" alt=""><br><br>この選択画面の下に、選択したパッケージをインストールするためのコマンドが表示されるので、ターミナルでプロジェクトのディレクトリに移動してから、コピペして実行します。<br><br><img src="https://images.microcms-assets.io/assets/6c5a297734fe4cae812ad0b1ab6d4fb3/ae78fe8e64f74bb8a0ec36f8369976b4/%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%202022-10-01%2020.54.01.jpg" alt=""><br><br>これでプロジェクトにMantineを導入できました🎉<br><br></p><h4 id="h25d0e20685">おまけ</h4><p>必要なアイコンもここでインストールしてしまいましょう💡<br><br>ちなみに私は、@tabler/iconsを使っています。<br>プロジェクトのディレクトリで「yarn add @tabler/icons」を実行すればOKです。</p>

Next.jsプロジェクトへのMantine導入について

<p>はじめまして、kinoです。<br>もともとは下に書いたとおり、Mantineの練習に作ったブログなのですが<s>それだとネタがすぐに尽きるので</s>、せっかくなのでフロントエンジニア転職を目指す過程を残すことにします。<br><br>どうぞよろしくお願いします。<br><br><br>------------------------<br></p><h4 id="h50716cc6a4">私について</h4><p>React、TypeScriptを中心に、フロントエンドについて学習しています。業務未経験ですが、エンジニア転職を本気で目指しています🔥<br><br></p><h4 id="h408ea23b65">Mantineについて</h4><p>ReactのUIコンポーネントライブラリ。<br>カスタマイズ可能なコンポーネントや、Hooksがたくさん提供されていて、とても便利なものらしいです。TypeScriptもデフォルトでサポートしています。<br><br></p><h4 id="h60669a7646">このブログについて<br>目的</h4><ul><li>ブログを作ることで、手を動かしてMantineを覚える</li><li>ブログ記事でアウトプットすることで、知識の定着を図る</li><li>アイキャッチ画像でうちの子自慢をする</li></ul><h4 id="h86aad43c1c">内容</h4><ul><li>Mantineの基本的な使い方</li><li>このブログで使用するコンポーネントについての紹介</li></ul><h4 id="h93c0c724c0">想定する読者</h4><ul><li>Mantineについて一緒に学んでくれる初学者の方</li><li>初学者にアドバイスをくれる優しいMantine有識者の方</li><li>猫好きな方</li></ul><h4 id="h36baa3cab4">注意事項</h4><p>　初学者の知識で記事を書きます。間違っていることも多々あると思いますのでご注意ください⚠️</p><h4 id="h0a4535a828">使用技術<br>フロントエンド</h4><ul><li>React</li><li>Next.js</li><li>TypeScript</li><li>Mantine</li><li>TailwindCSS</li></ul><h4 id="ha2cc149486">バックエンド</h4><ul><li>microCMS</li></ul><p><br></p>