2025/1/13 学習記録

Posted at 2025-01-13

現状：

エンジニアへの未経験転職。
就職先も決まり、2月からひよこエンジニアに。

2025年は頑張ろうということで、2025年学習記録12日目。

内容は常に書き散らしのメモです、あしからず。

当面の目標：LPIC101,102合格

メモ

Booleanって何？
値が truthy か falsy か分からなくなった場合は使うと良い。
論理積（&&）は、falsy の値を探して格納する？
論理和（||）は、truthy の値を探して格納する？
論理積、論理和ともに見つからない場合は最も右側を格納する？
thenメソッドとは？：非同期処理が終わったタイミングで実行されるもの？
JSX構文：reactで用いられる、HTMLのようなもの
babel-standalone：javascriptのオブジェクトに変換するソフトウェア。
コンポーネント：画面の各構成要素をReactで定義したもの。
→コードが使いまわせる
→コードが整理される
→疎結合になる
→コンポーネントごとにテストできるため、バグが減らせる。
コンポーネント in コンポーネントが可能。
関数コンポーネントの中身が複数行の場合は、return の後のJSX文は () で囲む。

`Boolean`

プログラミングや論理学において、真（true） または 偽（false） の2つの値を持つデータ型。

ブーリアン型の基本

定義: ブーリアン型は、真理値（真か偽）のみを扱うデータ型であり、主に条件判断や制御フローに利用されます[3][4]。
用途: プログラム内での条件分岐やループ処理、論理演算などで使用され、特定の条件が満たされているかどうかを判断するために使われます。

使用例

1. 基本的な使用例

次のJavaプログラムは、年齢が10歳以上かどうかを判定する例です。

public class Main {
    public static void main(String[] args) {
        boolean isOverTeenage = false; // いいえ(false)
        System.out.println(isOverTeenage); // 出力: false
    }
}

このプログラムでは、isOverTeenageというブーリアン変数がfalseに設定されています[1][2]。

2. 条件分岐での使用

ユーザーがログインしているかどうかをチェックする例です。

public class LoginStateChecker {
    public static void main(String[] args) {
        Boolean isLoggedIn = null; // ログイン状態が未定義

        if (Boolean.TRUE.equals(isLoggedIn)) {
            System.out.println("ユーザーはログインしています。");
        } else if (Boolean.FALSE.equals(isLoggedIn)) {
            System.out.println("ユーザーはログインしていません。");
        } else {
            System.out.println("ユーザーのログイン状態は未定義です。");
        }
    }
}

この例では、isLoggedInがtrueの場合とfalseの場合、それぞれ異なるメッセージを出力します[2][4]。

3. 論理演算の使用

複数の条件を組み合わせる場合の例です。

boolean isWeekend = true;
boolean isSunny = false;

if (isWeekend && isSunny) {
    System.out.println("ピクニックに行きましょう！");
} else {
    System.out.println("家でリラックスしましょう。");
}

このコードでは、isWeekendとisSunnyが両方とも真の場合のみ「ピクニックに行きましょう！」と出力されます[2][6]。

4. ループ処理での使用

ブーリアン型を使ったループ処理の例です。

boolean continueLoop = true;
int count = 0;

while (continueLoop) {
    System.out.println("ループを実行中です。");
    count++;

    if (count == 5) {
        continueLoop = false; // ループを終了させる条件
    }
}

このプログラムでは、continueLoopがtrueである限りループが続き、カウントが5になるとループが終了します[2][6]。

Citations:

[1] https://www.sejuku.net/blog/41241
[2] https://columns.freelance-mikata.com/13837/
[3] https://ja.wikipedia.org/wiki/ブーリアン型
[4] https://e-words.jp/w/ブーリアン型.html
[5] https://makitani.net/shimauma/boolean-datatype
[6] https://www.bold.ne.jp/engineer-club/java-boolean
[7] https://wa3.i-3-i.info/word14970.html

javascript

`catch`メソッド

Promiseオブジェクトに対して使用されるメソッド。
Promiseが拒否（reject）された場合にエラーを処理するために使用される。

