2017年5月、Unityの一大イベントであるUniteが開催されました。
Unity2017に関する魅力的な機能も色々発表され、期待に胸が膨らんじゃいます。

そういえば、今回のUniteには会社の後輩がボランティアスタッフとして参加しました。
「大変だったけどとっても楽しかった！」とのことですので、予定が確保できそうな方はぜひ次回のUniteに参加してみてください！（筆者も参加してみたい・・・！）

さてさて、今回はシミュレーションゲームのアルゴリズムを作ってみましょう。（賀好 昭仁）

## シミュレーションゲームというジャンルは広すぎました

改めて調べてみると、シミュレーションゲームには

・シミュレーションRPG
・恋愛シミュレーション
・フライトシミュレータ

など多種多様なゲームが含まれております。

ということで、今回はシミュレーションゲームの中でも特に歴史のある「マス目を使ったターン制戦略シミュレーションゲーム」のアルゴリズムを作ってみます。

※「マス目を使ったターン制戦略シミュレーションゲーム」ですとちょっと長いので、以降は「戦略シミュレーション」と称させていただきます。

＜余談＞
最近、ファイアーエムブレムヒーローズ（FEH）で久々にシミュレーションRPGをプレイしました。
筆者はこれまでシミュレーションRPGをいろいろプレイしてきましたが、すべて1マップに1時間前後かかるガッツリ系のゲームばかりでした。
FEHもその類かと思いきや、1マップ数分で終わるというスマホゲームらしいライトさ。
本格シミュレーションPRGでも工夫次第でここまでライトに作れるものなのか、と驚いたものです。（そして、ライトでも面白い・・・！）

## 戦略シミュレーションの要素を考えてみる

ゲームを作っていくにあたって、まずは戦略シミュレーションの要素を考えてみましょう。

戦略と名がつく通り、自軍のユニットを使って敵軍のユニットと戦うゲームですので、

・自軍ユニット
・敵軍ユニット

そして、戦うための舞台も必要です。
障害物の無い平原、うっそうとした森、山岳地帯など、さまざまなマップが登場すると楽しそうですね。

戦略シミュレーションに最低限必要な要素はこれくらいでしょうか。要素はとっても少ないですが、ユニットの種類・マップの種類・自軍と敵軍の戦力バランスや戦況・敵AIなどに変化をつければ、要素は少なくてもさまざまな楽しみ方ができます。

そういえば、将棋やチェスなどはユニットの種類が固定でマップも1種類しかありません。
それでも打ち手次第でさまざまな局面が楽しめることを考えますと、戦略シミュレーションの根本的な部分の奥深さが垣間見えますね。

## ユニットの動ける範囲を考えてみる

いざ戦略シミュレーションを作ろうとしたとき、まず頭を悩ませるのは「ユニットが動ける範囲をどう計算するか」だと思います。

将棋やチェスでは各コマの移動のルールがシンプルなため、動ける範囲を求めるのは簡単です。
ただ、戦略シミュレーションではユニットの移動力に応じて1回の行動で複数マス動けたり、同じ1マスでも平原と森で移動コストが変わったりと、さまざまな要素が絡んできます。

これらを解決するために、移動可能範囲を計算するためのアルゴリズムを実装する必要があります。

移動可能範囲は、簡単なアルゴリズムで求めることができます。まずはマップの各マス目の移動コストを列挙します。
移動不可のマス目は、どのユニットも移動不可能になるような大きな値を入れておけばOKです。
下の図では、移動コスト1の茶色のマスは平原、移動コスト2の緑色のマスは森、移動コスト9の灰色のマスは岩山（進入不可）と考えてください。

続いて、移動力の計算を行います。まずは動かしたいユニットが居るマスの座標に、そのユニットの移動力分の数値を入れておきます。下図は移動力4を持つユニットがマップ中央にいた場合の例です。

続いて、ユニットの居る上下左右のマスに、対象マスの移動コスト分を引いた値を入れます。
※対象マスに既に値が入っていた場合、上書きせずそのままにします。

下図では、ユニットの居る赤いマスを基準に、その四方のマス（黄色いマス）に値を入れています。
右側のマスは森（移動コスト2）なので、ここだけ数値が2になっています。

