Node.jsの実行環境を作成する
こんにちは!筆者のhima-codeです。今回は「Node.js」の実行環境をWindowsで作成する記事を書いていきます。「Node.js」の実行環境を用意できれば、「JavaScript」を使ってプログラミングを初めてみたいといった方もプログラムを実行できるようになりますし、ReactなどのWebフレームワークなどはこの「Node.js」の実行環境がなければ動かすことができないので、これからプ […]
YEAR
2024年
VSCodeをインストールする(Windows編)
こんにちは！筆者の「hima-code」になります。今回は「VSCode」をインストールしてプログラミングをできる環境を整えていきます。 コードエディタにもいろいろあり、最近流行のエディタですと、AIの技術を使用できる「coursor」、高機能でプラグインも充実している「VSCode」、「Sublime」やLinuxでデフォルトで使用できる「Vim」など様々なプログラミングを補助するエディタがあり […]
useContextの解説と使い方
こんにちは! 作者の暇人です。今回は「useContext」を使用してpropsを使って値をバケツリレーしなければいけない構造を作っている人に向けて、コンポーネント間を横断的に値を渡していくような仕組みを実現するために「createContext」と「useContext」の解説と使用例を確認していこうと思います。 1.createContextとuseContextについて 親コンポーネント内で […]
useStateの使い方を学ぶ
こんにちは! 作者の暇人です。 今回はReactのHooksでかなり重要な「useState」の使い方とそれを使って簡単なコンポーネントを作成してみようと思います。 より正確な情報を知りたい方は、公式ドキュメントをご覧ください。 1.useStateとは useStateとは、コンポーネントを一度描画した後も、特定の値を保持して、特定の値が関係している部分のみに再描画をかけることができる仕組みにな […]
ReactでSubmit Buttonを作成する(2.コンポーネント作成編)
こんにちは！ 今回の記事は前回の記事である「ReactでSubmit Buttonを作成する(1.環境作成編)」の続きになります。 まだReactでWebアプリケーションを作成する準備が整っていない方で今回のコンポーネントを作成してみたい方は、こちらの記事から環境を作成されることをお読みください。 それでは早速始めていきましょう！ 1.react-hook-formライブラリをインストールする R […]
ReactでSubmit Buttonを作成する(1.環境作成編)
こんにちは! 作者の暇人です。 今回はReactで送信ボタン(SubmitButton)コンポーネントを作成するための下準備をしていきます。なお今回の環境はReact19以降の環境で作成されていますので、それ以前のバージョンの方はバージョンを19以降にしてください。 また、ボタンを操作不能にしてデータを送信しているようなアニメーションを加えるので、「headless ui」と「heroicons」 […]
ロリポップ マネージドクラウドの使用方法に関して
1.プロジェクトで使用するランタイム環境を選択する 2.プロジェクトに必要な情報を入れる プロジェクトドメイン 使用したいドメイン名を入力します。すでに独自ドメインを持っている場合には「お持ちのドメインを利用する場合はこちら」をクリックして設定します。 プロジェクト名 プロジェクトがわかりやすい名前にします。入力名は任意です。 データベースパスワード MySQLのデータベースが作成されるため、接続 […]
マークダウン記法まとめ
筆者の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 アプリケーションを実装してみようと思い […]