主な特徴

エラーハンドリング: Promiseチェーンで発生したエラーをキャッチし、適切に処理します。
構文:

promise.catch(onRejected)

ここで、onRejectedはPromiseが拒否された時に呼び出される関数です。

チェーン化: catchメソッドは新しいPromiseを返すため、さらなる処理をチェーンすることができます。
エラー情報: catchハンドラーは、Promiseが拒否された理由（通常はErrorオブジェクト）を引数として受け取ります。

使用例

fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    console.error('エラーが発生しました:', error.message);
  });

この例では、fetchリクエストが失敗した場合やデータの解析中にエラーが発生した場合、catchメソッドがそのエラーをキャッチして処理します。

catchメソッドを使用することで、非同期処理におけるエラーを効果的に管理し、アプリケーションの堅牢性を向上させることができます。

Citations:

[1] https://qiita.com/delsan/items/93490b9f7b39a84ed67c
[2] https://programming-cafe.com/programming/javascript-programming/js-reserved/javascript-catch/
[3] https://ja.javascript.info/try-catch
[4] https://www.sejuku.net/blog/29293
[5] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch

`then`メソッド

Promiseオブジェクトに対して使用されるメソッド。
非同期処理の結果を扱うために設計されている。

基本的な機能

thenメソッドは、Promiseが解決（履行または拒否）された後に実行されるコールバック関数を登録します[1]。
このメソッドは、Promiseチェーンを作成し、非同期操作を順序立てて実行するのに役立ちます[5]。

構文と引数

then(onFulfilled)
then(onFulfilled, onRejected)

onFulfilled: Promiseが履行されたときに呼び出される関数
onRejected: （省略可能）Promiseが拒否されたときに呼び出される関数[1]

特徴と利点

非同期処理の制御: thenメソッドを使用することで、非同期処理が完了したタイミングで次の処理を実行できます[2]。
チェーン化: 複数のthenメソッドを連鎖させることで、複雑な非同期処理を読みやすく書くことができます[5]。
エラーハンドリング: 第二引数にエラーハンドリング関数を指定することで、Promiseの拒否を処理できます[1]。
新しいPromiseの返却: thenメソッドは新しいPromiseオブジェクトを返すため、さらなる非同期処理の連鎖が可能です[1][5]。

使用例

const p1 = new Promise((resolve, reject) => {
  resolve("Success!");
});

p1.then(
  (value) => {
    console.log(value); // "Success!"を出力
  },
  (reason) => {
    console.error(reason); // エラーの場合
  }
);

この例では、Promiseが成功した場合に"Success!"を出力し、失敗した場合にエラーを処理します[1]。

Citations:

[1] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[2] https://terakoya.sejuku.net/question/detail/6590
[3] https://note.com/yuh_programming/n/nd4928d7ee038
[4] https://zenn.dev/estra/books/js-async-promise-chain-event-loop/viewer/8-epasync-return-promise-in-then-callback
[5] https://ja.javascript.info/promise-chaining
[6] https://blog.serverworks.co.jp/promise-then
[7] https://knowledge.sakura.ad.jp/24890/

`async/await` 構文

JavaScriptにおける非同期処理を扱うための構文。
非同期コードをより読みやすく、管理しやすい形で記述できる。

`async`

asyncキーワードは関数の前に付けて使用します[1][5]。
async関数は常にPromiseを返します[4]。
関数内で非Promiseの値をreturnした場合、自動的にその値を持つ解決されたPromiseにラップされます[4]。

async function example() {
  return 1;
}
// この関数は Promise.resolve(1) と同等です

`await`

awaitキーワードはasync関数内でのみ使用できます[1][5]。
Promiseが解決されるまで実行を一時停止し、解決された値を返します[4]。
非同期処理を同期的に書けるようになり、コードの可読性が向上します[6]。

async function fetchData() {
  const response = await fetch('<https://api.example.com/data>');
  const data = await response.json();
  console.log(data);
}

利点