続いて、移動力の値を1減らしたマス、つまり値が「3」のマスを基準に同じ計算を行います。

あとは値を1ずつ減らしていき、0になるまで同じ処理を繰り返せば、移動可能範囲を導き出すことができます。
ちなみに、値がマイナスになったマスは移動力が足りず移動できないマスですので、最終的な移動可能範囲は下図の青いマスとなります。

特殊なマス（後述）がない限り、移動力や地系が変わっても同じ処理で移動範囲を求めることができます。

シミュレーションPRGや戦略シミュレーション全般で大活躍しそうなアルゴリズムですね！

ユニットを移動させる際にユニットが移動先にパッとワープしたり、移動不可マスを通って移動したりすると、プレイヤーは違和感を感じてしまいます。
違和感を感じさせないようにするためには、目的地までの移動経路を算出する必要があります。

移動経路は、先ほどの移動範囲の計算と逆の手順で導き出すことが可能です。

下図は赤いマスが移動先だった場合の例です。
まずは移動先マスの値（残りの移動力）に、そのマスの移動コストを足します。
四方にあるマスを見ると、上記の値に合致するマスが必ず1つ以上存在します。（図中の黄色いマス）
ユニットはこの黄色いマスを通って移動したことになります。
続いて黄色いマスを基点に同じ処理を繰り返すことで、徐々に移動経路が明らかになっていきます。

~~図 6 経路算出（移動先から2歩手前まで）~~

もし黄色いマスが複数存在する場合は「どちらからでも来られる」ことになります。

あとはユニットが元居た位置までこれを繰り返せば、移動経路が明らかになります。下図では、中央にある「4」のマスから「←↓←←」の経路と「↓←←←」の経路の2パターンが割り出せました。

## アルゴリズムの注意点と改良方法

今回は不要ですが、もしもマップに下記のようなマスが存在する場合は前述のアルゴリズムをそのまま使うことができません。

・移動力を消費しないマス
・通ると移動力が回復するマス

このようなマスに対応する場合、下記のような処理を加える必要があります。

・該当マスから周りのマスに対し、移動力の計算＆書き込みが終わったかどうかのフラグを設ける
・数字（残りの移動力）が埋まっているマスに対して、より大きい値が入れられる場合は値を上書き、上記フラグをクリアする処理
・ひと通りの計算が終わったのち、マス目上の最大移動力をベースに再度同じ計算を行う（この際、上記フラグが立っているマスは計算対象から除外）、全てのマスにフラグが立つまで何周も続ける

また、移動力回復マスにワープするマスを組み合わせると無限ループに陥る可能性もありますので、このようなマスを実装する場合は注意しましょう。

今回のサンプルプロジェクトはこちら。

https://github.com/akako/gamealgorithm-war-simulation/releases/tag/for_algorithm10

Unityで作ろう！ゲームアルゴリズム10 1

ユニットを選択して移動可能マスをハイライト、マスを選択して経路計算＋移動するところまでを作りました。
まだまだゲームとは言えませんが、これだけでも戦略シミュレーションの香りがプンプン漂ってきますね。

今回のアルゴリズムは、マス目を使った戦略シミュレーションであれば必ず活躍します。
HEX（6角形）のマス目でも同じアルゴリズムが適用できますので、ぜひ試してみてください！

【Unityで作ろう！ゲームアルゴリズム】シミュレーションゲームのアルゴリズムを作ってみる

筆者はずっとインドア派（というかゲーマー）だったのですが、最近は外出して体を動かすことにハマっています。

お散歩にジョギング、立ち寄った公園でお花の写真を撮るなど、楽しみ方はいろいろ。ちょっと歩くだけで、脳をビビっと刺激する変わった人や妙なモノに出会ったりするものです。アイデアが煮詰まったなら、ぜひ気晴らしに散歩に出てみましょう！

それでは早速ですが、今回はリバーシの対戦相手となるAIを作ってみましょう。（賀好 昭仁）

まずは用語の説明から入りましょう。
AIとは、Artificial Intelligence（人工知能）のことです。

