オセロ作ってみた|環境構築
今回はチャレンジ企画第３弾『オセロを作る』の環境構築パートです。開発でコードを書くために必要なnodejs・vscode・Vuejsを使えるようにします。
この記事ではオセロの盤面を作成する際の手順を紹介します。
Vueという有名フレームワークを使った開発になるので、少しでもこの記事があなたのお役に立てれば幸いです。
はじめに
初学者からするといきなりフレームワークなんて言葉が出てきてしまうと難しそう感じるかもしれません。
できる限りわかりやすく解説しようと思っていますので少しご安心ください。
この記事は次の2つをメインテーマとしています。
- Vueとはなにか理解しよう
- Vueを使ってオセロの盤面を再現しよう
まずはオセロの盤面をVueで構築するために必要な知識を最低限インプットしていきましょう！
Vueとは何か？
世の中には開発の手間を省くために様々なツールが存在します。
今回使う『Vue』に関しても手間を省いり開発をらくにしたりするために現場で実際に使われているフレームワークというツールです。
フレームワークとは？
英語ではframework（骨組み、枠組み、構成、体制）という意味ですが、プログラミング言語の世界だとプログラムを作る時の土台となるプログラムをのことをさします。
フレームワークを使うメリット
フレームワークには開発に役立つ機能が豊富に搭載されていてスムーズに開発を進めることができます。
また書き方もある程度統一されるので、他人が書いたコードでも可読性が高かったり、プログラムの保守性も高くなります。
フレームワークを使うデメリット
フレームワークにはメリットだけではなく、もちろんデメリットも存在します。
主なデメリットとしては下２つです。
- 学習コストがかかる
- フレームワークを使うまでの環境構築が必要
逆にいうと学習コストと環境構築以外でほぼデメリットは存在しないとボクは思っているので、基本は使う方針が望ましいです。
コーディングをする為の準備
ここからはこれからコードを書くための環境構築を一緒にしていきましょう。
用意するものは下の4つです！
- パソコン
- nodejs
- npm
- vue
- vscode
準備する順番も番号通りです。
まずはお手元のパソコンに『nodejs』をインストールする方法を紹介します。
nodejsのインストール
nodejsのインストール方法はとても簡単です。
まず公式サイトにアクセスしインストーラーをダウンロードしましょう。（既にインストールができている人はこの作業は不要です。）
インストーラーは自分のパソコンにあったものを選びできればLTS版を選びましょう。
LTS版とはLong Term Supportの略で日本語にすると長期サポートという意味です。
ダウンロードできたらインストーラーを起動しオプションなどは変更せずそのまま進めて終了です。
不安な人は下のリンクから詳しいインストール方法を確認できます。
ダウンロードできたらインストーラーを起動します。
起動できたらオプションなどは変更せずそのまま進めて終了です。
最後にインストールできたかコマンドラインに下のコードを打ち込んでください。
node -vEnterを押した後に下のようになればOKです。
v11.14.0npmのインストール
npmとはNode Package Manager（ノードパッケージマネージャー）の略で、開発に必要なプログラムを準備する時に役立つツールです。
最近はnodejsをインストールすると一緒にインストールされるみたいなのでインストール作業は基本的に不要です。
nodejsのインストール作業が終わっていれば下のコマンドを実行してください。
npm --version入力後Enterを押して下のようにバージョンが返って来ればインストール完了です。
6.1.0インストールできていない場合・npmのみインストールしたい場合
インストール手順は初心者の人からするとちょっと見慣れないコマンド処理でのインストールになります。
先程開いたコマンドラインに下のコードを入力してください。
sudo npm install -g npmEnterを押すと自動的に必要なプログラムをパソコンにインストールしてくれます。
パソコンのスペックにもよりますが大体1-2分で処理が終わると思います。
終わり次第インストールできてるか下のコマンドを入力して確認してみましょう。
npm --versionEnterを押したあと下のようにバージョンが帰ってきたらインストールできています。
6.1.0Vueのインストール
次はコマンドラインに下のコマンドを入力してください。
npm install -g @vue/cliEnterを押すと処理が実行されますが少し時間がかかります。
全ての処理が終わったらインストールできているか下のコマンドを入力して確認しましょう。
vue --versionEnterを押したあとバージョンが返って来ればインストール完了です。
@vue/cli 4.3.1ここまで来ればあと少しで環境構築終了です。
vscodeのインストール
最後にコードを書く為のソフトであるテキストエディタのインストール作業です。
今回テキストエディタに採用するのはvisual studio code（通称:vscode）です。
インストール作業はnodejsのようにとても簡単で、公式サイトからインストーラーをダウンロードし実行するだけです。
ここまでの手順が今回必要なプログラミング環境です。
Vueで新規プロジェクトを作る
はこれから実際にプログラムを書く為の最終準備段階に移ります。
まずはvscodeを起動して作業するディレクトリ（フォルダ）を開きましょう。
開けたらターミナルで下に書いてあるコマンドを実行します。
vue create reverseこんな感じで入力できたらEnterを押す。
そうすると次の3択が出てくるので今回はMaually select featuresを選択肢てEnterを押す。
ちなみに選択はキーボードで矢印キーで操作できます。
次にプロジェクトで使うパッケージの選択画面になるので次の5項目を選択してください。
- Babel
- TypeScript
- CSS-Processers
- Linter/Fomatter
- Unit Testing
選択した後はこんな感じになります。
ちなにみ選択はSpaseキーですることができます。
次にVueのバージョン選択ができます。
お好みになりますが今回は古いバージョンを選択しました。
次にクラススタイルでコンポーネントを記述するか聞かれます。
今回はクラススタイルでの開発をしたいので『Y』を入力しEnter。
ここもそのままEnter。
スタイルの選択はSass/SCSS(with dart-sass)を選択します。
ここではコードの整形ツールの選択ができます。
一番上のESLint with error prevention onlyを選択してEnterを押す。
保存時にコードの整形を実行したいのでLint on saveを選択してEnterを押す。
今回テストは書くつもりがありませんが『Jest』を選択しておきましょう。
設定ファイルの種類を聞かれるます。
In package.jsonを選択してEnterを押す。
最後に今の設定をログで保存しておくか聞かれるのでお好みでどうぞ。
ボクは『n』を選択しました。
そうすると必要なパッケージ情報をダウンロードし始めます。
少し放置すると下のようなテキストが出てきます。
これが出てきたら準備が整った状態になります。
プロジェウト作成後のディレクトリはこんな感じです。
まとめ
今回はここまでです。
プログラミング学習をする時に環境構築でつまずいてしまう人は実は結構います。
環境構築の仕方がわからないとプログラミング学習までのハードルもいっきに上がってしまいます。
ですが環境構築なしでプログラミング学習を進めていくことは限界があります。
あなた自身の可能性を広げるためにも環境構築＝プログラミング学習と考えて前向きに取り組んでみてください。
案外みんなが使っている共通のソフトなのでわかってくるとそんなに難しくありません。