コードの可読性向上: 非同期処理を同期的な形で記述できます[6]。
エラーハンドリングの簡素化: try/catchブロックを使用して例外処理が可能です[5]。
Promiseチェーンの簡略化: 複数の非同期処理を連続して行う際に、コードがシンプルになります[3]。

async/awaitを使用することで、JavaScriptの非同期処理をより直感的に、そして効率的に記述することができます。

Citations:

[1] https://envader.plus/article/472
[2] https://press.monaca.io/atsushi/12044
[3] https://qiita.com/soarflat/items/1a9613e023200bbebcb3
[4] https://ja.javascript.info/async-await
[5] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
[6] https://www.rstone-jp.com/column/143853/
[7] https://qiita.com/nakajima417/items/937509491a7033243e86

`try/catch` 構文

JavaScriptにおける例外処理のための構文。
プログラムの実行中に発生する可能性のあるエラーを適切に処理し、プログラムの強制終了を防ぐことができる。

基本的な構造

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  // エラーが発生した場合の処理
}

主な特徴

エラーの捕捉: tryブロック内でエラーが発生すると、即座にcatchブロックに制御が移ります[1][3]。
プログラムの継続: エラーが発生してもプログラムが強制終了せず、catchブロック内の処理を実行した後、プログラムの実行を続けることができます[4]。
エラー情報の取得: catchブロックの引数（通常errorと名付けられる）を通じて、発生したエラーの詳細情報にアクセスできます[1][2]。
柔軟なエラー処理: catchブロック内で適切なエラー処理を行うことで、ユーザーフレンドリーなエラーメッセージの表示やエラーのログ記録などが可能です[4]。
finally節の追加: 必要に応じて、finallyブロックを追加することができます。finallyブロックは、エラーの有無に関わらず必ず実行されます[3]。

try/catch構文を使用することで、予期せぬエラーに対して適切に対応し、プログラムの安定性と信頼性を向上させることができます。

Citations:

[1] https://zenn.dev/harryduck/articles/05a0ff1b501fd1
[2] https://ja.javascript.info/try-catch
[3] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch
[4] https://www.javadrive.jp/javascript/exception/index1.html
[5] https://jsprimer.net/basic/error-try-catch/

React 基本用語

`Component（コンポーネント）`

UIを構築するための再利用可能な部品。画面の各要素をライブラリで定義したもの。
コンポーネントを使用することで、UIを小さな部品に分割し、それらを組み合わせて複雑なアプリケーションを構築できる。

主な特徴

定義方法：
- 関数コンポーネント：JavaScript関数として定義
- クラスコンポーネント：ES6クラスとして定義
役割：
- UIの一部を表現し、独立して機能する
- プロップス（props）を受け取り、React要素を返す
構成：
- JSX（JavaScriptの拡張構文）を使用してUIを記述
- JavaScript、HTML、CSSを1つのオブジェクトにまとめる
再利用性：
- 複数の場所で同じコンポーネントを使用可能
- コードの重複を減らし、開発効率を向上[2][6]
階層構造：
- 親コンポーネントから子コンポーネントへpropsを渡す
- 複数のコンポーネントを組み合わせて複雑なUIを構築[7]
メリット：
- コードの可読性向上
- 保守性の向上
- 効率的な開発が可能[2]

使用方法

コンポーネントはjavascript の関数として定義する。

// 関数を定義（先頭は大文字）
function Welcome() {
  return <h1>Hello</h1>;
  // コンポーネントはJSXを返す
}
// コンポーネントを呼ぶ時は、JSXの形式で呼ぶ
<Welcome />

Citations:

[1] https://ja.legacy.reactjs.org/docs/components-and-props.html
[2] https://qiita.com/thirai67/items/13930a1efffdbff62de7
[3] https://zenn.dev/web_tips/articles/c3851133f52d16
[4] https://qiita.com/nakajima417/items/f80cd73f95ebc7a8b3c0
[5] https://ja.react.dev/learn/your-first-component
[6] https://genee.jp/contents/react/
[7] https://envader.plus/article/421
[8] https://udemy.benesse.co.jp/development/app/react-beginner.html
[9] https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components
[10] https://www.i3design.jp/in-pocket/8854
[11] https://ja.legacy.reactjs.org/docs/react-component.html
[12] https://tech.hipro-job.jp/column/29381