世の中には様々なAIが溢れています。
そして、AIのほとんどは何らかの目的を達成するために作られています。
例えば、工業用の機械を制御して製品を作るための制御AIや、部屋中をくまなく掃除するための掃除機AIなど、その用途専用に最適化されたAIが沢山存在しています。
本記事で作成するAIも「リバーシの対戦相手を務める」という目的があります。

一方で、最近ディープラーニングと呼ばれる手法を利用した新しいタイプのAIが登場し始めています。

ディープラーニングとは、機械学習の手法のひとつです。
ざっくり説明しますと、まず「ニューラルネットワーク」という、人間の脳の仕組みを模した機能を備えるAIを準備します。
このAIにデータを与えると、AIはデータの特徴を分析し、学習していきます。
十分に学習が進むと、それまでの学習を元にして、与えられた情報がどのようなものであるかを判断することが出来るようになります。

ディープラーニングで出来上がったAIの例を挙げてみますと、2016年3月、Googleが「ネコを認識するAI」が出来たと発表し、話題となりました。

このAIがなぜスゴイかと言いますと、「人間がAIにネコとはどのようなものであるかを教えた」わけではなく、AIにYouTubeから取り出した1,000万枚の画像を与えてディープラーニングを進めた結果、「AIがネコの特徴を覚えた（ネコを判別させたかった訳ではないのに、勝手にネコを判別できるようになった）」という点です。

これは驚くべきことで、AIが置かれた状況に応じて臨機応変に（それこそ、まるで生き物のように）成長していける可能性を示唆しています。
いずれは「自ら言葉を覚え、人と自在に会話できるAI」なども誕生することでしょう。

いやはや、思い切り脱線してしまいました。

ディープラーニング用AIのプログラミングも記事にしたいところですが、筆者自身まだまだ理解が足りていませんので、いずれ機会があればということで。（笑

今回作成するAIは「リバーシができるAI」です。

一言で「リバーシができるAI」と言っても、実装の方向性はいくつか考えられます。

### １．ゲームの展開を予測するAI

今後のゲームの展開を予測し、最善と思われる手を打つAI

どういった手を打った結果どのような成果が得られたかを逐次収集し、どんどん強くなっていくAI

リバーシをプレイする上で「有利になる条件」「不利になる条件」を定義し、それに応じてプレイを進めるAI

リバーシの場合は打てる手が限られています。
ロジックが完璧に実装出来たとすると、1.のパターンが最強です。
AIに手を完全に予測されてしまうと、どう足掻いても勝ち目はありません。
その代わり、手を予測するために凄まじい処理能力が必要となります。

2.は対戦する度に強くなっていくAIで、実装するのがとても面白そうです。
ただ、仕組みがかなり複雑になってしまいます。

今回は一番シンプルな3.のパターンで実装を進めてみましょう。
（部分的に1.のパターンも使用します）

## リバーシのAIに必要なインターフェース

リバーシのAIが必要とする情報と、情報を与えられた時にどのようなレスポンスを返せばよいかを考えてみましょう。

まず、AIが次の手を打つために必要な最低限の情報は

・自分の石の色
・現在の盤面の状況

これらの情報から現在の状況がわかれば、次にどのような手を打てばよいかが計算出来るというわけです。

情報を受け取ったのち、AIが返すべきレスポンスは「次の手」です。
リバーシにおける「次の手」とは「どのマスに石を置くか」ということですので、マスの座標を返せばOKです。

## ランダムに石を置くAIを作ってみる

まずは適当なAIを作ってみましょう。
石が置けるマスからランダムで1マス選ぶAIです。

AIに必要な処理をまとめた基底クラスです。
盤面シミュレータのサブクラスを同梱し、簡単に盤面のシミュレーションが出来るようにしています。
AIはこのクラスを継承し、フィールド情報を受け取って次の手を返すGetNextMove()メソッドを実装すればOKです。

https://github.com/akako/gamealgorithm-reversi/blob/master/Assets/Scenes/Game/Scripts/AI/Game_AI_Base.cs

ランダムに石を置くAIです。
盤面シミュレータから石を置けるマスを取得し、その中からランダムで1つ選んで返すだけの処理となっています。

