asameshicode

フロントエンドへの道

フロントエンドのウェブ開発に必要なスキルを順番に並べています。

インターネット

ウェブ開発を始める前にそのマジックがどのような仕組みでユーザーに届けられているのか理解しましょう。

HTML

ウェブサイトを家に例えるなら、HTMLは基礎の柱になります。それからCSSの装飾、JavaScriptの水道や電気の仕組みを作ることになります。 まずは土台を理解しましょう。

CSS

CSS(Cascading Style Sheets)はUXに関わる重要なフロントエンドの一部です。一般的に見過ごしがちですが、とても重要です。

JavaScript

JavaScriptはフロントエンドのみそになります。じっくり時間をかけて基礎を学びましょう。

バージョンコントロール

バージョンコントロールを使用することで、プロジェクトの記録をセーブしたことろにいつでも戻れるようになります。また他のメンバーとろラボする際に自身のバージョンを作成できます。

リポジトリ

GitHubが一番有名なリポのホスティングサービスになります。ここにオープンソースのプロジェクトをホストすることが一般的です。

ウェブセキュリティ

ウェブアプリケーションを公開する際に、脅威から守るためのプロテクションを図ります。

パッケージマネージャー

パッケージマネージャーを使用することで、依存するライブラリ等のバージョンを管理することができます。

CSSアーキテクチャ

スケールの大きい複雑なアプリケーションではCSSの管理が難しくなってきます。 メンテナンスのできるCSS構造を学びましょう。

CSSのプレプロセッサー

Sass等を使って、複雑なCSS構造を管理し、通常のCSSにコンパイルします。

ビルドツール

タスクランナーを使用してテスト用のデベロップメント環境をすぐに作成できるようにします。

モジュールバンドラー

モジュールバンドラー

Linterとフォーマッター

フレームワーク

ウェブアプリケーションの為に作られたフレームワークを学びましょう。 SPA(シングルページアプリケーション)も対応しています。

モダンCSS

CSSの従来の書き方とは違うものがあります。 フレームワークと一緒に覚えていきましょう。

ウェブコンポーネンツ

再利用可能なコンポーネンツのことです。

CSSフレームワーク

インストールするだけですぐにリスポンシブなウェブができたり、テーマカラーを変えられたりできます。

テスティング

アプリケーションをデプロイする前にバグがないか、想定通りに機能できるかテスティングが必要になります。

タイプチェッカー

JS言語はとてもデータタイプによる制限が緩いので、そのバグがないことを確認する言語になります。

プログレッシブ ウェブアプリケーション

Progressive Web Apps (PWAs) のことです。

サーバーサイドレンダリング

サーバー側でHTMLをコンパイルしてブラウザに届けることです。

GraphQL

APIのクエリ言語のことです。

スタティックサイト ジェネレーター

完全なHTMLのサイトをを作成するツールです。 軽量であることが強みです。

モバイルアプリ

スマートフォンで使えるアプリです。

デスクトップアプリ

exe端子の実行ファイルです。 ポータブル、もしくはインストラーによりプログラムを実行できます。

Web Assembly

新しいタイプのコードで、ブラウザーで実行できます。C、C++、C#、Rustなどで作成することができます。

続く。

プログラミングが一度学習したら終わりではありません。常に新しいテクノロジーが生まれ続け、今学んだことは過去の産物として置いていかれます。 新しい情報や技術に敏感になる癖を付けましょう。