`babel-standalone`

ブラウザやその他の非Node.js環境で使用するためのBabelのスタンドアロンビルド[1][2]。
ビルド環境を構築せずに、JavaScript機能を使ったコードをブラウザ上で直接実行できる。

主な特徴

目的：
新しいバージョンのJavaScriptで書かれたコードを、古いバージョンでも動作するように変換するツールです[2]。
使用環境：
通常のBabelはNode.js環境にインストールして使用しますが、babel-standaloneはブラウザ上で直接使用できます[2][3]。

使用方法

基本的な使用方法：
- HTMLファイルでscriptタグを使用してbabel-standaloneを読み込みます。
- <script type="text/babel"> タグ内にJavaScriptコードを記述すると、自動的に変換と実行が行われます[2][3]。
インストール方法：
CDNを使用せずにローカル環境で使用する場合は、yarnやnpmを使ってbabel-standaloneをインストールできます[4]。

応用例

React+TypeScriptアプリケーションの作成[5]
Angularアプリケーションの開発[6]

Citations:

[1] https://babeljs.io/docs/babel-standalone
[2] https://qiita.com/murasuke/items/8dbe350c0c1c1fe269bf
[3] https://gist.github.com/murasuke/dcc62db090aee68a308f9ac769c6ce7b
[4] https://utano.jp/entry/2018/02/hello-babel-standalone/
[5] https://qiita.com/murasuke/items/e0600497a8900ca8401b
[6] https://zenn.dev/reosablo/articles/95cfa0cc43c769

`JSX構文`

JavaScriptの拡張構文。
HTMLに似た記法でReactコンポーネントを記述できる。

主な特徴

JavaScript内でHTMLライクな記述が可能:
JSXを使用すると、JavaScriptコード内でHTMLタグのような記述ができます[1][3]。
コンポーネントの作成:
JSXはReactコンポーネントを作成するために使用されます[3]。

使用方法

式の埋め込み:
中括弧 {} を使用して、JavaScript式をJSX内に埋め込むことができます[1][3]。

例: <h1>Hello, {user}!</h1>
条件付きレンダリング:
論理演算子（&&, ||, ??）を使用して、条件に基づいて要素を表示できます[3]。

例: {isLoggedIn && <LogoutButton />}
リストのレンダリング:
map関数を使用して、配列の要素を繰り返し表示できます[3]。

例:
```
<ul>
  {items.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>
```
フラグメント:
複数の要素をグループ化するために、<>...>（フラグメント）を使用できます[3]。
コメント:
JSX内でコメントを記述する場合は、{/* */}を使用します[3]。

JSXは最終的にReact.createElementの呼び出しに変換され、ReactElementオブジェクトが生成されます[3]。
これにより、JavaScriptとHTMLの融合が実現し、コンポーネントベースの開発が容易になります。

Citations:

[1] https://high-career.jp/2022/02/28/jsx/
[2] https://fullstacklife.net/programming/react/react-jsx-baseic-grammar/
[3] https://qiita.com/PenPe/items/7e6a7a8e9161050a0cea
[4] https://www.codegrid.net/articles/2023-vue-tsx-1/
[5] https://kinsta.com/jp/knowledgebase/what-is-jsx/
[6] https://typescriptbook.jp/reference/jsx

`props`

Reactコンポーネント間でデータを受け渡すための仕組み。

主な特徴

目的：
親コンポーネントから子コンポーネントへ値を渡すために使用されます[1][3]。
データの種類：
文字列、数値、オブジェクト、配列、関数など、あらゆるJavaScriptの値を渡すことができます[5][6]。
特性：
- propsは「プロパティ(性質・特徴)」を意味します[1]。
- 一度設定されると変更不可能（イミュータブル）です[3]。
メリット：
- コンポーネントの再利用性が高まります[3]。
- コードがスッキリとして見やすくなります[3]。