https://github.com/akako/gamealgorithm-reversi/blob/master/Assets/Scenes/Game/Scripts/AI/Game_AI_Random.cs

以下にAIを組み込んだプロジェクトを準備しましたので、試しにプレイしてみてください。

https://github.com/akako/gamealgorithm-reversi/releases/tag/for_algorithm3

今回のAIはシンプルで組み込みはとても簡単ですので、組み込みに関する解説は割愛させていただきます
（Game SceneController.cs・Game Field.cs・Game Cell.cs スクリプトの前回との差分をご確認ください）

## ちゃんと動くAIを作ってみる

Game AI RandomのAIと対戦してみると、ランダムに石を置くだけではとっても弱いことがお判りいただけるかと思います。
次はリバーシのセオリーに沿って次の手を打つAIを作ってみましょう。

まずはセオリーを書き出してみます。
Google先生にセオリーを教えてもらい、実装しやすそうなものをいくつかチョイスしました。

・角を取る
・角の斜め隣は出来るだけ打たない
・序盤は少なく取る
・取った石が相手の石に囲まれている場所を狙う（「中割り」と呼ぶそうです）
・終盤は石をたくさん返せる場所を狙う

余談ですが、筆者は今回の調査で「中割り」を初めて知りました。

## セオリーの重み付けをしてみる

盤面の状況は様々で一概には判断出来ないため、「どの状況がどの程度重要か」をAIに教えてあげます。

・角を取る
「50ポイント」の重要度

・終盤までは角の斜め隣は出来るだけ打たない
盤面の3分の2が埋まるまでは、該当マスは「-30ポイント」の重要度

・序盤は少なく取る
盤面の3分の1が埋まるまでは、「取れる石の数 ✕ -10ポイント」の重要度

・取った石が相手の石に囲まれている場所を狙う（「中割り」と呼ぶそうです）
「取った石の周囲にある相手の石の数 ✕ 2ポイント」の重要度

・終盤は石をたくさん返せる場所を狙う
盤面の3分の2が埋まっていれば、「返した石の数 ✕ 5ポイント」の重要度

上記の計算を実装し、どの手を打てば良いかを判断出来るようにしてみます。
（なお、各値は筆者の感覚で適当に設定しています

前述の処理を実装したAIです。
石を置けるマスのポイントを計算し、ポイントが一番高いマスを返すというわかりやすい処理になっています。

https://github.com/akako/gamealgorithm-reversi/blob/master/Assets/Scenes/Game/Scripts/AI/Game_AI_Theory.cs

に同梱しており、Game SceneController.cs 63〜64行目のコメントを付け外しして

//ais.Add(Game_Field.StoneColor.Black, new Game_AI_Random(Game_Field.StoneColor.Black));
ais.Add(Game_Field.StoneColor.White, new Game_AI_Theory(Game_Field.StoneColor.White));

にすれば、Game AI Theoryと対戦出来るようになります。
ちなみに、両方の行のコメントアウトを外せばGame AI RandomとGame AI fTheoryの対戦を見ることも出来ますよ！

## （オマケ）AIに性格を付けてみる

AIにも個性があった方が、より一層ゲームが盛り上がります。

・調子に乗るAI
盤面に自分の石が多いと調子に乗って適当に打つようになるAI

・欲に目がくらんでしまうAI
3つ以上石をひっくり返せるならば、それがどんな酷い手であっても打ってしまうAI

・スロースターターなAI
序盤は適当に打つが、終盤になると急に強くなるAI

などです。
リバーシのAIであれば、上記のいずれもGame AI Theoryを少しカスタムするだけで作れるかと思います。

ゲームに登場するキャラクターの性格を考えて、それに相応しいAIを作ってみると良いかもしれません。

ディープラーニングからAIの性格まで、ずいぶん話が広がってしまいました。
ゲームにおいてAIはゲームバランスに直結するため、プログラマとしては腕の見せどころです。
強すぎず弱すぎず、プレイヤーが「心地よい」と思えるような対戦相手を作ることを目指しましょう。（激ムズゲームも需要はありますけどね）

