JavaScript

JavaScriptとASP.NETについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptとASP.NETについて解説しています。WebアプリケーションフレームワークのひとつASP.NETの特徴、JavaScriptとASP.NETで開発を行う手順を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

JavaScriptとASP.NETについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

JavaScriptとASP.NETについて詳しく説明していくね！

お願いします！

Webアプリケーションフレームワークとは

普段利用しているWEBサービス。何気なく利用していると思いますが、その仕組みに関して改めて考えてみましょう。WEBサービスを利用する際に私たちが使用するのは、ブラウザー（IE,Edge,Chrome,Safari など）です。では、ブラウザーとは何をしてくれるものなのか？考えたことはありますか？

最近は高機能になっていますが、本来は『HTML形式の情報をその形式に従って表示させてくれる』ものとなります。要するにタグ（<h2>や<br> など）をルール（文字の大きさや色など）に従って画面に表示してくれます。

これに対して、WEBサーバーはURLでリクエストのあった内容の『HTML形式の情報』を返してあげる事をしています。『HTML形式の情報』という事がポイントで、HTMLファイルである必要は有りません。

WEBサーバーは、HTMLファイルやサーバーサードプログラム（PHPなどが代表的）の実行結果などを組み合わせて、『HTML形式の情報』に加工した結果をブラウザーに返しています。こうする事により、動的なWEBサービスを提供する事が可能になっています。

さて、WEBサービスの概要はある程度おさらいできたかと思います。では、本題の「Webアプリケーションフレームワーク」と何なのでしょうか？一言でいうと「WEBサーバを通して、WEBサービスを提供する仕組みを簡単に用意するツール」という事になります。

先ほど説明した、WEBサーバがリクエストに応じてHTML形式の情報を返す仕組みを構築するのが目的となるわけです。「Webアプリケーションフレームワーク」には沢山の種類があります。

Ruby on Rails
Django
CakePHP
ASP.NET

其々に使える言語や特徴などがあるので、興味がありましたら調べてみて下さい。

ASP.NETとは

今回は、先ほど上げた中の「ASP.NET」について解説致します。

「ASP.NET」はマイクロソフトが出している「Webアプリケーションフレームワーク」になります。其の為、利用できる言語はC#やVB.NETなどで、基本的にWindowsで稼働できます。※MACでも出来ます。

Windowsになれている人には、親しみやすいかもしれません。構築もとても簡単で、”Visual Studio”（community版は無料）をインストールしてプロジェクトでWEBサービスを選択すればOKです。

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例

まずは、下記で”Visual Studio”（community版は無料）をダウンロードしてインストールをしましょう！

https://visualstudio.microsoft.com/ja/downloads/

基本的にデフォルトで問題なくインストール出来ますが、詳しい方法は別途調べてみて下さい。インストール出来ましたら、早速プロジェクトを作成します。今回は、JavaScriptの勉強という事で、「空のNode.js Webアプリケーション」プロジェクトを選びます。

プロジェクトの作成を終えると「Node.js」のランタイムが見つからない旨のメッセージが出る場合があります。その場合は、下記よりダウンロードして下さい。

https://nodejs.org/en/download/

ダウンロードしたら、プロジェクトの構成で「node.exe」のパスを指定します。続いて、上部にある”Webサーバ”のボタンをクリックすると起動します。ブラウザーが開いて”Hello World”が表示されれば、取りあえずはOKです。

もっと詳しく知りたい場合は、マイクロソフトの公式サイトよりチャートリアルを進めて下さい

https://docs.microsoft.com/ja-jp/visualstudio/ide/quickstart-nodejs?view=vs-2019

※因みに、上記サイトはASP.NETで作成されています。

結構簡単にWEBページが作成出来るのがわかるかと思います。使い方を覚えるのは少し大変ですが、自身でWEBの構成を考えなくて良いので「Webアプリケーションフレームワーク」は積極的に使って行きましょう。

監修してくれたメンター

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

JavaScriptのdocument.write()メソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのdocument.write()メソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...

