学ぼう - イントロダクション

ここに貼ってちょ - イントロダクション - 本シリーズについて - JavaScript とは - なぜJavaScriptから学ぶのか - HTML/CSS との関係 - プログラミングにおける流れ - イベント - 入力 - 加工 - 出力 - まとめ - デバッグ - デバッグとは - 開発者ツールの開き方 - エラーを確認する - 変数・データ型 - let/const とは - フィールドの値を扱おう - 値を取得する方法（オブジェクト） - 数値フィールドの値を計算（const、数値、四則演算） - フィールドを編集可不可（真偽値） - ラジオボックスの値で分岐（論理演算） - テーブルフィールドの合計値を計算（let、配列） - コラム「var」 - コラム「暗黙的な型変換」 - 条件分岐・繰り返し処理 - 条件分岐とは - if ... else,else if の使い方 - kintone カスタマイズで条件分岐を使う実例 - 繰り返し処理とは - for の使い方 - kintone カスタマイズで繰り返し処理を使う実例 - 配列操作・オブジェクト操作 - 配列操作 - 追加（unshift / push） - 削除（shift / pop） - 並び替え（sort / reverse） - 結合（join） - 確認（indexOf / includes） - 関数（forEach / map /reduce / filter / find） - オブジェクト操作 - Object.keys - Object.values - 関数 - 関数宣言 - 呼び出し - 引数 - return - 関数式 - 無名関数 - 即時関数 - アロー関数 - スコープ - イベント - イベントとは - kintoneのイベントを使うには - ライブラリ - ライブラリとは - ライブラリを利用するメリット、注意点 - - Promise - 同期処理 - 非同期処理 - コールバックで非同期処理をする - Promise で非同期処理をする - Promise オブジェクトの状態 - Promise オブジェクトを作ってみる - then(), catch() で非同期処理の結果を取り出す - async/await で非同期処理をする ### フィールドの値を扱おう #### 値を取得する方法（オブジェクト） #### 数値フィールドの値を計算（const、数値、四則演算） - ただ、実際のrespは数値フィールドも文字列で返ってくるから、あんまり良くないんよね - コラムで「暗黙的な型変換」に触れる #### フィールドを編集可不可（真偽値） #### ラジオボックスの値で分岐（論理演算） #### テーブルフィールドの合計値を計算（let、配列） #### コラム「var」 #### コラム「暗黙的な型変換」 ## 条件分岐・繰り返し処理 ### 　条件分岐とは #### if ... else,else if の使い方   #### kintone カスタマイズで条件分岐を使う実例 ### 　繰り返し処理とは #### for の使い方  #### kintone カスタマイズで繰り返し処理を使う実例 ## ライブラリ ### ライブラリとは ### ライブラリを利用するメリット、注意点 ### kintoneカスタマイズでこういうときによく使うよ #### dayjs を使った例 ### イベント #### イベントとは - 何かのタイミングで処理を実行したいときに使うもの - 実行したい処理がイベントハンドラー #### kintoneのイベントを使うには - kintone.events.on - レコード追加を開いたらデフォルトでフィールドに値を設定 --- - 関数 - 関数宣言 - 呼び出し - 引数 - return - 関数式 - 無名関数 - 即時関数 - アロー関数 - スコープ --- - 配列操作・オブジェクト操作 - 配列操作 - 追加（unshift / push） - 削除（shift / pop） - 並び替え（sort / reverse） - 結合（join） - 確認（indexOf / includes） - 関数（forEach / map /reduce / filter / find） - オブジェクト操作 - Object.keys - Object.values --- # 学ぼう - イントロダクション ## イントロダクション ### 本シリーズについてこの「はじめようJavaScript」は、kintoneカスタマイズを行う上で必須の知識であるJavaScriptを学ぶことができるコンテンツです。 :::warning あくまでkintoneカスタマイズを行う上での最低限のJavaScript知識となるため、プログラミング言語としてのJavaScriptを体系的にきちんと学びたい方は外部の学習サイトや書籍等をご利用いただくと良いかと思います。 ::: ### JavaScriptとは JavaScriptとはブラウザを操作するためのプログラミング言語であり、ウェブページに動きをつけたり、複雑な処理をさせることができます。今ではWebページやWebシステムを構築する場合必須の知識となります。 :::info :bulb:JavaとJavaScriptの違いプログラミング言語の中にはJavaと呼ばれる言語があります。基幹システムやサーバー側で利用されていることが多い言語です。このJavaとJavaScriptはまったくの別物なのでご注意ください！ - インドとインドネシアくらい違う - パンとフライパンくらい違うとか例えられていたりします。JavaScriptを省略するときは「JS」とすることが多いです！「これをJavaで作成してください」と言われたら、本当にJava言語で作成してしまいますよ？ ::: #### なぜJavaScriptから学ぶのか kintoneカスタマイズを早く学びたいと思っている方も多いはと思いますが、**kintoneはJavaScriptでカスタマイズする**ため、まずはJavaScriptについてある程度学んでおく必要があります。 #### HTML/CSS との関係 JavaScriptを理解するためには、同じくブラウザ上で使われるHTMLとCSSについても特徴を理解しておく必要があります。 HTMLとCSSの2つだけでもWebページ自体は作成可能ですが、これら2つだけでは構成や内容、デザインに動きをつけることは難しいです。（CSSだけでもデザインの動きを設定することは可能だったりします） - 外部からデータを取得して表示する - ログインするユーザーによって表示する内容を切り替える - ログイン機能を搭載するここでJavaScriptの出番となります。 HTMLやCSSを勉強したい方は、まずはこの記事をやってみましょう（リンク） ### プログラミングにおける流れプログラムには動作の流れがあります。これをプログラミング中に意識できるようになると、格段にプログラミングがしやすくなります。 graph LR イベント --> 入力 subgraph 処理入力 --> 加工 --> 出力 end 「イベントに処理を紐付けていく」ことで、プログラムを作成していきます。 #### イベントプログラムが動作するきっかけ。例）レコードの一覧画面を開いたとき / レコードの保存ボタンを押したとき / フィールドの値を変更したとき #### 入力プログラムで操作する対象。例）画面の要素 / 入力された値 / 現在時刻 #### 加工プログラムのメイン処理。例）条件分岐をする / ループ処理をする / APIを実行する #### 出力加工した結果。例）フィールドに値を挿入する / アラートを表示する / 値を外部に送信する ### まとめ俺達の戦いはこれからだ！！ :::info :bulb: ECMAScript JavaScriptに限らずですが、プログラミング言語は「言語」というだけあり、新しい書き方や表現方法が毎年のようにでてきています。JavaScriptではECMAScriptという標準化手続きがされた規格があり、毎年改定されています。 2015年に改定された規格を「ECMAScript 2015」、通称「ES2015」と呼びます。以前はES2015のことを「ES6」と呼び、それ以前を「ES5」と表現していましたが、最近の規格は「ES + 西暦4桁」で呼ぶことが多いです。そしてこの規格が非常に重要であり、ブラウザの対応状況によって使える規格が制限されるケースがあります。例えばGoogleのChromeやMicrosoftのEdgeは比較的最新のECMAScriptに対応していますが、MicrosoftのInternet Explorer 11はES2014（ES5）以降、対応をしていません。つまりES2015の書き方でJavaScriptを書くと、ChromeやEdgeでは動くけどIE11では動かない、なんてことになります。 :::