Hello! Uchii.code
バナー画像

【Javascript】未経験からフロントエンドエンジニアになる方法 #4

2023-08-31に公開

バナー画像

まえがき

JavaScript(ジャバスクリプト)は、ウェブページをインタラクティブで動的なものにするためのプログラミング言語です。HTMLやCSSと一緒に使われ、ユーザーがウェブサイト上でボタンをクリックしたり、フォームを記入したりするといった動作を可能にします。また、ウェブサイト内でデータを表示したり、アニメーションを作成したりするのにも使用されます。JavaScriptはブラウザ内で直接実行されるため、ユーザーとの対話や動的なコンテンツの生成に適しています。さらに、最近ではサーバーサイドでのプログラミングにも使われるようになり、幅広いウェブ開発のシナリオで重要な役割を果たしています。以下にjavascriptの詳しい機能をまとめました。特にweb制作では「アニメーションと視覚効果」で使われることが多い印象です。

  • ユーザー対話の実現: JavaScriptはユーザーがボタンをクリックしたり、フォームを送信したりする際の反応を制御します。例えば、フォームのバリデーション(入力値の検証)や、エラーメッセージの表示を行うことができます。
  • コンテンツの動的生成: JavaScriptを使って、ユーザーがページをリロードせずに新しいコンテンツを表示できます。これにより、リアルタイムな更新や、検索結果の表示などを実現できます。
  • アニメーションと視覚効果: ウェブサイト内でアニメーションや視覚効果を作成するためにもJavaScriptが活用されます。要素の移動、フェードイン/フェードアウト、スライドショーなどを実装できます。

1.Javascriptの基礎

1-1.Javascriptの基本構文

まずはJavascriptの変数宣言について見ていきます。constは再代入不可の変数となりますで、後での変更は不可となります。letは再代入可能ですが、再宣言は不可です。newAgeという変数名の中身を変えることはできますが、newAgeそのものを再度宣言することはできません。

// 変数の宣言と初期化
const name = "hoge"; //'age'という変数を宣言して整数値を代入(後で変更不可)

// 変数の再代入
let newName = "hoge"; // 'newAge'の値を更新

// 変数の再代入によるデータ型の変更
newName = "uchii"; // 違う文字列に変更

// データ型の確認
const name = "John"; // 文字列型(string)
let isStudent = true; // 真偽値型(boolean)

// 特殊な値
let x = null; // 値が存在しないことを表す特殊な値
let y; // 初期化されていない変数はundefinedとなる

古い記事等のサンプルコードを見ているとvarという宣言方法を使っているものがありますが、現在varの使用は推奨されていません。以下の記事でもわかりやすく説明されています。

varの使用が推奨されない理由は、まず、varは関数スコープしか持たず、ブロックスコープがないため、変数の競合や意図しない挙動が起きやすくなります。さらに、varで宣言した変数は巻き上げの影響を受け、コードの読みやすさが損なわれることがあります。また、再宣言が許容されるため、同じ変数名が混在する可能性があります。最後に、varはブロックスコープを持たないため、条件分岐やループ内で宣言した変数が意図しない場所で影響を及ぼす可能性が高まります。代わりに、letconstを使用することで、これらの問題を避けつつ、より予測可能で管理しやすいコードを実現できます。

  • const再代入不可の変数を宣言let再代入可能な変数を宣言
  • ECMAScript 6(ES6)が導入された2015年よりvarの使用は推奨されていない
  • 代わりにletconstを使用することで、これらの問題を回避し、コードの信頼性や管理性を向上させることができます。

1-2.Javascriptにおける関数

JavaScriptにおける関数は、コードの再利用性を高める重要な要素です。関数は特定の処理をまとめて呼び出せるブロックであり、コードの構造化やメンテナンスを容易にします。以下では、関数の基本的な定義方法と使い方について説明します。

関数はfunctionを用いる方法とアロー関数を用いる方法があります。基本的にはアロー関数で書くことが多いと思うのでアロー関数の方をマスターしましょう

//①function関数の宣言
function greet(name) {
  console.log("Hello" + name);
}

//①function関数の呼び出し
greet("山田")


//②アロー関数の宣言
const greet = (name) => {
  console.log("Hello" + name)
}

//②アロー関数の呼び出し
greet("山田")

2.プロパティとメソッド

2-1.プロパティについて

JavaScriptのオブジェクトは、キーと値のペアを持つプロパティの集合です。プロパティは、オブジェクト内でデータを保持したり、関数を格納したりするために使用されます。

// オブジェクトの定義
let person = {
  firstName: "John",
  lastName: "Doe",
};

// プロパティへのアクセス
console.log(person.firstName); // "John"
console.log(person.lastName);       // "Doe"

// プロパティの変更
person.firstName = Alice;
console.log(person.firstName);       // Alice

// 新しいプロパティの追加
person.nationality = "USA";
console.log(person.nationality); // "USA"

この例では、personというオブジェクトがあり、それぞれfirstNamelastNameageというプロパティが定義されています。これらのプロパティには、文字列や数値などのデータが格納されています。プロパティにアクセスするためには、ドット記法(objectName.propertyName)を使用します。また、プロパティの値を変更するためにも、単純に代入することができます。新しいプロパティを追加するには、単に新しいキーと値のペアをオブジェクトに代入すればよいのです。JavaScriptのオブジェクトとプロパティの機能をうまく活用することで、データや関数を組織化し、効率的なコードを記述することができます

2-2.メソッドについて

JavaScriptでは、メソッドはオブジェクトに関連付けられた関数のことを指します。オブジェクトは、プロパティとそれに関連する値をまとめたものです。メソッドは、そのオブジェクトに対して特定の操作を行うための関数です。

// オブジェクトの定義
let person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// メソッドの呼び出し
console.log(person.fullName()); // "John Doe"

この例では、personというオブジェクトがあり、その中にfirstNamelastNameというプロパティがあります。また、fullNameという名前のメソッドも定義されています。このメソッドは、firstNamelastNameを結合してフルネームを返すものです。さらに、JavaScriptには、組み込みのオブジェクトとメソッドが豊富に備わっています

  • オブジェクトはキーと値のペアを持つデータ構造で、データや関数を格納するために使用される。
  • メソッドはオブジェクトに紐付いた関数で、オブジェクトに対する特定の操作を行うために使われる。
  • JavaScriptには組み込みで使用できるオブジェクトとメソッドが用意されている。(もともと用意されているオブジェクトとメソッド)

まとめ

今回の#4ではjavascriptの基礎的な部分について触れました。javascriptの学習方法としては、Progateもしくはドットインストール→Youtube(しまぶーのIT大学)→Udemy講座【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)の順番が個人的にはおすすめです。

プログラミング言語の人気オンラインコース

G e t i n T o u c h