また、複雑で面白いAIが作れるならば、それ自体がゲームになることもあります。
少し昔のゲームですが、シーマンやワンダープロジェクトJなどは高度なAIが主役の興味深いゲームでした。

応用の幅は無限大ですので、本格的にAIに関して勉強してみるのも楽しそうですね。

【Unityで作ろう！ゲームアルゴリズム】リバーシのAIを作ってみよう

グロースハッカーとは、世界でもっとも最先端のIT職種のひとつ。
シリコンバレーで流行し、日本のIT業界にもその需要は急速に広まっています。

でも、一体、何をする仕事のこと？
どんな成功例がある？
どうしたらなれる？

今回は、いまさら聞けないグロースハッカーの定義をまとめてみました。（イワタテ）

## グロースハッカーって何をする仕事？

グロースハッカーとは、会社、製品、サービスの成長（＝グロース）を加速させることを使命とする仕事のことです。あいまいすぎてよくわからない？
それもそのはず、グロースハッカーという言葉が生まれたのは2010年のこと。
まだその手法は、確立されているわけではありません。
言い換えてみれば、グロースに繋がる手法を自ら編み出し、実行できる人。
トライアンドエラーを繰り返しながら、新たな成果を創造できる人を、広くグロースハッカーと定義することができそうです。

## とはいえ、実際にはどんな行動をして、どんな成果を得ている？

【例1：1億8000万ドルの政治献金を集めたABテスト！】
2012年のアメリカ大統領選で、共和党のミット・ロムニー陣営は、弱冠24歳のグロースハッカー、アーロン・ジーンを招集。「好感度の高い」ウェブサイトデザインの変更を依頼しました。
ジーンは、徹底したABテストを敢行。
バナーのサイズ、位置、色などを、繰り返し微調整し、有権者にとってもっとも好感度の高いウェブサイトデザインを追求し、1億8000万ドルもの政治献金を集めることに成功したということです。
結果的に、大統領選は現職のバラク・オバマに敗北しましたが、この例はグロースハックの夜明けを告げる成功事例として知られています。

【例2：友人招待やSNS連携でユーザー数を2億7500万人まで増やしたDropbox！】
クラウドストレージの大手Dropboxも、従来にはないアイディアでユーザー数を爆発的に増やしたグロースハックの好事例。
たとえば、ユーザーを紹介したり、アカウントをFacebookやTwitterなどと連携すると、無料使用できる容量が増えるサービスは、後続の事業者にも非常に参考にされているようです。
また、ウェブサイトのトップページに存在するプロダクトは、2分間の動画とアプリのダウンロードボタンだけというシンプルな設計も、ユーザーのアクションをフォーカスする意図に適ったグロースハックですね。

【例3：3年で400万人の有料会員獲得を目指すクックパッド！】
料理レシピの紹介サイトとして有名なクックパッドは、グロースハックによって3年以内に有料会員数を現在の100万人から400万人に増やすという目標を設定しています。
具体的な手法としては、「有料機能の7日間無料お試し」や、「外部サービスの会員限定で無料クーポンを付与」、「誕生日クーポン」の発行、9月9日限定で無料クーポンを配布する「クックの日」キャンペーン、検索結果の最適化を目的とした「殿堂入りレシピ」の設置などが公開されています。
期間内の目標達成が果たせるか、見守っていきたい事例ですね。

## マーケティングと比較されることが多いけど、どう違うの？

共通しているのは、テレビやラジオ、雑誌などの既存メディアを使った従来的なマーケティング手法よりも、ウェブサイトやアプリといった、IT的な手法でテストを繰り返すという部分。

また、時には開発の現場と一体になって行動する必要があるため、現場の技術を知っている必要があるという点です。

その他の特徴を比較してみると、以下の通りです。

●予算と期間が決められている。
●手法が確立されていて成果は（比較的）安定的である。
●製品やサービスの開発に自らは携わらない。

●予算と期間は選択した行動によって流動的である。
●前例のない手法を生み出すため実際に行動してみるまで誰にも成果がわからない。
●製品やサービスの開発に、必要とあれば自らも積極的に携わる。

## どうしたらグロースハッカーになれる？