JavaScript

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでlocationオブジェクトを使う方法について解説します...

JavaScript

JavaScriptにおけるDateオブジェクトとgettimeについて現役エンジニアが解説【初心者向け】

JavaScriptにおけるDateオブジェクトとgettimeについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...

JavaScript

JavaScriptでHTMLの要素を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLの要素を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

JavaScript

JavaScriptでsliceメソッドを使って文字列の末尾を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでsliceメソッドを使って文字列の末尾を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心...

JavaScript

JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法を現役エンジニアが解説【初心者

JavaScriptのconfirmメソッドでポップアップの文字色を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用...

JavaScript

あわせてよく読まれている記事

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次WebアプリケーションフレームワークとはASP.NETとはJavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] フロントエンドで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

JavaScript

【データから紐解く！】人気プログラミング言語を徹底比較！

本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。科学、技術、工学および数学の素養がある人材に大きな需要があり、高い賃金が支払われているのは、とりたてて目新しいニュースではありません。米国におけるソフトウェア関連職種のオンライン求人数は2007年から2012年にかけて、他の求人に比べ3倍の速さで成長しています。米国労働統計局は、2012年から2022年にかけてソフトウェア開発に関する求人は、22%増加すると見込んでいます。2014年5月時点のソフトウェアアプリケーション開発者の平均年収は95,510ドル(約965万円)となっています。これからプログラミングを学ぼうと思っている初心者は、どの言語を学ぶべきか考えていることでしょう。この記事では各プログラミング言語の給与、需要、そして将来性を比較する事によって、疑問への回答のヒントとなるはずです！また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。目次各プログラミング言語の現状言語別求人ランキング言語別給与ランキングプログラミングに関するサポート体制について各プログラミング言語の将来性各プログラミング言語の現状各プログラミング言語を比較する前に、比較対象となる各言語の現状を確認してみましょう。 [PR] フロントエンドで副業する学習方法を動画で公開中動的プログラミング言語学びやすく面白さもある為、一般的に、動的プログラミンング言語は初心者におすすめ出来る言語だと考えられています。コードを多用せず、ゼロからアプリケーションを構築可能で、難しいルールに従う必要がありません。通常、動的プログラミング言語は最高層で使用されるので、細部の習得に多くの時間を費やす必要が無く、言語の概要の理解に時間を費やします。これも早期に結果を出したいと望むプログラミング初心者に人気の理由の一つです。 JavaScript JavaScript（Javaとは別言語です）は、フロントエンドに必要クライアントな側の言語です。JavaScriptは全てのブラウザと相性が良く、しばしば「jQuery」の様なライブラリ、AngularJSやEmber.js、Reactなどのフロントエンドフレームワークを活用した双方向のウェブアプリケーションに使用されます。 JavaScriptは、Node.jsを活用したサーバー側の言語としても使用されます。Node.jsは比較的新しく、勢いのあるコミュニティです。 FacebookのReact NativeでJavaScriptを使用したネイティブモバイルアプリケーションを構築出来る他、phonegap等のフレームワークでJavaScriptを使用しハイブリッドモバイルアプリケーションも構築出来ます。しかし、JavaScripは型の無い言語なのでミスを見つけて修正するのが難しい分、扱い難い言語としても知られています。マイクロソフトのTypeScriptやReactが使用するJSXなどの静的な型付きのバージョンも存在します。 Ruby 開発を面白く、かつ効率的にする為に開発されたRubyは、Ruby on Railsのフレームワークによって人気を博しました。 Ruby on Railsは、プログラミングの快適性を追求した、フルスタックのフレームワークです。Rubyは英語の様に解読でき、Railsは、共通タスクを容易にするツールを備えています。 Shopify、Bloomberg、HuluやSlideshareなどの人気サイトではバックエンド開発の大部分にRubyを使用しており、Ruby on Railsで構築されています。 Ruby/Rails開発のためのおすすめエディタ/IDEについても合わせてご覧ください。 Python Pythonもまた初心者にお勧め出来る言語の一つであり、米国の一流大学で言語学習の導入段階において最も学ばれています。デスクトップアプリやWebアプリケーション等を構築する際に使用され、データマイニングに最適なツールを備えています。さらに、Pythonはコンピュータサイエンスやデータ解析、生物情報学等、アカデミックなコミュニティでも人気があります。 Google、 YouTube、 Pinterest、 Instagram、 Reddit、 BitTorrent、 Civilization IVなどはPythonで構築されてます。国内でPythonを使ったWebサービスが少ない理由とはという記事も合わせてご覧ください。 PHP PHPはサーバー側のスクリプト言語で、PHPのコードで何をするか概念化が容易な為、初心者向けの言語と考えられています。この言語はWeb向けに特化されているので、多くのWebサイトはPHPで構築されています。 Facebook、Wikipedia、Yahoo!、 Tumblr、 WordPress等はPHPで構築されています。静的型付き言語静的型付き言語で構築されたアプリケーションはより拡張性と安定性があり、保守性に優れている事で知られています。静的言語はタイピングのチェックによる機能が厳しく、エラーの抽出が容易である一方、プロトタイプの作成が可能な為、多くのコードを使用します。ゲームエンジン、モバイルアプリケーションや企業のバックエンドは一般的に静的型付き言語で構築されます。 Java 汎用性のある言語としてJavaは、Androidアプリ、デスクトップアプリやゲームに使用されます。また企業のバックエンドの開発にも使用されています。さらに、ビッグデータの保存や加工に使用するフレームワークHadoopは、Javaをベースとしており、Yahoo、Facebook、 Amazon Web Servicesといった企業で採用されています。 C C言語は、システムソフトウェアの共通言語として、しばしば使用されています。 Cは、本稿にて紹介するほぼ全てのプログラミング言語、とりわけObjective-Cと C++に影響を与えました。ですので、もしCの知見があれば他の一般的な言語の習得は難しく無いでしょう。しかし、簡単なタスクを実行するのに複雑なコードを必要とする為、初めての言語として選んだ場合に初学者は苦労するかと思います。それでもCの知識はきっとプログラマーの助けになることは間違いないですが。 Objective-C / Swift （iOS開発向け） Objective-Cは、C言語を基にした言語であり、静的ですが動的型付けも可能です。AppleのSwiftは、Objective-Cと互換性を持つ様に設計された静的言語ですが静的型付けによりエラーを起こし難くなっています。 Pythonに触発されたSwiftは、新参のプログラマーが習得しやすくObjective-Cに見られるいくつかの課題を解決する様に設計されています。 C++ C++は、C言語を基にした影響力のある言語です。システムソフトウェアのプログラミング用に設計されましたが、ゲームやゲームエンジン、デスクトップアプリ、モバイルアプリ、Webアプリにも使用されてきました。C++は迅速なので、Facebookもいくつかの高性能で高信頼性のあるシステムをこの言語で構築しています。 Adobe Systems、Amazon、Paypal、Chromeなどの多くのソフトウェアがC++で構築されています。Cの様に、一般的にC++は初学者に難しい言語と考えられているので、初めて学ぶ方はMeetups、またはC++Codementorで相談してみるのも良いでしょう。 C# C#（C シャープ）はマイクロソフトWindowsのNET フレームワークの為に開発されました。 C#は、Web開発、ゲーム開発及びマイクロソフトの開発一般に使用されています。マイクロソフトは互換可能なクロスプラットフォームでは知られていませんでしたが、C#を他のプラットフォームへ移行させ、リナックス技術者により良い開発ツールを提供する目的で、Monoと呼ばれるオープンソースプロジェクトを発案しました。最近では、C#をiOSやAndroid向けのネイティブモバイルアプリに使用できる様になりました。 SQL SQL（SequelまたはStructured Query Language）は、データベースとコニュニケーションを行う問い合わせ用の言語です。 SQLはアプリケーションを構築する為には使用されませんが、リレーショナルデータベース管理システム（RDMS）を使用するアプリケーションのデータ管理に使用されます。言語別求人のランキング各プログラミング言語の概要を少しだけ紹介しました。しかしながら、全ての言語に同じ需要があり、同等の給与が支払われる訳ではありません。もし言語習得の目的が就業であり、また言語習得がどんどん難しくなってきているという話にがっかりさせられたくないのであれば、次に紹介する内容が「どの言語を学ぶべきか」という問いに対するヒントになると思います。 indeed.comによる給与統計を基に、各プログラミング言語を9つの層に分割しています。この結果、Swiftが一番多くの給与を得る事ができ、Java、Ruby、 Python,、C++とCもまた悪くない選択である事は明白でしょう。さらに、給与のみに焦点を当てた場合、JavaScript,、C#,、SQLおよびPHPは理想的な選択では無いでしょう。平均給与は、需要（どの程度求人があるか）、供給（何人の開発者がその言語を使えるか）および経験などに影響されます。従い、結論を急ぐ前に他の要素もじっくり確認してみましょう。求人のトレンド以下は、プログラミング言語別の求人トレンド（indeed.comから抜粋）です。 C、SQL、JavaおよびJavaScriptには多くの求人があります。一方、C#、C++とPythonもまた需要のある言語です。しかし、新興企業の職を得たいのであれば、indeed.comのトレンドはふさわしい指標ではないでしょう。 AngelListは新興企業による求人の為のサイトであり、ここの求人リストを基にプログラミング別の重要を確認できます。 JavaScriptの需要がある事が改めて確認できます。また新興企業ではJava、C、C++と C#よりPythonおよびRuby (on Rails)を欲している事が分かるでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