使用方法

親コンポーネントでpropsを指定し、子コンポーネントで受け取ります[2]。
子コンポーネントでは、関数の引数としてpropsを受け取ります[2]。

例：

// 親コンポーネント
<ChildComponent name="React" />

// 子コンポーネント
const ChildComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

propsを使用することで、コンポーネントをカスタマイズ可能にし、柔軟で再利用可能なUIを構築できます[4]。

Citations:

[1] https://qiita.com/Gaku_RUNTEQ/items/4367edf8b85a9406ba50
[2] https://sg.wantedly.com/companies/jointcrew/post_articles/901680
[3] https://tetoblog.org/2021/06/react-props-2/
[4] https://dev.classmethod.jp/articles/react-native-props/
[5] https://ja.react.dev/learn/passing-props-to-a-component
[6] https://envader.plus/article/423
[7] https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504
[8] https://hireroo.io/journal/tech/extract-type-definitions-of-react-props-to-prevent-redefinition

`React.createElement`

Reactアプリケーションで要素を作成する（Reactの仮想DOMを構築する）ための関数。
JSXを使用することで、より直感的にReact要素を作成できるが、内部的にはすべてReact.createElementに変換される[2][5]。

主な特徴

目的：
JSXを使用せずにReact要素を作成するための関数です。

使用方法

基本構文：

React.createElement(type, props, ...children)

パラメータ：
- type: 文字列（HTML要素の場合）またはReactコンポーネント
- props: 要素に渡すプロパティのオブジェクト
- children: 子要素（複数可）
返り値：
React要素オブジェクトを返します。このオブジェクトは以下のような構造を持ちます：
```
{
  type: "div",
  props: {
    children: ["Hello, world!"],
    className: "greeting"
  }
}
```
JSXとの関係：
JSXは内部的にReact.createElementの呼び出しに変換されます[1][3]。例えば：
```
<div className="greeting">Hello, world!</div>
```
は以下のように変換されます：
```
React.createElement('div', { className: 'greeting' }, 'Hello, world!')
```

使用例：

const element = React.createElement(
  'div',
  { id: 'foo' },
  React.createElement('a', null, 'bar'),
  React.createElement('b')
);

Citations:

[1] https://react.keicode.com/basics/jsx-createelement.php
[2] https://qiita.com/k-sukesakuma/items/630897573af2918d4c80
[3] https://www.hypertextcandy.com/react-tutorial-02-jsx/
[4] https://zenn.dev/akatsuki/articles/a2cbd26488fa151b828b
[5] https://zenn.dev/nyarufoy/articles/3744f13447e959
[6] https://qiita.com/Asaminnn/items/68b5b614ba44e70c3d74
[7] https://blog.maximum.vc/blog/2023/webken/9/
[8] https://ja.react.dev/reference/react/createElement

今日はここまで！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2025/1/13 学習記録

現状：

メモ

Boolean

ブーリアン型の基本

使用例

1. 基本的な使用例

2. 条件分岐での使用

3. 論理演算の使用

4. ループ処理での使用

Citations:

javascript

catchメソッド

主な特徴

使用例

Citations:

thenメソッド

基本的な機能

構文と引数

特徴と利点

使用例

Citations:

async/await 構文

async

await

利点

Citations:

try/catch 構文

基本的な構造

主な特徴

Citations:

React 基本用語

Component（コンポーネント）

主な特徴

使用方法

Citations:

babel-standalone

主な特徴

使用方法

応用例

Citations:

JSX構文

主な特徴

使用方法

Citations:

props

主な特徴

使用方法

Citations:

React.createElement

主な特徴

使用方法

Citations:

今日はここまで！

`Boolean`

`catch`メソッド

`then`メソッド

`async/await` 構文

`async`

`await`

`try/catch` 構文

`Component（コンポーネント）`

`babel-standalone`

`JSX構文`

`props`

`React.createElement`