TomoyukiProgate(プロゲート)でJavaScript(ES6・ES2015)の学習メモこんにちは。Tomoyuki(@tomoyuki65)です。Progateで久しぶりにJavaScriptの学習をしましたが、最近ではES6(ES2015)という新しいバージョンになり、以前のバージョンより効率的にコードを書けるようです。いうことで、JavaScriptについて学習メモを残しておきます。最後にJavaScript(ES6・ES2015):ログ出力JavaScriptのログ出力では、「console.log();」を使う。例としては以下の通り。console.log("こんにちは。");JavaScript(ES6・ES2015):コメントアウトJavaScriptのコメントアウトには、「//」を使う。/」が使用可能)例としては以下の通り。console.log("こんにちは。");JavaScript(ES6・ES2015):変数JavaScriptの変数定義では「let」を使う。(letは変数定義時のみ必要で、値の更新時には不要)例としては以下の通り。"猫";console.log(animal);JavaScript(ES6・ES2015):定数JavaScriptの定数定義では「const」を使う。"赤";JavaScript(ES6・ES2015):テンプレートリテラルJavaScriptではテンプレートリテラルでは「`(バッククォート)」を使います。テンプレートリテラルにより、複数行文字列や文字列内挿機能を使うことが可能です。通常の文字列で改行する場合console.log("私の名前は田中です。¥n年齢は20歳です。複数行文字列console.log(`私の名前は田中です。20;console.log(`私の名前は${name}です。年齢は${age}歳です。`);JavaScript(ES6・ES2015):if文JavaScriptのif文は次の通り。処理}JavaScript(ES6・ES2015):switch文JavaScriptのswitch文は次の通り。console.log("赤色です。console.log("青色です。console.log("不明な色です。break;}JavaScript(ES6・ES2015):while文JavaScriptのwhile文は次の通り。処理}JavaScript(ES6・ES2015):for文JavaScriptのfor文は次の通り。処理}JavaScript(ES6・ES2015):配列JavaScriptの配列は次の通り。(定数名は慣習として複数形にする。配列の要素に対するインデックス番号は0から。dogを出力する場合console.log(animals[0]);また、配列の要素数を取得するには「lengthプロパティ」が使えます。配列の要素数をログ出力console.log(animals.length);JavaScript(ES6・ES2015):オブジェクトJavaScriptではオブジェクト(Rubyでいうハッシュ)が使えます。200};オブジェクトの値は更新可能です。300;また、オブジェクトを要素にもつ配列の定義が可能です。配列の一つ目の要素の名前をログ出力console.log(items[0].name);もし配列に存在しない要素を指定した場合は、「undefined」が出力される。オブジェクトを要素にもつオブジェクトの定義も可能。JavaScript(ES6・ES2015):関数JavaScriptの関数は次の通り。処理}引数を指定する場合は次の通り。console.log(`名前は${name}です。console.log(`年齢は${age}です。`);}関数の戻り値を定義する場合は「return」を使う。2;}JavaScript(ES6・ES2015):クラスJavaScriptではクラスが使えます。処理}インスタンス化するには次の通り。Animals();コンストラクタを定義すれば、インスタンス化のときに実行される。名前を出力console.log(animal.name);クラスのメソッド(関数のようなもの)を定義するには次の通り。メソッドを実行animal.outputName();尚、メソッド内でメソッドを呼び出すことも可能。this.outputName();JavaScript(ES6・ES2015):クラスの継承クラスの継承をするには次の通り。処理}メソッドでも戻り値が使える。}}オーバーライドも可能。console.log(`名前は${this.name}です。}}子クラスのコンストラクタのオーバーライドでは「super()」を使う。}}JavaScript(ES6・ES2015):ファイル分割コードが長くなる場合はファイル分割が有効。ファイル分割には「export」と「import」を使用する。クラス名;」では1ファイルで出力できるのが1クラスだが、複数クラスを出力したい場合は次の通り。クラス2};そして複数クラスを読み込む場合は次の通り。"./ファイル名";尚、上記はファイルが全て同一のディレクトリに配置されている場合だが、異なるディレクトリのファイルを読み込むことも可能。"../class/ファイル名";JavaScript(ES6・ES2015):パッケージJavaScriptではパッケージが使える。文字列の色を変更するパッケージ「chalk」を使う場合は次の通り。文字列の色を黄色にして出力console.log(chalk.yellow("こんにちは。"));値を受け取るパッケージ「readline-sync」の場合は次の通り。readlineSync.questionint("年齢を入力してください:");JavaScript(ES6・ES2015):配列のメソッド配列には様々なメソッドがあり使用可能。配列に要素を追加するには「pushメソッド」が使える。"皿"]items.push("箸");配列の要素を一つずつ取り出してループ処理をするには「forEachメソッド」が使える。console.log(item);});特定の要素を一つだけ見つけるには「findメソッド」が使える。3;});尚、配列の要素にオブジェクトが指定されている場合、戻り値の条件に指定可能。1;複数の要素を取り出すには「filterメソッド」を使う。3;});「mapメソッド」を使えば、配列内の全ての要素に対して処理し、戻り値から新しい配列を作成可能。2;});最後にJavaScriptのES6は、Rubyのような他のオブジェクト指向のプログラミング言語と同じように、効率性が増しているなと感じました。最新の記事Tomoyuki元SE。30歳を目前に仕事や将来に悩み、Web業界へ転職を目指すも失敗。ブログでは大好きなパソコン情報をはじめ、様々な役立つ情報を発信中。次はプロゲーマーとしても活動するため、ゲーム練習と合わせて攻略記事を書いたり、YouTubeでも活動中。2020年2月5日プログラミングシェアはこちらからツイートシェアはてブLINEPocketfeedlyゲーミングPCならBTO最近はゲーミングPCを購入する人も増えましたが、「どう選べばいいの?」という人も多いですよね。初心者が失敗しない選び方はこちら資産運用始めなくて大丈夫ですか?日本ではお金の教育が一切無いので、資産運用している人はまだ少ないです。資産運用で結果を出すには膨大な時間が必要で、早く始めないと損なんです。ウェルスナビなら誰でも簡単に資産運用が始められるので、一度検討してみてはいかがでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【お得】ふるさと納税を解説!メリットや仕組みからおすすめの返礼品Progate(プロゲート)でSass(サース)の学習メモRECOMMENDこちらの記事も人気です。RSpecによるRa...管理人:Tomoyukiこんにちは。Tomoyukiです。当ブログはプログラミングやパソコン関連情報をはじめ、自分の好きなことや、得意なことを仕事にして生きていくための方法に関する情報を発信していきます。