ウェブサイトやウェブアプリケーションの見た目や操作感を決めるフロントエンド開発に欠かせないのが、フロントエンドフレームワークです。 フレームワークは開発を助けるためのツールで、いわば「設計図」のようなものです。 この「設計図」に従ってコー...

Next.jsのSSG (Static Site Generation) を活用してGitHub Pagesにデプロイする方法を学んでいきましょう。 本記事はGitHub Actionsを使ったCI/CD環境を設定する方法も包含しており、初心者でも理解しやすいように画像付きで詳細なステップバイステップの...

【Reactとは？】 ReactはFacebook社が開発したJavaScriptのライブラリで、VueやAngularと一緒によく比較されます。 ただし、厳密にはReactはフレームワークではなく、UI（ユーザーインターフェース）を構築するためのライブラリです。 Facebook、Instagram...

Next.jsの最新バージョン、すなわちバージョン13に、新たな機能が導入されました。その名も「appディレクトリ」です。これにより、ウェブ開発者の私たちは以前とは全く異なる方法でさまざまなタスクを実行できるようになります。 「appディレクトリ」とは...

フロントエンド界隈の最新情報を追いかけていると、Next.js 13 で導入された app ディレクトリについての記事をよく見かけるようになりました。 app ディレクトリとは、Next.js 13 から導入された App Router と呼ばれる新しいル...

オンラインでプログラミングを学びたいと考えているあなたに、初心者から経験者まで対応可能な学習サービス、ドットインストールについて詳しく紹介します。 実際にプレミアム（有料）会員登録して学習して学んだ筆者が、現場のエンジニア目線で役立つかど...

プログラミングを学びたいと考えている方は、オンラインで学べるサービスとしてProgate（プロゲート）を聞いたことがあるかもしれませんね。 プログラミングの学習を始めるとき、初心者にとって最初の一歩は重要です。 特に、すぐにコードを書いて学べる学...

プログラミングの学習当初はうまくいかないことが多いため、最初は非常に挫折しやすいものです。 例えば CSS、JavaScript などのような新たなプログラミング言語を学ぶ際には 「学習が難しい」「うまくいかない」と感じることも少なくないでしょう。 今回...

Web開発の現場で大切なツールの一つであるVisual Studio Code(VSCode)。その魅力は強力なコードエディタ機能だけではありません。 豊富な拡張機能を活用すれば、コードの品質向上、効率化、可読性の向上といった様々な恩恵を受けられます。 この記事では、...

VSCodeでソースコードを書いている際、綺麗に見た目を整えるのは面倒ですよね。そんな時には、Prettier を用いた自動整形（コードを綺麗に整えること）をやってみましょう。 この記事では、Prettier の基本概念からその設定方法、さらにうまくいかないとき...