キョウタコ
AUTHOR

キョウタコ

2021年4月に新卒として都内のSES企業に新卒未経験として入社。 主にJavaを使ったバックエンドの業務に従事。 Python・JavaScriptなども経験あり。

  • 2024年4月15日
  • 2024年4月15日

Dockerとコンテナ技術 その3:Dockerとdockerコマンドでコンテナを作成してみた

Dockerとは、コンテナ仮想化技術のディファクトスタンダードとなっているコンテナ管理ツールです。 もはやコンテナ=Dockerといっても過言ではないくらいですね。 DockerはCLIによるコマンド操作やDocker desktopと言うGUIを用いた操作によってコンテナを扱うことができます。 desktopは直感的に分かりやすい操作が可能ですが、詳細な設定などはできないためコマンドでの操作も必要となってきます。 また、DockerにはDocker Hubと言う公式のレジストリがあり、多くのコンテナイメージが既に利用可能な状態になっているため、コンテナの利用を簡単に始めることができます。

  • 2024年4月11日
  • 2024年4月11日

Dockerとコンテナ技術 その2:コンテナイメージとは?

今回はコンテナの高いポータビリティを実現するコンテナイメージとは何かをまとめていきたいと思います。 技術的なことや実践的な部分には触れず概念的な部分の説明が主になります。 実際に動かしたいんだよーという人は別のサイトへ行きましょう。 コンテナイメージとはコンテナを作る基となる基本的なアプリやソフトウェア、動作に必要なファイルシステム、実行コマンド、メタ情報を含んだ、コンテナの鋳型のようなものです。 一つのコンテナイメージを基にして作成したコンテナは同じ設定のコンテナとなるため、一つの物理マシンに複数の同じコンテナを作成することや、コンテナイメージを配布して複数人のそれぞれの環境に同じコンテナを構築することができます。

  • 2024年4月9日
  • 2024年4月9日

Dockerとコンテナ技術 その1:そもそもコンテナとは?

Dockerの基礎から学んだことを備忘録として記事にまとめていきます。 初回である今回はコンテナとはそもそも何なのかという超基礎的なことをテーマにまとめていきたいと思います。 コンテナは、アプリケーションを実行するための軽量な仮想化技術です。 従来の仮想マシン(VM)技術と比較して、コンテナはオペレーティングシステム(OS)のカーネルを共有し、アプリケーションとその依存関係をコンテナ内にパッケージ化します。 これにより、アプリケーションはどの環境でも一貫して実行することが可能になります。 Dockerはコンテナを構築するツールのディファクトスタンダードとなっているツールであり、AWSやAzureなどのクラウドサービスでも利用できるツールとなっています。

  • 2024年4月5日
  • 2024年4月5日

Reactの基礎 その7: カスタム hooks

React hooksとは関数コンポーネント内の状態やライフサイクルなどのReactの機能を「フック」するために用意されている機能群の総称です。 React hooksを副作用や状態管理の実行などを行うことができ、その用途に合わせて様々な種類のhooksを利用することができます。 React hooksはuse〇〇と名付けられており、〇〇の部分に利用する機能を表す単語が入ります。 前回まではReactで用意されているhooksを紹介してきましたが、今回はそれらのhooksを組み合わせて自分で新たなhooksを作成するカスタムhooksを紹介していきたいと思います。 React hooksを組み合わせて独自のロジックなどを実装することで特定の役割に特化したhooksを作成することができます。 この独自に作成されたhooksをカスタムhooksと言います。 カスタムhooksを作成することでコンポーネントのロジックを柔軟にすることができ、再利用性を高めることができます。

  • 2024年4月2日
  • 2024年4月2日

Reactの基礎 その6:React hooks その4 useReducer()

