HTML/CSSを従来通り直接書く機会が減少してきました。
Web開発はコンポーネント化、Javascriptベース
昨今のフロントエンドのWeb制作、Web開発はコンポーネント化による各パーツを組み合わせて構築してきます。
Html/Javascriptはコンポーネント化の際にパーツとして呼び出すことができなかったのですが、ECMASCRIPTの登場により、Javascriptベースの開発によりそれが可能となっています。
そのためだけ、ではないですが、そんなことをきっかけに現在ではJavascriptをベースとした開発環境を元にWeb制作することが多くなっています。
ページの切り替えは画面全体では行わない
また、ページ遷移時には毎回ページごとにHtml/CSS/Javascriptなどのファイルをすべて読み直すという無駄をなくし、画面遷移をよりシームレスに行うことができるような、SPA(Single Page Application)化も広まってきています。
3大Javascriptフレームワーク
Javascriptベースの開発環境で使用されているものといえば、React.js・Vue.js・Angular.jsあたりが中心となっています。
また、GulpやWebpackといった、タスクランナーやビルドツールなども併せて使用されることとなります。
簡単開発環境準備
今までHTML/CSS/Javascript(jQuery)を直接書いていた方々には、ECMASCRIPTの知識をはじめとして知っておかなきゃいけないものが一度にたくさん出てきてしまっているのですが、ひとまず始めてみたい、という人には開発環境を構築してくれるツールも各種揃っているので、そちらを利用して開発環境を準備してみてはいかがでしょうか。
・react.jsを始めてみたい人には → create-react-app
[bash]
npm install -g create-react-app
create-react-app プロジェクトフォルダ
cd プロジェクトフォルダ
npm run start
[/bash]
・vue.jsを始めてみたい人には → vue-cli
[bash]
npm install -g vue-cli
vue init webpack プロジェクトフォルダ
cd my-project
npm install
npm run dev
[/bash]
・Angular.jsを始めてみたい人には → Angular CLI
[bash]
npm install -g @angular/cli
ng new プロジェクトフォルダ名
cd プロジェクトフォルダ
ng serve
[/bash]
これらを実行すると一通り開発に必要なツールが揃った状態で環境が準備できます。
※ただし、いずれもNode.jsとnpmやyarnといったパッケージマネージャが必要になります。
yarn
また、いきなりSPAではなくこれまでのHtmlベース静的サイト用に構築してみたいということであれば、以下のようなSSR(サーバーサイドレンダリング),SPA,静的サイト生成もできるフレームワークを利用してはじめてみるのもよいと思います。
REACTベースであれば → NEXT.js
Vueベースであれば → NUXT.js
Angularベースであれば → Angular Universal（サーバーサイドレンダリング専用？）
その中でも、シンプルなサイト制作が多い方であればNUXT.jsを利用してみてください。
もともとReactベースのNEXT.jsのVue版という印象ですが、Vueをはじめとする開発で必要なものが一通りそろった環境で作業ができます。
また、Vueがそもそもこの3つの中で比較的理解しやすいですし、PHPのフレームワークであるLaravelがVueを組み合わせて使用できるので、Vueをベースにすることをお勧めしたいと思います。
Vue、NUXTともに公式サイトの日本語ガイドも充実していることも魅力です。
NUXT.jsの環境は以下のコマンドですぐに構築できてしまいますのでぜひお試しください。
[bash]
npm install -g vue-cli #vue-cliをインストールしていない場合
vue init nuxt-community/starter-template プロジェクトフォルダ名
cd プロジェクトフォルダ名
npm install
#起動確認 以下実行してhttp://localhost:3000 で確認
npm run dev
[/bash]
最近の開発現場状況についてお話しましたが、基本のHTML/CSS/Javascriptといった基本の知識が必要なことには変わりありません。
これから学ぶ人にとっては学ぶべきことが多くなってきているのは事実ですが、基本を学んでおけば学習コストも低くなります。
Akrosはマンツーマンのプロ講座で未経験の方も含めて基本から最近の開発手法、実際の現場で必要な技術を学ぶことができます。
今回紹介されていないPhotoshop,illustratorといったデザイン技術、作成方法も学べます。
ぜひ一度体験・カウンセリングにお越しください。
1人1人に沿ったカリキュラムをご提案させていただきます。
