Recommended
More Related Content
Similar to 【フロントエンド勉強会】 フロントエンド基礎知識
Similar to 【フロントエンド勉強会】 フロントエンド基礎知識 (20)
【フロントエンド勉強会】 フロントエンド基礎知識
- 1. 【フロントエンド勉強会】 フロントエンド基礎知識 - JavaScript / TypeScriptについて - 株式会社Wiz メディア本部・クリエイティブ事業部 フロントエンドチーム髙橋
- 2. ● JavaScript（JS）とは ● TypeScript（TS）とは ● JSとTSの違い ● オブジェクト指向について ● TypeScriptに軽く触れてみよう ● DOMについて ● 今後研修でやっていくこと 【アジェンダ】
- 5. TypeScriptは、JavaScriptに静的型づけの構文を追加した言語とトランスパイラーです。 TypeScript 言語には型注釈などの構文が用意されており、 JavaScriptのコードに対して型注釈をつけて静的な 型チェックができます。 また、TypeScriptのコードは型に関する構文などを取り除いた JavaScriptの コードに変換できます。 引用：https://jsprimer.net/basic/introduction/ 【TypeScriptとは】 つまり何が違う？？→
- 12. 【関数】 関数：プログラムの収納ボックス（メソッドとほぼ同義） 人（人間） 生年月日 性別 年齢 呼吸する 考える 歩く 出身地 寝る 「呼吸する」のに必要な処理が含まれている ● 人間が酸素を肺に取り込む ● 肺胞から血液に酸素を渡す ● 血液が酸素を各細胞に配りまくる ● 血液が細胞に酸素を渡す代わりに、二酸化炭素を 受け取る（静脈） ● 二酸化炭素が溜まった血液は肺胞にいく ● 二酸化炭素が肺から吐き出される
- 13. 【TSのオブジェクト・プロパティ・メソッド】 オブジェクト const person = { } ex) link メソッド const person: personType = { name: "山田太郎", age: 22, introduce: function () { console.log("名前は" + this.name + "です。" + this.age + "歳です。"); } }; プロパティ const person = { name: "山田太郎", age: 22, }
- 14. オブジェクト指向 Formの場合
- 16. 【TypeScriptに軽く触れてみよう！】 1. alert() 2. console.log() 3. 変数の設定・参照 4. 型について 5. 四則演算・文字列の連結 6. 条件分岐 7. 要素の取得
- 21. 3. 変数の設定・参照 link const : 再代入できない変数 let : 再代入できる変数
- 28. 7. 要素の取得 link JS（TS）では次に説明するDOMを操作することがメインの役割の1つです。 「操作したい要素を取得」することがファーストステップ！ もっともシンプルなのが、getElementById メソッド いろんな取得方法があります！使いながら覚えよう！
- 29. 【TypeScriptに軽く触れてみよう！】 1. alert() 2. console.log() 3. 変数の設定・参照 4. 型について 5. 四則演算・文字列の連結 6. 条件分岐 7. 要素の取得
- 31. 【DOM（Document Object Model）】 html body meta head title h1 div#main Document p p DOMツリーはこんな感じになる。
- 33. 【今後研修でやっていくこと】 ● 課題その1「よくある質問ページを作ろう」 ○ トグルボックスの実装 ● 課題その2「ランディングページを作ろう」 ○ フォーム内容のエラーチェック（バリデーションチェック） ○ フォームに入力された内容をAPIを叩いて送信する