フロントエンド
フロントエンドとは
主にユーザーが直接やり取りする部分で、画面の表示や操作などのやり取りをする要素のことをフロントエンドと呼びます。
例えばブラウザでサイトでは、画面のレイアウトや検索のために文字を入力したり、画像の表示などです。
この記事はパソコンやスマホなどのデバイスで表示されていると思いますが、フロントエンドの実装がされているので見れます。
バックエンドとの違い
バックエンドはサーバー側での処理でユーザー側から見れないです。
ブログを例にすると、記事をどのようにデータベースに保存、編集、削除するかなどがあります。
この分野を学ぶと何が出来るの？
- Web アプリ開発でブラウザ側の部分の記述ができる。
- ハッカソンにチーム出て開発ができる。
- 作りたいアイデアのアプリがあった時に実現できる技術を持てる。ただしバックエンド側の知識もいるので、勉強するか別の人と共同で開発する必要がある。
どう学んでいけばいいのか？
コーディングの勉強に入る前に、一通り Web 系の知識を入れて全体を把握するのが良いと思います。
その後に HTML, CSS, javascript などの基本的な言語の学習をしていきます。
コードを写経するときにはコピペではなく、実際に書くのがおススメです。
一部書き換えたり、削除したりすると処理がどう変わるのかを体験すると学習効率が上がります。
基礎技術
HTML
Web ページの骨格を作成するための言語です。
CSS
Web ページの見た目を変える言語です。
JS
Web ページを動的にするための言語です。
git, github
git はバージョン管理ツール、github は git を利用して、ソースコードを Web 上で管理するサービスです。
web の知識
web 系の全体像を学びます。
自由課題！
今までの知識をつかってタイマーを作ってみよう！！環境構築がまだの方はこちらを先に読んでね
応用技術
npm,yarn
Node.js のパッケージ管理ツールです。
React
Web サイトの UI を作るためのフレームワークです。
API
アプリ間で通信するときのインターフェースです。
セキュリティー
慣れてきたら、ただ動くだけではなくセキュリティを意識して開発してみよう。
Network
コンピュータ間でどのように通信を行っているのか気にしてみよう。