山本  洋介

山本 洋介

1648477920

【分かりすぎて怖いJavaScript入門】ES6変数・定数・関数の「正しい」宣言方法

letとconstの違いを説明できますか?アロー関数で宣言できますか?
ちょっとでも狼狽えた人はぜひ視聴してみましょう。

ES6では多くの機能が追加されました。 下記はES6で追加された機能,構文の例です

  • let,const
  • アロー関数
  • 分割代入
  • class構文

などなど。簡単に言うとES6では便利な機能や構文が追加されたので、保守性が高く、可読性の高いコードを表現することができます。

今回は「変数」「定数」「関数」に絞って解説していきます!

  #javascript  #es6 

What is GEEK

Buddha Community

【分かりすぎて怖いJavaScript入門】ES6変数・定数・関数の「正しい」宣言方法
山本  洋介

山本 洋介

1648477920

【分かりすぎて怖いJavaScript入門】ES6変数・定数・関数の「正しい」宣言方法

letとconstの違いを説明できますか?アロー関数で宣言できますか?
ちょっとでも狼狽えた人はぜひ視聴してみましょう。

ES6では多くの機能が追加されました。 下記はES6で追加された機能,構文の例です

  • let,const
  • アロー関数
  • 分割代入
  • class構文

などなど。簡単に言うとES6では便利な機能や構文が追加されたので、保守性が高く、可読性の高いコードを表現することができます。

今回は「変数」「定数」「関数」に絞って解説していきます!

  #javascript  #es6 

山本  洋介

山本 洋介

1648585080

【分かりすぎて怖いJavaScript入門】JavaScriptのコーディングルールを決めよう

JavaScriptって良い意味でも悪い意味でも「色々な書き方」ができます。
個人開発だとしても「コーディングルール」を決めておくことが大切です。

<目次>
0:00 この動画で解説すること
2:59 コーディング規約を作る理由
5:09 変数宣言の方法
7:52 命名規則
9:16 行末のセミコロン
10:26 関数宣言の方法
12:35 インデントはタブ?スペース?
14:39 まとめ

★参考にしたJavaScriptスタイルガイド
・Google JavaScript Style Guide
 https://w.atwiki.jp/aias-jsstyleguide2/
・Airbnb JavaScript Style Guide
 https://github.com/airbnb/javascript

#javascript 

山本  洋介

山本 洋介

1648497720

【分かりすぎて怖いJavaScript入門】よく使うES6の配列メソッド3選

JavaScript の Array クラスはグローバルオブジェクトで、高水準、リスト風のオブジェクトである配列の構築に使用されます。

ES6の配列メソッドは便利だけど「種類が多すぎて使い所・使い方が分からない」という方のために、現役フロントエンドエンジニアがよく使うメソッドを3つに絞って解説しました。

番外編として正規表現メソッドも紹介してます。

★JavaScript入門のコードをまとめたGitHub
https://github.com/deatiger/JavaScriptBasic

#javascript #es6 

山本  洋介

山本 洋介

1648519200

【分かりすぎて怖いJavaScript入門】ユーザー操作に応じて画面を書き換えよう

JavaScriptを使う最大の理由、と言っても過言ではない「DOM要素の変更」を解説します。
画像のプレビュー表示やコメント機能も、DOM操作を使えば実現できます。

1. innerTextでテキストを書き換える
2. innerHTMLでHTMLごと書き換える
3. setAttribute()で画像を置き換える
4. insertAdjacentHTML()でHTMLを挿入する

★CodePen
https://codepen.io/Torahack/pen/eYpLVLR

★JavaScript入門のコードをまとめたGitHub
https://github.com/deatiger/JavaScriptBasic

#javascript 

山本  洋介

山本 洋介

1648530120

【分かりすぎて怖いJavaScript入門】非同期処理の完了を待つ方法!

非同期処理とは、一つのタスクを実行中であっても他のタスクを実行できる実行方式をいいます。非同期処理をうまく実装することで、ユーザーはアプリケーションの処理待ちを気にすることなくアクセスすることができるため、ユーザビリティを考えるうえで重要な要素になります。

一方で、非同期処理は実装方法などを工夫しないと、結果的に全体像が見えにくくなったり、処理時間が長くなったりすることもあります。

このコラムでは、そもそも非同期処理の概要や重要性などについてご紹介します。

非同期処理とは?

非同期処理とは、あるタスクを実行している最中に、その処理を止めることなく別のタスクを実行できる方式を指します。特にJavaScriptではAjax(Asynchronous JavaScript and XML)という技術を用いた非同期処理が有名です。

非同期処理の場合は、実行の順番を待たないため、処理が完了する順序はその都度異なります。

同期処理

「タスク1」「タスク2」を非同期処理するアプリケーションに、ユーザーAから「タスク1,2」を処理するリクエスト、ユーザーBから「タスク1」のみを処理するリクエストがあった場合で説明します。

非同期処理は、あるタスクを実行している最中にその処理を止めることなく別の処理を実行できるため、上図のように、ユーザーAのリクエストを処理中にユーザーBからのリクエストがあっても、ユーザーBはユーザーAの処理完了を待たずに、結果を受け取ることができます。

非同期処理をうまく活用すると、全体の処理速度を速められるメリットがあります。その反面、現在何の処理を行っているのかなどプログラムの全体像が複雑になりやすいというデメリットがあります。

このとき注意しておきたいのは、非同期処理と並行処理の違いです。並行処理とは文字どおり複数の処理を同時進行で行うことです。一方、非同期処理は処理を止めることなく実行できるというだけです。そのため、非同期処理と並行処理は共存が可能で、並行処理を実現するために非同期処理で実装するということもありえます。

「非同期処理」の説明できますか?正しく理解していますか?
JavaScriptでプログラムを書くために必ず1度は頭を抱える非同期処理を「制御」する方法を解説します。

★コードサンプル(GitHub)
https://github.com/deatiger/JavaScriptBasic
→asynchronousディレクトリ内

#javascript