SPA(シングルページアプリケーション)とは？【モダンフロントの技術を紹介！】 2020 7/30 IT プログラミング学習 基礎知識 2020年7月30日2022年1月5日 URLをコピーしました！ フリーランスエンジニアの雄貴です！ 近年、WEBサービス開発でモダンな技術として採用されているSPA Vue.jsやReactなどのモダンフロントの技術を使用しているのは分かるけど、実際どんな仕組みなのか？ そもそもなんでSPAは求められているのか？を把握している人は少ないかと思います。 今回はその辺りを説明しようと思います！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > 目次これまでのWEBアプリケーション SPAの説明をする前に、まずは背景としてこれまでのWEBアプリケーションの仕組みをお話しいたします。 以前の記事でもお話ししていますが、ここでは要約して説明いたしますね！ あわせて読みたい ザックリ学ぶWEBの仕組み！！ ~ホームページ編~ フリーランスエンジニアの雄貴です！ 近年急速に発達しているIT業界ですが、その中でもWEBサービスの発達はドンドン勢いを増してきています！ ただWEBでホームページを... あわせて読みたい ザックリ学ぶWEBの仕組み！！ ~WEBサービス編~ フリーランスエンジニアの雄貴です！ 前回、ホームページがブラウザに表示される仕組みについてお話ししました。 https://read-engineer.com/2020/07/05/webworks1/ 「U... WEBサービスにて画面遷移する際、ブラウザからサーバー側にHTMLファイルを要求して、サーバーは要求されたHTMLをブラウザに返却することで画面を変えることができます。 またサーバー側でデータ処理など様々な機能を実施した後にブラウザにHTMLファイルを返却することになります。 このサーバー側で処理を実行している間は、ブラウザ側では操作することができず、HTMLファイルが返ってくるまで待機しなければなりません。 これを「同期通信」と呼びます。 多少の待ち時間が生じますが、昔はこれが一般的だったので、ユーザーも当たり前に感じていました。 スマホアプリの登場 しかしスマートフォンが登場したことにより、事態は一変しました。 スマートフォンで使用できるスマホアプリの操作性がとてもよく、画面遷移や各機能などを高速で行えるようになりました。 これによって、システムのUIに対するユーザーの期待値が爆上がりしました。 そうなるとどうなるか。。 WEBサービスの処理が遅いと感じるようになりました。。 SPA(シングルページアプリケーション)が開発された！ WEBアプリケーションの操作速度を向上させるために開発されたのが「SPA(シングルページアプリケーション)」です。 特徴としては、サーバーのレスポンスを待つことなく画面遷移を実施することができる点です。 詳しくみていきましょう。 画面遷移はJavaScriptで制御する SPAの場合、WEBサービスのサイトにURLでアクセスした際、初期表示だけサーバー側からHTMLを取得します。 そして画面遷移はJavaScriptで制御します。 実はJavaScriptはコード内でHTMLを作ることができ、そのJavaScriptで生成した部分的なHTMLを初期表示で画面に描画されているHTMLに差し込むことができます。 具体的には、画面遷移のボタンをクリックした際、サーバーに通信せずにJavaScriptで次のページのHTMLを生成し、初期表示したHTMLのbodyタグ以下の部分と入れ替えることで、画面遷移しているように見せることができます。 1つのHTMLファイルのみで完結しているので、「シングル・ページ・アプリケーション」と呼ばれています。 必要なデータはAjaxを用いて非同期処理で取得 しかしここで一つ疑問が生まれます。 「データ操作する場合はサーバーと同期通信しなければならないのではないか？」 これを解決しているのがJavaScriptの「Ajax」という機能です。 Ajaxは非同期通信と呼ばれているもので、同期通信がサーバーのレスポンスを待たないと画面操作できないのに対し、非同期通信はサーバーのレスポンスを待たずに画面操作することができます。 これによって、Ajax処理でデータを取得・更新などをしている間に画面遷移を実施することができます。 取得したデータが画面に反映されるまで、画面が全て描画されることはありませんが、取得するデータ量を必要な量まで抑えることでそれらの遅延も防ぐことができます。 これらの技術によって、以前よりも高速にWEBサービスを操作できるようになりました。 JavaScriptフレームワーク SPAの需要が増えてきたことにより、それらに特化したJavaScriptのフレームワークも登場しました。 代表的なものは、「Angular」、「React」、「Vue,js」というフレームワークで、JavaScriptの3大フレームワークと呼ばれています。 中でも日本では「React」と「Vue.js」がよく利用されていて、さらにSPAの開発に特化した「Next.js」や「Nuxt.js」などの、ReactやVue.jsによるSPA開発をより向上させるフレームワークも開発されました。 現在Vue.jsを使用している案件はNuxt.jsでの開発に置き換わっている状況です。 またReactの案件ですが、最近Next.jsの機能も豊富になってきたので少しずつ置き換わっていく動きになると予想されます。 最後に 今回はSPAが登場した背景とその仕組みについてお話しいたしました！ SPAは歴史も浅く、まだ開発体制が整っていない案件も多いです。 私自身フロントエンドエンジニアとして様々なSPAの案件に参画しましたが、そもそもSPA開発ができるエンジニアの数が少なくて、どこに行っても引っ張りだこな状況です。 需要に対し特に供給不足な領域ですので、どうなるかは以前お話ししたこちらの記事をご覧になればイメージできるかと思います。 あわせて読みたい ポジショニングで成果は決まる フリーランスエンジニアの雄貴です！ 今日はポジショニングについてお話ししようと思います。 【ポジショニングとは】 「ポジショニング」という言葉を検索すると、以下... あわせて読みたい ブルーオーシャンを見つける 3つの観点 フリーランスエンジニアの雄貴です！ 前回、「ポジショニング」についてお話をしました。 その際に、みんなが気づいていない隠れた需要をいち早く見つけて行動に移すこ... ご興味をもたれたら、ぜひ参画できるようにスキルアップしてみてください！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > ーーーーーーーーーーーーーーーーーーーー 僕は月商にして120万円を稼いでいますが、 エンジニアで月100万以上稼いでいるというと、 怪しいですよね。 お前は元々仕事できた、才能やセンスがあったんだろ？ともよく言われます。 ですが僕は最初からプログラミングが得意だったわけでもなければ、 仕事が得意だったわけでも 交渉や戦略も得意だったわけではありません。 そんな僕でも自信を得ることができて エンジニアとして月100万以上頂ける程 実力をつけることができました。 経済的にも精神的にも豊かになってます。 結局正しい方向で努力するだけなんですよね。 誰だって稼げますし。 正しい方向で学べば誰でも自信を持って エンジニアとして稼ぐことができる 僕雄貴がポンコツエンジニアから、月120万を稼げるようになった過程を下記の記事では公開しています。 >未経験から月商120万になれた雄貴の行動理念 ーーーーーーーーーーーーーーーーーーーー 【下記画像をクリックして、エンジニアのロードマップをGET！！】 >>詳細が気になる方はこちらをクリック<< IT プログラミング学習 基礎知識 よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ MVCフレームワークとは？【WEBサービス開発の基礎】 WEBエンジニアの実務を紹介！！【新規開発案件のパターン】 この記事を書いた人 雄貴 フリーランスエンジニア 【エンジニアの単価が上がる情報を発信中】 27歳未経験からIT業界へ→経験2年半で月商80万達成 React案件で初回契約月105万を実現 この著者の記事一覧へ 関連記事 未経験エンジニアが1年半で年収1000万円を達成するキャリアプラン 2024年2月18日 一生懸命やってるけど、成果が出ない人が見落としがちなポイント 2024年1月15日 伸び悩んでるならまず学ぼう。世の中知ってるだけで一瞬で解決できる問題が多すぎる 2024年1月4日 今年こそは変わりたい人へ～見違えるくらい変わる目標達成のために重要なこと～ 2024年1月2日 独学でエンジニアとして稼げる人の特徴。自力でできる人とできない人の差はなんなのか？ 2023年12月30日 【成功者インタビュー②】4ヶ月で月収40万円アップさせたエンジニア。〜ブラック企業から抜け出せなかったエンジニアが、経験３年でなぜ月収100万円を超えられたのか？〜 2023年12月30日 【成功者インタビュー①】月収105万円達成したエンジニア 〜月収20万円のオペレーターが0から2年半で月100万越えになぜなれたのか？〜 2023年12月22日 2日で単価が20万上がる人と、数年やっても5万円しか上がらない人の違い 2023年10月6日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ
コメント