Help us understand the problem. What is going on with this article?

【初心者】JavaScript(ES6)の基礎を勉強した

ProgateでJavaScript(ES6)の基礎を勉強しました。
自分用にTwitterなどで残しておいた学習メモをまとめただけの記事です。
初心者の方にとっては、もしかすると価値のある内容かもしれません。

基礎中の基礎

  • コンソールに出力:console.log(文字列や変数);
  • コメントアウト://
  • 変数(値の更新可能)の宣言:let 変数名 = 値;
  • 定数(値の更新不可)の宣言:const 定数名 = 値;
  • 変数や定数の命名ルール
    • 英単語を用いる
    • 2語以上なら大文字で区切る
  • テンプレートリテラル:${ 変数名 }

if文

  • {} で囲む
  • セミコロンは不要
  • elseelse ifで条件の追加が可能

書き方

if (条件式1) {
  処理1;
} else if (条件式2) {
  処理2;
} else {
  処理3;
}

演算子

  • 大小:a < b, a <= b, a > b, a >= b
  • 比較:a === b, a !== b
  • 論理
    • AND:&&
    • OR:||
    • NOT:!

switch文

switch () {
  case 1:
    処理1;
    break;
  case 2:
    処理2;
    break;
  default:
    処理3;
    break;
}

繰り返し処理

  • while文
  • for文

while文

while (条件式) {
  処理;
}

for文

for (変数の定義; 条件式; 変数の更新) {
  処理;
}

関数

const 定数名 = function() {
  処理;
}

アロー関数

ES6から導入された新しい書き方。
function()() => と表現する。
書き方は異なるが、意味は全く同じ。
これにより、シンプルに記述することができる。

const 定数名 = () => {
  処理;
}

クラス

class クラス名 { // コンストラクタやメソッド }

インスタンスの生成

const インスタンス名 = new クラス名;

コンストラクタ

インスタンスを生成するときに、実行したい処理や設定を追加するための機能。
constructor() {} と記述して定義する。

メソッド

インスタンスの「動作」のようなもの。
クラスの中で定義する関数のこと。
そのクラスから生成したインスタンスに対して呼び出す。

継承

すでにあるクラスをもとに、新しくクラスを作成すること。
class クラス名 extends 継承するもとのクラスのクラス名 {}

その他の知識

  • パッケージ
  • コールバック関数
  • 配列のメソッド
    • forEach
    • find
    • filter
    • map

パッケージ

JavaScriptの世界において、誰かが作った便利なプログラム
import 定数名 from パッケージ名 としてインポートできる。
インポートすることで、自分のプログラムの中に組み込んで使うことができる。

コールバック関数

別の関数に呼び出してもらうための関数のこと。
JavaScriptでは、関数を「値」として扱える。
変数に関数を割り当てて、その変数を呼び出して関数を実行することができる。

関数は、関数名の後ろに () を付けると呼び出され、付けなければ関数そのものを指す。
つまり、単純にコールバック関数を呼び出したいときには () を付け、引数として渡すときには付けない。

forEachメソッド

配列の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行う。
配列.forEach((引数) => {処理}) という形で使うことができる。

findメソッド

コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出す。
配列.find((引数) => {処理}) という形で使うことができる。

filterメソッド

記述した条件に合う要素のみを取り出して新しい配列を作成する。
findメソッドと異なり、条件に合う全ての要素を取り出せる。
配列.filter((引数) => {処理}) という形で使うことができる。

mapメソッド

配列内の全ての要素に同じ処理をして、その戻り値から新しい配列を作る。
配列.map((引数) => {処理}) という形で使うことができる。

終わりに

ProgateのJavaScript(ES6)の講座、全7レッスンを終えた時点での自分の学習メモをまとめました。
この知識だけでは実務レベルに達していないと思いますが、基礎を学ぶにはProgateはもってこいだと改めて思いました。
今まではRubyを中心に学んできたので、基礎文法の違いなどを理解することができました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした