https://github.com/ittokunvim/learning-mdn-frontend

このリポジトリには、developer.mozilla.org内にあるフロントエンドのドキュメントを読み、学んだ内容が保存されています。
https://github.com/ittokunvim/learning-mdn-frontend
Last synced: 8 months ago
JSON representation
このリポジトリには、developer.mozilla.org内にあるフロントエンドのドキュメントを読み、学んだ内容が保存されています。
Host: GitHub
URL: https://github.com/ittokunvim/learning-mdn-frontend
Owner: ittokunvim
Created: 2022-05-16T17:52:06.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2023-01-20T20:17:51.000Z (over 3 years ago)
Last Synced: 2025-01-12T00:32:54.367Z (over 1 year ago)
Language: JavaScript
Homepage:
Size: 47 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

          # learning-frontend

このリポジトリでは、フロントエンドを学ぶ上で大事なこと、使えることを書いていきます。

## MDN Web Docs

> 参考：https://developer.mozilla.org/ja/docs/Learn/Front-end_web_developer

1. web/

   1. [基本的なソフトウェアのインストール](https://github.com/ittokun/learning-frontend/blob/main/web/installing_basic_software.md)

   2. [WebおよびWeb標準](https://github.com/ittokun/learning-frontend/blob/main/web/the_web_and_web_standards.md)

   3. [学び、助けを得る](https://github.com/ittokun/learning-frontend/blob/main/web/learning_and_getting_help.md)

   3. [ファイルの扱い](https://github.com/ittokun/learning-frontend/blob/main/web/dealing_with_files.md)

2. html/

   1. introduction_to_HTML/

      1. [HTMLを始めよう](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/getting_started.md)

      2. [headとは？HTMLのメタデータ](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/the_head_metadata_in_html.md)

      3. [HTMLテキストの基礎](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/HTML_text_fundamentals.md)

      4. [ハイパーリンクの作成](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/creating_hyperlinks.md)

      5. [高度なあテキスト処理](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/advanced_text_fomatting.md)

      6. [ドキュメントとWebサイトの構造](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/document_and_website_structure.md)

      7. [HTMLのデバッグ](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/debugging_html.md)

      8. [手紙のマークアップ](https://github.com/ittokun/learning-frontend/blob/main/html/Introduction_to_HTML/markup_letter.html)

      9. [ページのコンテンツ構造](https://github.com/ittokun/learning-frontend/tree/main/html/Introduction_to_HTML/structuring_a_page_of_content)

   2. Multimedia_and_embedding/

      1. [HTMLの画像](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/images_in_HTML.md)

      2. [動画と音声のコンテンツ](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/video_and_audio_content.md)

      3. [objectからiframeへ、その他の埋め込み技術](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/other_embedding_technologies.md)

      4. [ウェブにベクターグラフィックスを追加する](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/adding_vector_graphics_to_the_web.md)

      5. [レスポンシブ画像](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/responsive_images.md)

      6. [Mozillaのスプラッシュページ](https://github.com/ittokun/learning-frontend/blob/main/html/Multimedia_and_embedding/mozilla_splash_page/)

   3. Tables

      1. [HTMLテーブルの基本](https://github.com/ittokun/learning-frontend/blob/main/html/Tables/basics.md)

      2. [HTMLテーブルの高度な機能とアクセシビリティ](https://github.com/ittokun/learning-frontend/blob/main/html/Tables/advanced.md)

      3. [惑星データの構造化](https://github.com/ittokun/learning-frontend/blob/main/html/Tables/structuring_planet_data/)

2. CSS（Cascading Style Sheets）

   1. CSSの第一歩

      1. [CSSとは何か](https://github.com/ittokun/learning-frontend/blob/main/css/First_steps/what_is_css.md)

      2. [CSS入門](https://github.com/ittokun/learning-frontend/blob/main/css/First_steps/getting_started.md)

      3. [CSSの全体像](https://github.com/ittokun/learning-frontend/blob/main/css/First_steps/how_css_is_structured.md)

      4. [CSSの動き方](https://github.com/ittokun/learning-frontend/blob/main/css/First_steps/how_css_works.md)

      5. [新しい知識を使う](https://github.com/ittokun/learning-frontend/blob/main/css/First_steps/styling_a_biography_page/)

   2. CSSの構成要素

      1. [カスケードと継承](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/cascade_and_inheritance.md)

      2. [CSSセレクター](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/selectors.md)

         1. [要素・クラス・IDによるセレクター](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/type_class_and_id_selectors.md)

         2. [属性セレクター](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/attribute_selectors.md)

         3. [擬似クラスと擬似要素](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/pseudo-classes_and_pseudo-elements.md)

         4. [結合子](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/combinators.md)

      3. [ボックスモデル](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/the_box_model.md)

      4. [背景と枠線](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/backgrounds_and_borders.md)

      5. [テキスト方向の操作](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/handling_different_text_directions.md)

      6. [要素のはみ出し](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/overflowing_content.md)

      7. [CSSの値と単位](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/values_and_units.md)

      8. [CSSによるサイズ設定](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/sizing_items_in_css.md)

      9. [画像、メディア、フォーム要素](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/images_media_form_elements.md)

      10. [表のスタイリング](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/styling_tables.md)

      11. [CSSのデバッグ](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/debugging_css.md)

      12. [CSSの整理](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/organizing.md)

      13. [基本的なCSSの理解](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/Fundamental_CSS_comprehension/)

      14. [装飾的なレターヘッド付きの便箋の作成](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/Creating_fancy_letterheaded_paper/)

      15. [かっこいいボックス](https://github.com/ittokun/learning-frontend/blob/main/css/Building_blocks/A_cool_looking_box/)

   3. テキストの装飾

      1. [基本的なテキストとフォントの装飾](https://github.com/ittokun/learning-frontend/blob/main/css/Styling_text/fundamentals.md)

      2. [リストの装飾](https://github.com/ittokun/learning-frontend/blob/main/css/Styling_text/styling_lists.md)

      3. [リンクの装飾](https://github.com/ittokun/learning-frontend/blob/main/css/Styling_text/styling_links.md)

      4. [ウェブフォント](https://github.com/ittokun/learning-frontend/blob/main/css/Styling_text/web_fonts.md)

      5. [コミュニティスクールのホームページの作成](https://github.com/ittokun/learning-frontend/blob/main/css/Styling_text/Typesetting_a_homepage/)

   4. CSSレイアウト

      1. [CSSレイアウト入門](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/introduction.md)

      2. [通常フロー](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/normal_flow.md)

      3. [フレックスボックス](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/flexbox.md)

      4. [グリッド](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/grids.md)

      5. [フロート](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/floats.md)

      6. [位置指定](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/positioning.md)

      7. [段組みレイアウト](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/multiple-column_layout.md)

      8. [レスポンシブデザイン](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/responsive_design.md)

      9. [メディアクエリーの初心者向けガイド](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/media_queries.md)

      10. [過去のレイアウト方法](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/legacy_layout_methods.md)

      11. [古いブラウザーのサポート](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/supporting_older_browsers.md)

      12. [基礎的なレイアウトの理解](https://github.com/ittokun/learning-frontend/blob/main/css/CSS_layout/Fundamental_Layout_Comprehension/)

2. JavaScript

   1. JavaScriptの第一歩

      1. [JavaScriptとは](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/what_is_javascript.md)

      2. [最初のダイブ](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/a_first_splash.md)

      3. [JavaScriptのトラブルシューティング](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/what_went_wrong.md)

      4. [変数](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/variables.md)

      5. [数値と演算子](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/math.md)

      6. [文字列](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/string.md)

      7. [便利な文字列メソッド](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/useful_string_methods.md)

      8. [配列](https://github.com/ittokun/learning-frontend/blob/main/js/First_steps/array.md)

   2. JavaScriptの構成要素

      1. [条件文](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/conditionals.md)

      2. [ループコード](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/looping_code.md)

      3. [関数](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/functions.md)

      4. [独自の関数](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/build_your_own_function.md)

      5. [関数の戻り値](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/return_values.md)

      6. [イベント](https://github.com/ittokun/learning-frontend/blob/main/js/Building_blocks/events.md)

   3. JavaScriptオブジェクト入門

      1. [JavaScriptオブジェクトの基本](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/basics.md)

      2. [初心者のためのオブジェクト指向JavaScript](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/oojs.md)

      3. [Objectのプロトタイプ](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/object_prototypes.md)

      4. [JavaScriptの継承](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/classes_in_javascript.md)

      5. [JSONの操作](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/json.md)

      6. [オブジェクト構築の練習](https://github.com/ittokun/learning-frontend/blob/main/js/Objects/object_building_practice.md)

   4. 非同期JavaScript

      1. [JavaScript非同期処理入門](https://github.com/ittokun/learning-frontend/blob/main/js/Asynchronous/introducing.md)

      2. [Promiseの使い方](https://github.com/ittokun/learning-frontend/blob/main/js/Asynchronous/promise.md)

      3. [Promise APIの使い方](https://github.com/ittokun/learning-frontend/blob/main/js/Asynchronous/promise-based_API.md)

      4. [Worker入門](https://github.com/ittokun/learning-frontend/blob/main/js/Asynchronous/worker.md)

   5. クライアントサイドWeb API

      1. [Web APIの紹介](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/introduction.md)

      2. [ドキュメントの操作](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/manipulating_documents.md)

      3. [サーバーからのデータ取得](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/fetching_data.md)

      4. [サードパーティAPI](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/third_party_APIs.md)

      5. [グラフィックの描画](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/drawing_graphics.md)

      6. [動画と音声のAPI](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/video_and_audio_APIs.md)

      7. [クライアントサイドストレージ](https://github.com/ittokun/learning-frontend/blob/main/js/Client-side_web_APIs/client-side_storage.md)

   - [JavaScriptモジュール](https://github.com/ittokun/learning-frontend/blob/main/js/javascript_modules/README.md)

2. HTML form

   1. [HTMLフォームを始めよう](https://github.com/ittokun/learning-frontend/blob/main/form/getting_started.md)

   2. [フォームの構築](https://github.com/ittokun/learning-frontend/blob/main/form/structure_form.md)

   3. [ネイティブフォームコントロール](https://github.com/ittokun/learning-frontend/blob/main/form/native_form_control.md)

   4. [フォームの入力](https://github.com/ittokun/learning-frontend/blob/main/form/form_input_type.md)

   5. [その他のフォームコントロール](https://github.com/ittokun/learning-frontend/blob/main/form/other_form_controls.md)

   6. [フォームのスタイル](https://github.com/ittokun/learning-frontend/blob/main/form/style_form.md)

   7. [高度なフォームのスタイル](https://github.com/ittokun/learning-frontend/blob/main/form/advanced_style_form.md)

   8. [UI擬似クラス](https://github.com/ittokun/learning-frontend/blob/main/form/UI_pseudo_classes.md)

   9. [フォーム検証](https://github.com/ittokun/learning-frontend/blob/main/form/validation_form.md)

   10. [フォームデータの送信](https://github.com/ittokun/learning-frontend/blob/main/form/send_form_data.md)

   11. [カスタムフォームコントロール](https://github.com/ittokun/learning-frontend/blob/main/form/custom_form_control.md)

   12. [JavaScriptによるフォーム送信](https://github.com/ittokun/learning-frontend/blob/main/form/style_form.md)

## GitHub Pages

- [手紙のマークアップ](https://ittokun.github.io/learning-frontend/html/Introduction_to_HTML/markup_letter)

- [バードウォッチング](https://ittokun.github.io/learning-frontend/html/Introduction_to_HTML/structuring_a_page_of_content)

- [Mozillaスプラッシュページ](https://ittokun.github.io/learning-frontend/html/Multimedia_and_embedding/mozilla_splash_page)

- [惑星データ](https://ittokun.github.io/learning-frontend/html/Tables/structuring_planet_data)

- [スタイルされた記事のページ](https://ittokun.github.io/learning-frontend/css/First_steps/styling_a_biography_page)

- [IDカード](https://ittokun.github.io/learning-frontend/css/Building_blocks/Fundamental_CSS_comprehension)

- [装飾的なレターヘッド付きの便箋の作成](https://ittokun.github.io/learning-frontend/css/Building_blocks/Creating_fancy_letterheaded_paper)

- [かっこいいボックス](https://ittokun.github.io/learning-frontend/css/Building_blocks/A_cool_looking_box)

- [コミュニティスクールのホームページ作成](https://ittokun.github.io/learning-frontend/css/Styling_text/Typesetting_a_homepage)

- [基本レイアウトの理解](https://ittokun.github.io/learning-frontend/css/CSS_layout/Fundamental_Layout_Comprehension)

- [実用的な位置指定の例](https://ittokun.github.io/learning-frontend/css/CSS_layout/Practical_positioning_examples)

- [数当て予想ゲーム](https://ittokun.github.io/learning-frontend/js/First_steps/Number_guessing_game)

- [バカ話ジェネレーター](https://ittokun.github.io/learning-frontend/js/First_steps/Silly_story_generator)

- [イメージギャラリー](https://ittokun.github.io/learning-frontend/js/Building_blocks/image_gallery)

- [スーパーヒーローズ](https://ittokun.github.io/learning-frontend/js/Objects/superheroes)

- [バウンシングボールゲーム](https://ittokun.github.io/learning-frontend/js/Objects/Bouncing_balls)

- [バウンシングボールゲーム（改良版）](https://ittokun.github.io/learning-frontend/js/Objects/Adding_bouncing_balls_features)

- [非同期アニメーション](https://ittokun.github.io/learning-frontend/js/Asynchronous/Sequencing_animation)

- [ショッピングリスト](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Shopping-list)

- [缶詰サイト](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Can-store)

- [歩く男](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Canvas-walking-animation)

- [お絵かきアプリ](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Canvas-drawing-app)

- [回るキューブ](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Threejs-cube)

- [カスタムビデオコントロール](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Video-audio/)

- [自己紹介](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Personal-greeting/)

- [メモアプリ](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Memo-app/)

- [ビデオストア](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Video-store)

- [ビデオストア（オフライン）](https://ittokun.github.io/learning-frontend/js/Client-side_web_APIs/Video-store-offline)

- [ハガキ風フォーム](https://ittokun.github.io/learning-frontend/form/Postcard-form)

- [チェック、ラジオ、トグルボタン](https://ittokun.github.io/learning-frontend/form/Check-radio-toggle-buttons)

- [劣悪なフォームのスタイル付け](https://ittokun.github.io/learning-frontend/form/Ugly-controls)

- [さまざまなUI擬似要素](https://ittokun.github.io/learning-frontend/form/Various-UI-pseudo-classes)

- [組み込みフォーム検証](https://ittokun.github.io/learning-frontend/Embedded-form-validation)

- [JavaScriptフォーム検証](https://ittokun.github.io/learning-frontend/Javascript-form-validation)

## TypeScript Handbook

> 参考：https://www.typescriptlang.org/docs/handbook/intro.html

1. [TypeScript ハンドブック](https://github.com/ittokun/learning-frontend/blob/main/ts/intro.md)

2. [JSプログラマのためのTypeScript](https://github.com/ittokun/learning-frontend/blob/main/ts/ts_for_js_programmers.md)

3. [TypeScriptの基本](https://github.com/ittokun/learning-frontend/blob/main/ts/basics.md)

4. [一般的なタイプ](https://github.com/ittokun/learning-frontend/blob/main/ts/everyday_types.md)

## React

> 参考: https://ja.reactjs.org/docs/hello-world.html

1.  [やっはろー](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/hello_world.md)

2.  [JSX](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/jsx.md)

3.  [レンダー](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/render.md)

4.  [コンポーネントとprops](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/component_props.md)

5.  [stateとライフサイクル](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/state_lifecycle.md)

6.  [イベント処理](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/handling_events.md)

7.  [条件付きレンダリング](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/conditional_rendering.md)

8.  [リストとキー](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/list_and_key.md)

9.  [ウェブフォーム](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/form.md)

10. [stateの引き上げ](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/lifting_state_up.md)

11. [Composition 対 Inheritance](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/composition_inheritance.md)

12. [Reactについて考える](https://github.com/ittokun/learning-frontend/blob/main/ts-react/doc/thicking_in_react.md)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/ittokunvim/learning-mdn-frontend

Awesome Lists containing this project

README
