マークダウン記法まとめ
筆者のhima-codeです。今回はREADMEファイルなどを書くものとしてよく使用する、「Markdown」形式のファイルの作成方法をまとめていきます 見出し HTMLのh1~h6に対応する見出しを、マークダウン形式のファイルでは文頭に「#」を置き、半角スペースを入れて見出しの文を書き始めることで、見出しを作成することができます。 記法 結果 見出し1 見出し2 見出し3 見出し4 見出し5 見 […]
Next.jsでRoute Handlerを利用したAPIサーバーの構築方法
今回はNext.jsを利用したAPIサーバーの立て方を記事として書いていきます。Next.jsを利用すると、とても楽にAPIサーバーを構築できて、エンドポイントもファイルベースのルーティングで直感的に設定することができるので、Next.jsをこれから触れてみて、取り敢えず何かサーバーとのやり取りをするアプリケーションを作成してみたいときは記事通りに進めていけば、おそらく起動まではできるかと思います […]
Next.js の Todo アプリケーションを作成する方法
こんにちは、筆者の暇人です。 前回の記事:https://hima-tech-blog.jp/blog/6/ で Next.js を用いた RestFul な API を作成して、エンドポイントから JSON 形式のデータを取得する機構を作成しました。 今回は Todo アプリケーションを作る前に前回セットアップしたプロジェクトを使用して Todo アプリケーションを実装してみようと思い […]
Vercel を使ったデプロイで詰まった話
こんにちは！ 今回は筆者が Vercel で GitHub にプロジェクトを push した際に、自動デプロイがうまくできなかったので、そこのエラーについて調べたことをまとめようと思います。 症状 Vercel 上にて、自動デプロイが走っていなかったため、手動で main ブランチの最新コミットをデプロイしようとしたところ、エラーメッセージで「Deployment request did not […]
ReactでTailwindcss使用してWebアプリケーション開発
今回は最近流行のCSSフレームワーク「TailwindCss」をReactのプロジェクトにインストールして作成する方法を解説します。ぶっちゃけ、「Next.js」のプロジェクトで使用するなら、デフォルトでTailwindCSSを使用するかどうかを聞いてくれるので、使用できるならNext.jsを使用したほうが良いと思います。(あと、便利なライブラリがNext.jsにはあるのですが、それは一番最後に少 […]
UbuntuにおけるNode.jsのインストール方法
お久しぶりです。 しばらく投稿ができませんでしたが、サイトの作成やWebアプリの作成などの発注が来てしまったため、しばらく投稿をお休みしていました。ですが、ひと段落ついた(まだ数件の案件を抱えてはいる状態)ので久しぶりに投稿をしようと思います。 久しぶりの投稿なので、最近触れていたWSLについて少しお話でもしようかと思います。 WSLとは、Windwos上でもLinuxのディストリビューションを動 […]
HTMLについて
お久しぶりです。 最近はWordPressにてホームページ作成を１から勉強しておりいろいろとコーディングをしていましたが、その中でもHTMLタグについて勉強することが多くありましたので、まとめをしてみようと思います。 ・HTMLとは HTMLとはWebページを作成するためのマークアップ言語のひとつで、コンテンツをタグで囲みその文章や画像に意味づけをすることを指します。適切なマークアップを心がけると […]
ReactのJSX記法について
こんにちは。今回はReactの環境を作成した後の話になります。JSX（TypeScriptではTSX）記法に関して触れていこうと思います。 まず初めにReactのプロジェクトを作成してください。（まだ作成されていない方はこちらを参考にReactの環境作成を行っていただくと始めることができます。） そもそもJSX記法に関して何なのかという話ですが、これはJavaScriptファイル内にHTMLタグを […]
NestJsを利用したWebAPIの作成
こんにちは 今回はNestJsを利用して簡単なWebAPIを作成したのでその方法をまとめておきます。 まずはnpmを利用して、nestjs/cliをグローバルインストールします。 このようにコマンドプロンプトに打つとnestコマンドが使用できるようになります。 次にnestコマンドでプロジェクトを作成したいディレクトリにcdをして、 と打つと、sample-appという名前でプロジェクトが作成され […]
JavaScriptの便利関数
筆者が勉強してて必要そうな関数について機能と使い方をまとめておこうと思います。 ・map関数 すでにある配列の中身を使用して、新しい配列を作成してくれる関数です。ReactのJSX記法で仮想DOMを配列の個数分作成するなどの使用法ができます。 このように書くとarrayの要素一つ一つを取り出して、mapの()内の処理を行って、新しい配列であるnewArrayの要素に格納されます。今回であれば配列の […]