プログラミング

HTML5/CSS3を学んだ後にJavaScriptを学習するべき5つの理由

本記事は、EdTech.jp（エドテックドットジェーピー）から転載した記事になります。元記事はこちら。最近、私は、自分のオンラインコース（UdemyのBuild Responsive Real World Websites with HTML5 and CSS3）の受講生から次のような質問を受けることが増えてきました。私はUdemyのあなたのHTMLとCSSのコースを修了しました。私はWebエンジニアとしてさらに進歩したいと思っています。私に今後の方向性を教えてもらえますか？あなたの素晴らしいコースを受講した後、私は何を学ぶべきでしょうか？私はフロントエンド開発を続けるべきですか、それともバックエンドに移行すべきしょうか？どんな助言でも大歓迎です。これらの質問は本当に優れた重要なものですので、話をして考えることに時間を費やす価値があります。 Webエンジニアになるには、あなたが学習したいことを明確にして、それに時間を費やすことが重要です。あなたが達成したい目標についての計画です。こうした計画がなければ、あなたは多くの貴重な時間を失い、そしておそらく挫折してしまうでしょう。それは避けましょう。これらの質問を分析するために、まずHTML5/CSS3/JavaScriptの共通点を考えてみましょう。その次に、Web開発の基礎を習得したばかりの方にとって、JavaScriptが完璧な言語である5つの理由を紹介します。準備はできましたか？それでは進めましょう！フロントエンドとバックエンドのWeb開発シンプルに言うと、あなたがWebサイト上で見たりやりとりするものは、すべてフロントエンドです。例として、テキスト、画像、ボタン、フォームなどをイメージするといいでしょう。しかしWebサイト上には、スライダー、ポップアップウィンドウ、地図、アニメーションなどの動的要素も含まれています。ユーザーが見ることができるものは、フロントエンドの一部であるといえます。フロントエンドの基盤は、HTML5/CSS3/JavaScriptの3つの技術に基づいています。HTML/CSS/JavaScriptでコードを書いている開発者は、「フロントエンドエンジニア」と呼ばれています。あなたがインターネットからWebサイトやWebアプリケーションを読み込むたびに、ブラウザが表示するコードを彼らは書いているのです。つまり、フロントエンドコードを書くということは、ブラウザのためのコードを書くことといえます。これはおそらく分かりやすい表現だと思います。もちろん、フロントエンドに加えて、バックエンドもあります。Webサイトのバックエンドは、サーバー、アプリケーション、データベースで構成されています。これらは、すべてのデータが格納され、Webアプリケーションのロジックが実行される場所です。多くの場合、バックエンドは、最初にフロントエンドを可能にしているものです。PHP/Ruby on Rails/Python/Java/Node.js（これはJavaScriptを使用しますが、後で詳しく説明します。）などの技術は、WebサイトやWebアプリケーションのバックエンドをプログラムするために使用されます。最後に、いわゆる「フルスタックWebエンジニア」とは、フロントエンドとバックエンドの両方の技術を使って、完全なアプリケーションや複雑なWebサイトを書くことができる、スーパーヒーローのようなエンジニアのことです。しかし今日では、さまざまな技術、ライブラリ、フレームワークがWeb開発において登場しているため、本当に優秀なフルスタックWebエンジニアになることは、ますます難しくなりつつあります。さて、以上は簡単な概要でした。これらの用語を正しく定義しておくことは本当に重要です。というのも、あなたがWeb開発に関する情報を読むときによく目にするからです。また、あなたはいずれどちらの学習に時間（およびお金）を費やすか選択する必要があります。 JavaScriptが次の唯一のステップです HTML5/CSS3/JavaScriptはすべてフロントエンドのWeb技術であることを見たので、JavaScriptを学習することがあなたの次のステップになることは論理的に考えて妥当ですね？なぜなら、JavaScriptはあなたがフロントエンドのWebエンジニアになるために必要だからです。あなたがフロントエンドについて学習している最中であるとしたら、JavaScriptを学習することはその仕上げになります。しかし、理由は他にもあります。これはJavaScriptに今すぐ進むべき最大の理由ではありません。今日ではWeb開発に多くの技術があり、初心者には選択肢が多すぎます。その選択は難しいのです。Web開発の世界では、新しい優れた技術、フレームワーク、ライブラリが常に登場しています。多くの受講生はこのことに混乱し学習を完全に諦めてしまいます。何千人もの受講生は次のような状況に至っています。フロントエンドとバックエンドのどちらに焦点を当てるべきだろう？ Reactが本当に人気が高いと聞いた。だから私はそれを学ぼう。Reactは素晴らしいフロントエンドのフレームワークだという情報を読んだので、これを始めてみようか？それとも、AngularJSが良いだろうか？しかし、バージョン2はバージョン1と全く異なっているようだ。何だが混乱してきた。私はバックエンドの方が好きだと思う。… だからPHPを学ぶべきでは？PHPは簡単らしい。でも、今ではもう誰もPHPを使用していないようだ？むしろ、クールなスタートアップはどこもRuby on Railsを使用しているようだ。他には何があるだろう？Python？Java？Node.js？結局のところ、Web開発は私に向いていないかもしれない… そして、この状況はさらに続くでしょう。簡単ではないことが明らかです。しかしそうである必要はありません。なぜなら、JavaScriptが究極の答えだからです。JavaScriptを学ぶとしたら、あなたは今日、そして将来のために備えができることになります。その理由について見てみましょう。 [PR] フロントエンドで副業する学習方法を動画で公開中理由1：JavaScriptはWebサイトやWebアプリに動きを与えます JavaScriptを使うと本当にすばらしいものを作ることができます。だから、世界中の大手企業がWebサイト上でJavaScriptを使用してユーザーのエクスペリエンスを向上していることも不思議ではありません。例として、ドラッグ＆ドロップなどの多くのユーザーインタラクションを伴うリアルタイムのWebアプリケーションは、本格的なデスクトップアプリの機能性を備えていることを考えてみましょう。あるいは巧みな効果やアニメーションの伴う美しいデザインのLP（ランディングページ）を考えるのもいいでしょう。具体例を4つご紹介します。 AirBnB 検索のインターフェースは完全にJavaScriptで動いています。 Googleスプレッドシートスプレッドシートのアプリケーション全体がJavaScriptで書かれたものです。 Blu Homes JavaScriptの効果やインタラクションを数多く含む美しいウェブサイトです。（ページ全体をスクロールしてメニューをクリックしてみることをおすすめします）。 St. Louis Browns JavaScriptが使われている豪華なWebサイトです。さて、これらは本当に発展的な例ですが、JavaScriptがいかに強力であるか、いかに重要な言語であるかを示すには十分であると思います。実際に、JavaScriptは「インターネットの共通言語」と呼ぶことができるでしょう。世界のWebサイトの99％がフロントエンドでJavaScriptを使用していると言っても過言ではありません。つまり、JavaScriptを学習することは単なる選択肢ではなく、必須です。しかし、このことはJavaScriptはフロントエンド以外でも使用できるという事実を考慮していません。理由2にそれを示します。理由2：JavaScriptはバックエンドでも使用できます私の意見では、これがJavaScriptを学ぶべき最大の理由です。 JavaScriptはブラウザ（フロントエンド）だけでなく、サーバー上でも使用できるため、バックエンド開発にも効果的に使用できます。これは、JavaScriptをサーバー上で実行するための軽量な開発環境であるNode.jsを使用して行います。 Node.jsはJavaScriptをサーバーに導入することにより、この言語に新しい可能性をもたらしました。だから、JavaScriptを使用すれば、あなたは効率的にフルスタックエンジニアのスーパーヒーローになることが可能です。Node.jsを実際に使用するためにはいくつかのことを学習する必要がありますが、全く新しい言語を学ぶよりも簡単です。世界最大の企業の中には、高速でモダンなNode.jsをすでに使用しているところもあります。たとえば、Netflix、Uber、PayPal、LinkedInなどの企業です。これらの企業はすべて、バックエンドでJavaScriptを使用しています。要するに、あなたのWeb開発のキャリアに最も効果を発揮するのは、他のどの言語よりもJavaScriptであるといえます。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