ビジネス特化型SNSとして知られるLinkedinには、自身の仕事を「グロースハッカー」と表記する例が増えているようです。
実際アメリカでは、マーケティングの仕事をしてきたという人でも、「マーケター」という呼び名を「グロースハッカー」と書き換えただけで、複数のIT企業からオファーが来ることもあるとか。
グロースハッカーの事例がまだ少ない日本でも、自ら「グロースハッカー」を名乗るのが、ほとんど唯一のグロースハッカーになる手段。
もちろん、名乗ったからといっていきなり能力が高まるわけではありません。
しかし、グロースハックという言葉の意味を知り、行動することを決意しただけで、仕事への意識は変わるはず。
目の前の仕事に対して、ただ無心で取り組むのではなく、「どうしたらもっと良くなる？」と自身に問いかけることが、グロースハッカーへの第一歩でしょう。

[グロースハッカーに関する求人を効率よく探し出すために、転職エージェントを利用してみませんか？](https://mynavi-agent.jp/entry/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv08)

グロースハッカーとは？～いまさら聞けないトレンドワード解説～

ビジネスのスピードが大きく変わったと言われるグローバル時代。中でも変化の早いIT業界で生きていくためには、そして活躍するためには、情報を味方につけ、武器としなければなりません。

今回は、デキるITエンジニアに人気のニュースサイトをご紹介。

新人エンジニアのみなさんが、そろそろ会社に慣れてきたかな…仕事に慣れてきたかな…と油断した今こそ、つぎのステップとしての「情報収集」をオススメします！

シリコンバレーに本拠を持つテクノロジーメディア。

国内外のスタートアップニュースやリーク情報が掲載される早さには定評があり、IT業界の最先端を継続的かつ効率的にキャッチアップすることが可能な定番中の定番。

とりあえずこれだけでも押さえておけば、世の中の流れに遅れてしまうことはなさそうです。

[http://jp.techcrunch.com](http://jp.techcrunch.com)

海外のITエンジニアやギークの間でマニアックな人気を集めているユーザー投稿型ニュースサイト。テキストはすべて英語。そして異常なまでにシンプルな外観に尻込みしてしまうかもしれませんが、まだ他のメディアに載っていないような現場の一次情報が流れたり、ユーザーは気になるニュースや技術的な悩みについて筋金入りのギークに質問・相談することができたりして、他にはないオンリーワンの魅力があります。

日本ではまだあまり知られていない今こそ、ここで得た情報が大きな武器になるかも？

[https://news.ycombinator.com](https://news.ycombinator.com)

「ITエキスパートのための問題解決メディア」というサブタイトルの通り、新人エンジニアが日々の業務で悩んだりつまずいたりする問題を技術的なTipsや仕事術の紹介で解決するブログメディア。

情報インデックスは設計・開発・運用構築といった業務フェーズ、あるいは使用言語や環境別に検索しやすいつくりになっているので、毎日巡回するだけではなく、何か問題が発生した際に辞書引きで使うのも便利です。

[http://www.atmarkit.co.jp](http://www.atmarkit.co.jp)

こちらは実装系の技術情報にフォーカスしたニュースメディア。実際のプログラミングにもすぐ活用できる具体的なソースコードが満載です。

トレンドの技術を仕事の現場に活かしたり、あるいは、使用できる言語の幅を広げたいというような自主的な勉強の教材として使用してみてはいかがでしょう。

日本を代表する最先端ギークのひとりとして知られる宮川達彦氏が主催するテクノロジー系ポッドキャスト。ライブドアの前身オン・ザ・エッヂ出身で、現在はサンフランシスコに在住する同氏が、世界中のギークをゲストに迎えて、最先端技術の将来展望やエンジニアの労働環境など幅広い話題をざっくばらんに語ります。

日本ではポッドキャストはあまり普及したイメージはないかもしれませんが、アメリカ西海岸では、実は一番新しい現場の情報はポッドキャストから発信されることがしばしば。活字にならない貴重な情報の収集は、ライバルに差をつける決め手となるかも？

※こちら、更新頻度は週に1回ほどです。

ニュースを読んでいる時間が惜しいような忙しい新人エンジニアにとって、Gunosyは強い味方。

使いこめば使いこむほど、配信されるニュースはエンジニアの自分が読みたいものへと最適化されていきます。ここまでに紹介したニュースサイトをすべてチェックするのは厳しいよ、と感じた方も、まずは3分で読めるニュースキュレーションサービスを使ってみて、毎日ニュースを読むという習慣から身につけるのはいかがでしょうか。

マイナビニュースは、マイナビ（旧・毎日コミュニケーションズ）が運営するニュースサイトで、IT系ニュースに強いサイトです。1997年に同社のパソコン雑誌『PC WORK!』がメールマガジン「PC WORK! HOT MAIL」の配信を開始したことに伴い、Web上でそれらのニュースを閲覧できるサイトとしてオープンした「MYCOM PC DOMAIN」が前身。1999年には「MYCOM PC WEB」の名称で独立したニュースサイトとなり、以後IT系の専門ニュースサイトとして運営が行われてきました。2007年4月、「マイコミジャーナル」にサイト名を変更し、それに伴い、IT系以外に映画・芸能・アニメなどのエンタテイメント情報や生活情報に関するニュースなども扱う総合ニュースサイトへとリニューアルを行いました。2011年10月、運営元の毎日コミュニケーションズが「株式会社マイナビ」に社名変更したことに伴い、同年11月8日付で同社のビジネスマン向けポータルサイト「COBS ONLINE」と統合され、『マイナビニュース』とサイト名称を改めました。

[https://news.mynavi.jp/](https://news.mynavi.jp/)

新人エンジニアが毎日見たい読みたいニュースサイト8選

## JavaScriptはフロントエンド開発に必要？

近年、WebサイトやWebアプリケーションは単なる情報提供の場から、動的なページ構成でユーザにインタラクティブな体験を与える存在となっています。

そのため、ユーザが快適にコンテンツを閲覧できるよう、動きのあるアニメーションやクリックに応じた視覚効果の変化など、様々な機能が求められるようになりました。フロントエンド開発は、このようなWebサイトやアプリケーションの表示・動作部分を担っています。

そして、フロントエンド開発において多く用いられているのがJavaScriptです。**JavaScriptはページに動的な機能を付与するプログラム言語として欠かすことができません。**

JavaScriptでできること6選！向いている人や学習方法も解説

## JavaScriptを習得してフロントエンド開発に役立てよう

フロントエンドエンジニアにとって、JavaScriptは必須のスキルです。*JavaScriptを活用することで、ボタンクリックに応じて要素のスタイルを動的に変更したり、スライダーやモーダルウィンドウなどの UIコンポーネントを実装したり、サーバとの非同期通信を行うことが可能です。*

フロントエンド開発で活躍したいプログラマーにとっては、ユーザが快適で使いやすいWebサイトやアプリケーションを構築するために、JavaScriptのスキルの習得が重要であると言えるでしょう。

この記事では、フロントエンド開発に携わりたい方のために、JavaScriptとフロントエンド開発の概要や、必要とされるスキル、JavaScriptフレームワークなどについて解説していきます。

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)</center>

## JavaScriptによるフロントエンド開発の概要

ここでは、まずフロントエンド開発の仕事内容と、JavaScriptがどのような言語であるかを確認しましょう。また、JavaScriptを活用できる職種の年収についても解説します。

### フロントエンド開発の仕事内容

フロントエンド開発は、Webサイトやアプリケーションの表示・動作部分を担当する役割です。
*主な仕事内容は、Webデザイナーが作成したデザインをもとに、Webページの構造と見栄えを実装するとともに、ページの動的な機能を実現することです。*

Webサイトだけでなく、WordPressなどのCMSを使ったコンテンツ管理システムの構築やカスタマイズも、フロントエンド開発に含まれます。CMSデザインテンプレートのカスタマイズや、プラグインの導入・設定などを行います。

フロントエンドとは？バックエンドとの違いや使う言語について解説

JavaScriptはプログラミング言語の1つで、Webブラウザ上で動作するスクリプト言語です。HTMLに出力された結果を書き換えることで、ページに動きをつけることができます。

*例えば、ページ上の広告にアニメーションをつけたり、ボタンをクリックすると要素の色や形状が変化したりするなど、ユーザとのインタラクションを実現する言語として用いられます。*

JavaScriptは様々なWebブラウザに広く搭載されており、「js」と省略して表記されることも多くあります。

名前からプログラム言語のJavaと関係があると誤解されがちですが、実際にはJavaとは全く異なる独立した言語です。

JavaScriptとは？特徴・メリット・何ができるのかを解説

### フロントエンドエンジニアの年収とは

フロントエンドエンジニアの年収は「マイナビエージェント職業別年収ランキング」での平均年収は385万円（※2024年3月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のエンジニア/プログラマを参考にすると、平均年収592万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりも、やや低めから高めであることが分かります。

*フロントエンドエンジニアで高収入を目指すためには、Web画面の構築に必須であるHTMLやCSSを深く理解し、JavaScriptのフレームワークやライブラリも使いこなせるよう、スキルを向上させることがポイントです。*

【参考】：[マイナビエージェント職業別年収ランキング](https://mynavi-agent.jp/helpful/income/category/creative_05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)
※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)

フロントエンドエンジニアとは？未経験から目指す効果的な転職方法を徹底解説！

## フロントエンド開発に必要なスキルとは

フロントエンド開発にはJavaScriptが欠かせませんが、ここではその理由を説明します。また、JavaScript以外に必要とされるスキルや、バックエンドとの違いについても解説します。

### JavaScriptがフロントエンド開発で人気の理由とは

JavaScriptは、Webページに動きを与えることができる言語です。イベントハンドリング、DOM操作、Ajax通信などの機能を提供し、利用者にインタラクティブな体験を与えることができるため、リッチなコンテンツのWebページを作るのに欠かせない存在です。

*また、JavaScriptがフロントエンド開発で広く活用される理由として、豊富なフレームワークやライブラリの存在も挙げられます。*

React.js、Vue.js、jQueryなどのフレームワークやライブラリの活用により、チーム開発における効率的な作業分担が可能になり、大規模なプロジェクトにも対応できます。

また、コードの品質を高め、保守性の良いアプリケーションを作り上げることにもつながります。

### フロントエンド開発で使われる言語

*Webページやアプリケーションのフロントエンド開発において、まず必須とされるのがHTMLとCSSです。*

HTMLは、Webページの構造と内容を定義する言語です。タグによって、テキスト、画像、リンクなどの要素を配置し、構造化されたドキュメントを作成します。WebサイトやWebアプリケーションの基礎となる重要な言語です。

CSSは、HTMLで作成された要素のスタイルを指定する言語です。フォント、色、レイアウト、アニメーションなどの視覚的な側面を細かく制御することができます。

また、JavaScript以外でWebページに動的な要素を追加できる言語として、JavaScriptに型付けを導入した言語であるTypeScriptもトレンドとして注目を集めています。

PHPも、動的なWebページを生成するのによく使用される言語です。主にサーバサイドのスクリプト言語として広く利用されていますが、WordPressなどのCMSがPHPで開発されているため、フロントエンドエンジニアにとっても馴染みのある言語です。

フロントエンドに使う言語とは？おすすめの勉強方法も詳しく解説

### フロントエンドとバックエンドの違い

*WebサービスやWebアプリケーションの開発では、フロントエンドとバックエンドの役割分担が行われています。*

フロントエンド開発は、ユーザが直接目にするインターフェースの構築を担当します。具体的には、HTMLでコンテンツの構造を組み立て、CSSでスタイルを整え、JavaScriptでインタラクティブな動作を実装することです。

一方、バックエンド開発はウェブアプリケーションの裏側の、ユーザから見えない部分の構築を担います。バックエンド開発者は、サーバ上でデータの処理やデータベースの管理、ユーザ認証など、様々な機能を実装します。

## フロントエンド開発におすすめのJavaScriptフレームワーク

JavaScriptが活用される理由として、フレームワークの存在が挙げられます。ここでは、フロントエンド開発に役立つ代表的なJavaScriptのフレームワークについて解説していきます。

お役立ち記事