React hooksとは関数コンポーネント内の状態やライフサイクルなどのReactの機能を「フック」するために用意されている機能群の総称です。 React hooksを副作用や状態管理の実行などを行うことができ、その用途に合わせて様々な種類のhooksを利用することができます。 React hooksはuse〇〇と名付けられており、〇〇の部分に利用する機能を表す単語が入ります。 React hooksはあらかじめ用意されている機能が多数あり、いくつかの記事に分けて紹介していきたいと思います。 今回は状態管理を行うためのhooksで、更新ロジックの定義や前の状態に依存する更新を行うことができるuseReducer()についてまとめてきます。 useReducer()は状態管理を行うhooksの一つで、複雑な状態管理のロジックを扱う場合や次の状態が前の状態に依存する場合に利用されます。 useReducer()の基本的な使い方は以下の通りです。

  • 2024年3月28日
  • 2024年3月28日

Reactの基礎 その5:React hooks その3 useContext()

React hooksとは関数コンポーネント内の状態やライフサイクルなどのReactの機能を「フック」するために用意されている機能群の総称です。 React hooksを副作用や状態管理の実行などを行うことができ、その用途に合わせて様々な種類のhooksを利用することができます。 React hooksはuse〇〇と名付けられており、〇〇の部分に利用する機能を表す単語が入ります。 React hooksはあらかじめ用意されている機能が多数あり、いくつかの記事に分けて紹介していきたいと思います。 今回は複数の階層のコンポーネントに跨った状態(コンテキスト)を管理することができるuseContext()についてまとめていきます。

  • 2024年3月22日
  • 2024年3月27日

Reactの基礎 その5:React hooks その2 useEffect()

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。 いくつかの記事にわけてReactでステートメントを保持・管理するための機能であるReact hooksについてまとめていきます。 今回は副作用フックを扱うuseEffect()についてまとめていきます。 副作用とは、レンダリングに直接関係しない処理のことで、データのフェッチや手動でのDOMの更新、ログの記録などが含まれます。 例えば、初期表示の際のデータを取得する処理やユーザーによる状態の変更が発生した際の表示の更新などです。 useEffect()は第一引数に副作用として実行する処理、第二引数に依存配列を渡すことで副作用の設定をします。

  • 2024年3月19日
  • 2024年3月22日

Reactの基礎 その4:React hooks その1 useState()

今回からいくつかの記事にわけてReactでステートメントを保持・管理するための機能であるReact hooksについてまとめていきます。 React hooksとは関数コンポーネント内の状態やライフサイクルなどのReactの機能を「フック」するために用意されている機能群の総称です。 React hooksを副作用や状態管理の実行などを行うことができ、その用途に合わせて様々な種類のhooksを利用することができます。 React hooksはuse〇〇と名付けられており、〇〇の部分に利用する機能を表す単語が入ります。 React hooksはあらかじめ用意されている機能が多数あり、いくつかの記事に分けて紹介していきたいと思います。 今回は代表的なReact hooksであるuseState()を紹介します。

  • 2024年3月15日
  • 2024年3月19日

Reactの基礎 その3:コンポーネント

今回はReactでアプリを作成していく上で重要となるコンポーネントについてまとめていきます。 コンポーネントとは コンポーネントとは、とても平たくいうとアプリケーションを構築する部品のことです。 Reactアプリでは、ヘッダーやフッターなどの大きな部品や、ボタンやフォームなどの小さな部品など、様々な単位でコンポーネント化することができます。 各コンポーネントは、HTML要素を返すJavaScriptの関数と捉えることができ、それぞれ独立して独自にスタイルや振る舞いを保持することができます。 1つのアプリを適切にコンポーネントに分割することによって、管理がしやすくなり、コンポーネントの再利用も可能になります。 これにより、コードの可読性や保守性を高めることができます。

  • 2024年3月10日
  • 2024年3月15日

Reactの基礎 その2:JSX記法

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。 何回かに記事を分けて、簡単なWebサイトを作成しデプロイするところまでをまとめていきます。 今回はJSX記法とコンポーネントについて説明しながら、Reactアプリで表示される内容の記述方法をまとめていきたいと思います。