JavaScript

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。本記事ではイベントレポートをお届けします。これからプログラミングの学習を始める方は参考にしてみてください。ゲスト大場光一郎氏（株式会社クラウドワークス執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。堀井雄太氏（株式会社Fablic チーフエンジニア）「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ（現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。クラウドワークス大場氏講演まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。エンジニアになったきっかけ学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。クラウドワークスでの開発体制クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。これからエンジニアを目指す人に期待すること大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。 [PR] フロントエンドで副業する学習方法を動画で公開中Fablic堀井雄太氏講演続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。エンジニアになったきっかけもともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。 Frilの開発体制株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。これからエンジニアを目指す人に期待することどんなエンジニアになるかを意識することが大事とのことです。会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。パネルディスカッション「これからのエンジニアに必要なスキルとは」続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。エンジニアになる前の段階エンジニアとして働く段階エンジニアとしてさらにスキルアップする段階エンジニアになる前の段階（村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。（村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？（堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。（村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。（大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。（村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？（大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。（村田）それはありますよね。（大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。（村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？（堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。（大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。（村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。（大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。（村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。（村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？（堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。（大場）個人的には難しいところって技術と技術の境目の部分かなと。例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。（村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。（大場）悟るまでですね（笑）（村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？（大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。（堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。（村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。（大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。エンジニアとして働く段階（村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？（堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。（大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。（村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。（村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？（大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。（堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。（村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。（村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？（堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。（大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。（村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。（村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？（大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。（堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。（村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。エンジニアとしてさらにスキルアップする段階（村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。（大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。（村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。（村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？（堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。（村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？（大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。（堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。会場からの質問（村田）ここからは会場からの質問を受け付けたいと思います。ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。（大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。（村田）他のご質問はいかがでしょうか？ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？（村田）まず育てる側の僕の方から話をさせていただきますね。まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。エンジニアが足りないということに対して、大場さんはいかがでしょうか？（大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。（堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。（村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。（村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。（堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。（大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。（村田）堀井さん、大場さん今日はどうもありがとうございました。イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそう

