jsprimer

条件分岐 条件分岐を使うと、特定の条件を満たすかどうかで行う処理の流れを分岐できます。 条件分岐を行うには、if文またはswitch文を使います。 if文 if文は、丸括弧内()の条件式がtrueと評価されるtruthyな値の場合、それに続くブロック{}内の処理が実行されます。ただし、条件式がfalseと評価されるfalsyな値の場合は、ブロック{}内の処理は実行されず、if文の次の行に処理が進みます。 if (条件式) { 実行する文; // 条件式がtruthyの場合実行する文(falsyの場合実行されない) } 実行する文が1行のみの場合は、{ }のブロックを省略できますが、どこまでがi…

関数とは？ 関数とは、ある一連の手続き（文の集まり）を1つの処理としてまとめる機能です。 一度定義した関数を呼び出すことで同じ処理を何回でも実行できます。つまり、関数を使いまわすことが出来るようになります。 関数宣言 functionからはじまる文は関数宣言と呼び、関数を定義するために使われます。 // 関数宣言 function 関数名(仮引数1, 仮引数2) { // 関数が呼び出されたときの処理をブロック内に記述する return 関数の返り値; } // 関数呼び出し const 関数の結果 = 関数名(引数1, 引数2); // 関数の結果を変数で受け取る console.log(関…

代入演算子（=） 代入演算子（=）は右辺の変数に対して左辺のオペランドの値を代入する演算子です。 また、代入演算子は二項演算子と組み合わせて利用できます。組み合わせて使用するときは、複合代入演算子と呼ばれます。評価をする順番は、演算が先に行われて、次に値の代入が行われます。 二項演算子は、2つのオペランドを評価して結果を返す演算子のことです。例えば、+や-のことです。 複合代入演算子の例⏬ MDN-代入演算子 // 加算代入の例 let num = 1; num += 10; // num = num + 10; と同じ console.log(num); // => 11 初めにnum + …

前回と前々回の記事の続きです。 ビット演算子 ビット演算子では、オペランドである数値を符号付き32ビット整数（0と1からなる32個のビットの集合）として扱います。 符号付き32ビット整数では、先頭の最上位ビット（一番左のビット）は符号を表し、0の場合は正の値、1の場合は負の値であることを示しています。 符号付き32ビット整数では負の数値は、2の補数形式という形式で表現されます。 2の補数とは、それぞれのビットを反転して1ビットを足した値となります。 オペランドは32ビット整数に変換され、連続したビット(0と1)によって表現されます。(ビット演算子で計算されるオペランドは、符号付き32ビット整数…

演算子 演算子は、演算処理を記号で表現したものです。 演算子が演算する対象のことを被演算子（オペランド）と言います。 演算子は、オペランドを持ちます。 // +演算子で値同士を足し算する加算演算を行う // この場合、1と2の2つの値がオペランド、演算する対象です。 1 + 2; 演算子には、二項演算子と単行演算子があります。 二項演算子 2つのオペランドを評価して1つの結果を得る演算子を二項演算子と呼びます。 // 二項演算子とオペランドの関係 左オペランド 演算子 右オペランド プラス演算子（+） 2つの数値を加算する演算子です。 console.log(1 + 1); // => 2 J…

はじめに プログラミング言語には、動的型付け言語と静的型付け言語という2種類のタイプがあります。 動的言語と静的言語の違い 両者の違いは、あらかじめデータ型を決めるか(宣言する)どうかという部分です。 動的型付け言語 言語変数などのデータ型の宣言がいらない以下のようなプログラミング言語のことです。 例) Python Ruby JavaScript PHP など 静的型付け言語 変数などのデータ型の宣言があらかじめ必要なプログラミング言語のことです。以下のような言語が当てはまります。 例） C/C++ C# Java Go Scala Swift など データ型 JavaScriptは動的型付…

変数と宣言 プログラミング言語には、文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする変数という機能があります。 データを繰り返し利用できるようにする仕組みに変数があります。 JSでは、変数を宣言するキーワードとしてconst、let、varの3つがあります。 varは、昔からあった変数宣言のキーワードですが、意図しない挙動をしやすいという問題がありました。 それらの問題を改善するために作られたのが、ECMAScript 2015で導入されたconstとletです。 varは、問題点もありますが、後方互換性のために仕様を変更することはありません。その代わりに、const…

JavaScript Primer - 迷わないための入門書 #jsprimerを読み終えたので、学習した内容をこちらにまとめます。 目次 学習した目的 良かったところ 悪かったところ(もしあれば) 学んだこと 難しかったこと 学習した目的 フロントエンドの技術の学習をするにあたって、基礎になる言語であるJavaScriptを学ぶ為にこちらのドキュメントを学びました。 良かったところ 無駄なく網羅的にJavaScriptについて学べる。 簡単なアプリを作りながら学べる。 チートシートは有効に使えそう。 リファレンスとは違い入門書として書かれており、量は多いもののJavaScriptを実務レベル…

いきなりですが、初級エンジニアの皆さん、「Javascript」って難しくないですか？難しいですよね笑 Javascriptは非常に歴史のある言語です。 現在のJavascrriptはフロントエンドエンド領域はもちろん、Node.jsを使ってサーバーサイド側でも使用されている非常に汎用性のあり、需要のある言語です。 その一方で、様々な機能や他の言語ではあまり見られないJavascript特有の考え方なども存在しており、クセも強い言語であると感じており、難しい（奥が深い）と感じております。 しかしながら、現在のフロントエンド開発でデファクトスタンダードになりつつあるNext.js（React）の…

はじめに こんにちは。次世代デジタル基盤開発事業部の神野です。4月に新卒として入社し、7月より次世代デジタル基盤開発事業部に配属となりました。 私たち24年新卒は、4月～5月の間は外部研修を受講し、6月の各部署への仮配属期間に社内研修が実施されました。この記事では、6月に次世代デジタル基盤事業部で行われた社内研修を新卒目線で振り返ると共に、1か月間出社してみて感じた会社の雰囲気をお伝えできればと思います。

はじめに JavaScriptという言語について、その言語仕様を理解を深めたくて学習しました。 筆者は基礎的なことやNode.jsについては他の書籍でも学習していたりするので、それなりに予備知識はありました。 そんな私が読んでみた感想、ということになるので、前提として理解いただければと思います。 ご紹介する書籍 以下のリンクから全て無料で閲覧できます。 後述しますが、このボリューム・質を無料で学習できるのはすごすぎます。 一応、書籍版も有料で販売されているのですが、Web版の方がコードをその場で実行できたり、何かと便利なので、Web版の方がおすすめです。 jsprimer.net （著者に還元…

今週気になった、技術記事やニュース、その他リリースなどを独断と偏見でまとめています。 現在試験運用中。突然辞める可能性が大いにあります。 以下の点にご注意ください。 今週の私が気づいただけの、古い話題を含む場合があります 私はつよつよエンジニアではありません 私は業務Javaメイン。その他は趣味で触ってるくらいな人間です。

前回に引き続き、勢いのあるうちにまとめようと思いました。 調べてみると、クロージャーとは「状態」、「記法」、「仕組み」、「関数」といろいろありました。 そして分かりにくいもののようです。。 クロージャーはスコープ、主にレキシカルスコープと出てくることが多いようなので、レキシカルスコープについて先に調べます。 レキシカルスコープとは 実はレキシカルスコープはJavaScriptのスコープの種類としては、あまり紹介されていません。 まずはスコープについて調べました。 スコープとは 一番理解できた記事です。 ◆ JavaScriptのスコープ総まとめ | 第1回 スコープの種類とその基本 JavaS…

関数宣言とArrow Functionのthisの違いについてのメモです。 以下のサイトに詳しく書いてあります。 https://jsprimer.net https://jsprimer.net/basic/function-this/#function-without-arrow-function-this 関数宣言の場合、thisは動的に決まるとのこと。 ベースのオブジェクトがあればそのオブジェクトをthisとし、なければundefinedとなる、と。 ここで言うベースのオブジェクトとはブラケット演算子、ドット演算子の左側にあるオブジェクトのことです。 では、実験してみましょう。 環境は…

はじめに 本記事は以下の教材を読んだ感想を書いております。 jsprimer.net 良かったところ Javascriptの基本から応用までこれでもかというくらい詳しく記載されています。第一部に基本文法、第二部に応用編と題してTodoアプリの作成などを行っており、どの項目にもサンプルコード豊富に記載されているのでとても理解がしやすくなっております。 学んだこと 基本編 JavaScriptとは コメント 変数と宣言 値の評価と表示 データ型とリテラル 演算子 暗黙的な型変換 関数と宣言 文と式 条件分岐 ループと反復処理 オブジェクト プロトタイプオブジェクト 配列 文字列 文字列とUnico…

window.onload = function () { let tes1 = document.getElementById("test1"); tes1.addEventListener("click",function(){ tes1.innerText = "タイトル" }) } javascriptの関数と関数式 この記事では、javascriptの関数と関数式について記載する。 1. 目的 ・javascriptで関数と関数式を使えるようになる。 目次 javascriptの関数と関数式 1. 目的 2. 関数とは 3. 関数式とは 3. 関数の作成(定義)方法 ３. 関数の使用…

今週の振り返り 目標と成果 目標 成果 今後 JS非同期処理のプラクティス課題を終わらせる ⚪︎ 👍 Omotesando.rb参加記録のブログ記事を投稿する ⚪︎ 👍 SOFTSKILLSの第6部を読み終える ⚪︎ 第7部へ やったこと JS非同期処理 週報アップ後にOKをいただけました！嬉しい〜🙌 JSの基本のプロトタイプ、そしてクラスを勉強 JSPrimerのプロトタイプ、クラスを読んだ 関連してそうなサイトや動画も見た オブジェクトのプロトタイプ - ウェブ開発を学ぶ | MDN プロトタイプオブジェクト · JavaScript Primer #jsprimer 初心者向けJavaS…

私は、東京でスタートアップを立ち上げています。 同時に、プログラミング初心者向けの勉強会やコミュニティを主催しています。 この記事では、 「プログラミング独学はまず何からやればいいですか？」という方に向けて、無料サイトと学習ロードマップについての知見をまとめました。 今回は、JavaScriptについての内容です。 この記事が少しでも、効果的な学習や時間の節約になれば嬉しいです！ 全５パートのロードマップ HTML, CSS Github JavaScript ←この記事 React/ TypeScript Next.js 適宜、必要な箇所から読んで、区切りがついたらまたこの記事に戻ってきてロ…

今週の振り返り JSPrimer非同期処理読んだ 非同期処理:Promise/Async Function · JavaScript Primer #jsprimer 非同期処理のYoutube動画を見た 非同期処理とは何か？【超入門編/JavaScript/プログラミング】 - YouTube コールバック関数とは何か？【超入門編/JavaScript/プログラミング/jQuery/Ajax】 - YouTube JavaScriptのPromise徹底攻略-前編-【Promiseとは/非同期処理】 - YouTube JavaScriptのPromise徹底攻略-後編-【Promiseとは…