0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

苦手なフロントエンド開発について学ぶ「目次」

Last updated at Posted at 2025-01-28

始めに

皆さんには秘密なんですが私、フロントエンド開発が大変苦手で・・・(全く出来ないわけではないけど)
なので少しでもフロントエンド開発の苦手意識を下げるとともに自分のリスキニングの意味も込めて再度勉強してみようかと思いました。

そこで天下の「Chat-GPT」大先生にこんな質問してみました。

「フロント開発と言われるジャンルが扱う言語には何があるか?」
(陳腐な質問ですいません :bow_tone1:

で帰ってきたお言葉が以下の内容です。
(本投稿はこちらを目次としそれぞれのお言葉を別投稿としてリンクしていきます)

Chat-GPT先生のお言葉

フロントエンド開発で主に使用されるプログラミング言語や技術は以下の通りです。これらは、ウェブアプリケーションやウェブサイトの「見た目」や「動作」を構築するために使われます。


1. 基本的な言語

  1. HTML(HyperText Markup Language)

    • ウェブページの構造を定義するマークアップ言語。
    • 要素(ヘッダー、パラグラフ、リンク、画像など)の配置を指定。
  2. CSS(Cascading Style Sheets)

    • HTMLで定義した要素のデザインやレイアウトを決めるスタイルシート言語。
    • 色、フォント、間隔、アニメーションなどを設定。
  3. JavaScript

    • 動的な動作やインタラクティブな機能を実現するスクリプト言語。
    • ボタンのクリックイベントやフォームバリデーション、アニメーションの制御などに使用。

2. JavaScriptの周辺技術

  1. フレームワーク / ライブラリ

    • React.js:コンポーネントベースのUI構築に特化。
    • Vue.js:軽量で直感的なフレームワーク。
    • Angular:Googleが開発したフルスタックのフレームワーク。
    • Svelte:コンパイル時に効率的なコードを生成するフレームワーク。
  2. TypeScript

    • JavaScriptを拡張した型付きのスクリプト言語。
    • 大規模開発やチーム開発での保守性向上に役立つ。

3. スタイルを補助する技術

  1. CSSプリプロセッサ

    • Sass(SCSS):CSSを拡張し、変数やネスト、関数をサポート。
    • Less:CSSに似た構文で動的スタイリングを可能に。
  2. CSSフレームワーク

    • Bootstrap:レスポンシブデザインやグリッドシステムを簡単に導入。
    • Tailwind CSS:ユーティリティファーストなデザインのフレームワーク。

4. ウェブアプリ構築で使用される他の技術

  1. フロントエンドのビルドツール

    • Webpack:モジュールバンドラー。
    • Vite:高速なビルドと開発サーバー。
    • Parcel:設定不要で使えるバンドラー。
  2. API通信

    • GraphQL:効率的なデータ取得を可能にするクエリ言語。
    • AxiosFetch API:HTTPリクエストを送信するライブラリやブラウザ組み込みAPI。
  3. テンプレートエンジン

    • EJSHandlebars:HTMLのテンプレートを動的に生成。

5. その他の関連技術

  1. WebAssembly(Wasm)

    • 高速なパフォーマンスが求められる部分に使用。
    • C/C++やRustなどで書いたコードをブラウザ上で実行可能に。
  2. PWA(Progressive Web Apps)

    • ウェブアプリをネイティブアプリのように動作させる技術。
  3. Web Components

    • 再利用可能なカスタム要素を作成するための技術(Shadow DOMなど)。

これらの言語や技術は、プロジェクトの規模や要件に応じて適切に選択され、組み合わせて使用されます。フロントエンド開発は進化が早い分野であり、学ぶべきツールや言語が常に更新されています。

ありがたいお言葉を受けて

知っている言葉も多々ある中で少しでもフロントエンドの開発ができるようになるために学習を進めています

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?