イベントレポート

JavaScriptとは何なのか！初心者向けに徹底解説

本稿は、Coding Dojoのブログ記事を、Coding Dojo Blogより了解を得て日本語翻訳し掲載した記事になります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。また、JavaScriptとは何かを解説した動画もあります。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次 JavaScriptとは JavaScriptの利用シーン JavaScriptの強みなぜJavaScriptは不可欠なのか学習方法 JavaScriptとは多くの人は知らないことですが、私たちはみんなJavaScriptのヘビーユーザーで、1日に何十回も使っています。デスクトップのコンピューター、携帯電話から、スマートテレビ、最新モデルの車に至るまで、ほぼ全てのデバイスにJavaScriptが相当使われています。私たちがウェブ検索をしたりコンピュータに囲まれた生活を送る上で、役立っています。このようにJavaScriptはあらゆる場所に浸透していますが、あなたはそれでもまだ「JavaScriptとは結局何なのだろう？」と疑問に思うかもしれません。なお、JavaScriptはJavaとは全く別の言語です。 JavaScriptはプログラミング言語であり、ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするために使われています。実質的に、私たちがブラウジングで体験できることのすべては、ブラウザの中で使われているJavaScriptの処理によるものです。 Webサイトの外観のデザインや使い心地から、Netflixのサイトに表示される映画の題名のようなサイト内の情報表示に至るまで、JavaScriptが使われています。 [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptの実行される一般的な場面 JavaScriptは、Webページを構成する全てのオブジェクトを操作できるため、魔法のようなことを実行できます。しかしながら、JavaScriptの実行される一般的な場面はあまりにも多いため、多くの人は、JavaScriptが隠れて使われていることにすら気づかないのです。 JavaScriptの実行される一般的な場面としては例えば次のようなものがあります。：ユーザーが適切な形式でメールアドレスをフォームに入力したかどうかをチェックする。 Google.comのページをロードするとき、テキストカーソルを検索ボックスに自動で出現させる。 Webページ全体をリロードしなくても、一部分だけロードすることを可能とするので、例えば映画のWebサイトで、次回のシリーズのリスト表示の部分だけロードしたいときなどに役立つ。最も単純なレベルでは、JavaScriptのコードは、ブラウザがWebページにアクセスしたときにダウンロードされます。ページのロードが完了して画面上に表示されると、JavaScriptのコードが実行されて、次に実行するべき動作がもしあればブラウザに指示します。テキストカーソルを検索ボックスに表示するなどの動作がすぐに実行されない場合、JavaScriptのコードはアイドリング状態になり、特定の「イベント」の発生を待つことになります。「イベント」が発生した時点で、JavaScriptのコードが発動され、動作を実行します。例として、登録用のフォームでパスワード欄に入力しているときには、JavaScriptはユーザーがパスワード欄に文字を入力し始める瞬間を待っています。Webサイトがパスワードに使える有効文字として認めていない文字を、ユーザーが入力しようとする場合には、JavaScriptのコードはすぐにこの問題に気づいて、パスワード欄に小さな警告メッセージをポップアップで表示して、ユーザーに知らせます。 RubyとJavaScriptの違いとはについて現役のエンジニアが回答した記事も合わせてチェックしてみてください。 JavaScriptの強み玄人のユーザーは、考えたり気づいたりしているかもしれませんが、パスワード欄に有効な文字が入力されたときの認証プロセスは、サーバー(：Webサイトのリモートホストとなるコンピュータ)によっても処理できるはずです。ここにJavaScriptのテクノロジーの基本的な強みがあります。つまりJavaScriptは、ユーザーの使っているデバイス上で、即時にタスクを処理することができるのです。通常の場合のように、Webサイトとサーバーで情報の送受信をするときに必要な時差はかかりません。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

JavaScript

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。目次WebアプリケーションフレームワークとはASP.NETとはJavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり jQueryというのは、何でしょうか？田島悠介 JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。大石ゆかり新しい書き方を覚えるのは、少し面倒じゃないですか？田島悠介そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！ jQueryとは jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。 jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。 jQueryでできること jQueryの大きな特徴はブラウザの違いを意識せずに済む HTMLのDOM操作が簡単にできる Ajax処理が簡単に記述できるの3つです。詳しく解説していきます。 1.ブラウザの違いを意識せずに済む JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、 Chrome FireFox InternetExproler Safari 等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。 2.HTMLのDOM操作が簡単にできる jQueryの主な用途は、HTML部品の操作です。（HTMLの部品を、DOMと呼びます。） DOM操作の例テキストボックスの中身を取得したり、変更する画面部品の表示をボタン一つで非表示にしたり、再表示させる CSSをユーザー操作に合わせて変更する jQueryでは、これらの操作が簡単に実現可能です。また、「HTMLやCSSのコーディングはできるけど、JavaScriptはわからない」というエンジニアがリリース当時は多かったため、CSSのセレクタ記法によりHTML部品を操作できるように設計されています。例えば、テキストボックスの中身を取得するコードは、以下で実現できます。 HTML <input type="text" id="tBox" class="font-tbox" /> jQuery ( JavaScript ) //方法１ // CSSのセレクタ記法により、idが「tBox」のHTML部品を操作できる。 $("#tBox").val(); //方法２ // CSSのセレクタ記法により、「font-tbox」のClassを持つHTML部品を操作できる。 $(".font-tbox").val(); CSSセレクタ記法とは、このようにHTMLが持つ情報に「#」や「.」を指定して、HTMLファイルからDOMを検索して取得するための記法です。 3.Ajax処理が簡単に記述できる Ajaxとは、Asynchronous JavaScript And XML の略です。直訳すると、「非同期（で動作する）JavaScript と XML」です。（現在はデータのやり取りにXMLではなくJSONを使うため、XMLに特に意味はありませんが、Javascriptからのサーバー通信にはJSON形式データ利用時でも、XMLHttpRequest(XHR)オブジェクトを利用します。) 通常、HTMLの画面からサーバーとやり取りする際には、「submit処理」（お問い合わせフォームの送信ボタンを押した場合、等）を行い、サーバーにデータを投げ、応答を待ってから別のHTML画面全体を読込みなおす・・・といった処理が昔は主流でした。ところが、最近は会員登録サイトにidを入力するだけで、テキストボックスの上部に「既に登録済みのIDです」などの表示が出てきて、「すぐにそんなことがわかるのか」と驚かれる方も多いと思います。これは、Ajaxという非同期通信技術により実現されています。Ajaxは、基本的には画面表示中のHTMLページとは無関係に、裏方のJavascriptだけでサーバー通信してしまう技術です。そのため、クライアントとサーバーが通信中であってもHTML画面をユーザーが操作し続けることができます。この技術の発展により、SPA（Single Page Application）という、画面遷移せずにインタラクティブな多目的操作ができるアプリケーションを提供する方式もずいぶん増えてきました。 Ajax技術の普及により、ユーザーがサーバーと通信（キャッチボール）する際の方式が、2通り選択できるようになりました。 HTMLからのsubmit処理によりサーバー通信する方式（同期処理方式） AjaxによりJavaScriptからサーバー通信する方式（非同期処理方式） jQueryは、このAjax処理を簡単に記述できるように設計されています。 [PR] フロントエンドで副業する学習方法を動画で公開中jQueryでできないこと jQueryは、基本的にはHTMLのDOM操作とAjax処理を簡単に記述するためのものです。そのため、JavaScript内部における処理は、基本的には通常のJavaScriptコードで記述します。例えば、以下のような場合です。変数に格納した数値同士の足し算配列データの操作オブジェクト型データの操作 JavaScript内のループ処理コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

JavaScriptとASP.NETについて現役エンジニアが解説【初心者向け】

Webアプリケーションフレームワークとは

ASP.NETとは

JavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

【データから紐解く！】人気プログラミング言語を徹底比較！

HTML5/CSS3を学んだ後にJavaScriptを学習するべき5つの理由

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

JavaScriptとは何なのか！初心者向けに徹底解説

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Webアプリケーションフレームワークとは

ASP.NETとは

JavaScriptとASP.NETなどのWebアプリケーションフレームワークを組み合わせた開発の例

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