上記の技術をファイル変更と同時にリアルタイムで行う為に利用するのがタスクランナー。 タスクランナーは元々 Grunt や gulp が使われていたが、今では npm scripts と Webpack を利用する模様。 シングルページアプリケーションについて (SPA) 一つのHTMLだけで画面遷移が可能なwebアプリケーションのこと。 Webpack で最終的に吐き出される HTML/CSS/JS 等のファイルをS3等に設置。 API通信やページ遷移はレンダリング後にjsで非同期に行い、同期的な通信は一番最初のみにする。 SPAに使われるフレームワークには Vue.js や React.js 等がある。 コンポーネント指向について コンポーネント指向とは、「GUIパーツをモジュール化したもの」である。 コンポーネントを構成する要素には、下記の4つがある。 情報構造 (HTML) スタイル
![【初心者向け】現代 (2018年11月時点)のフロントエンド開発について - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18016bab5df4c3487e7fe1caadf1b9dc911a04b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxJUU3JThGJUJFJUU0JUJCJUEzJTIwJTI4MjAxOCVFNSVCOSVCNDExJUU2JTlDJTg4JUU2JTk5JTgyJUU3JTgyJUI5JTI5JUUzJTgxJUFFJUUzJTgzJTk1JUUzJTgzJUFEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgzJTg5JUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNjViYjhmZWRlOGJiNzNlN2QzZjZkMDVmMTcyZGI5NQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFraW1lcm9uJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNGY4MmRhNmQ0NTg4MTk5NjRjY2I2ZTk2ZWEwNWFhZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9916f230dc61e850e6825487877d8953)