オセロ作ってみた

アイキャチ画像
2022/07/20
2022/07/20
soReTNIK

今回はチャレンジ企画第3弾『オセロを作る』です。内容が少し複雑ですが初学者に向けて作った記事なので気軽に立ち寄って見てください。

この記事のテーマ

みなさんこんにちは!

この記事はプログラミング初学者に向け、オセロを作りながらプログラムを楽しく理解してもらえるように作成しました。

プログラミング学習は覚えることが非常に多く、学習内容も抽象的な概念がよくでてくる分野ですよね。

学習をしていると時々今学習していることが具体的にどんな時に時に役立つのか、本当に勉強する意味はあるのか、とても不安になりますよね。

記事を読んだ人の中から1人でもプログラミングの楽しさを感じれた人がいれば嬉しいです!

自己紹介

まずは記事を読んでいただく方にちょっとでも親近感と勇気を持ってもらえるようボクのことを紹介します。

プログラミング学習歴

プログラミング学習歴は2年間です。

みっちりとスクールや現場で学習したわけではなく独学で学習を進めてきました!

勉強方法は通勤中に30分程度、休日に2-3時間程気が向いたら学習をするスタイルで、勉強時間は大体300時間くらいです。

【仕事の日】
(約20日出勤×2年間×30分=240時間)

【休みの日】
(休日2-3時間×月2回×2年間=約60時間)
=合計約300時間

勉強してきたプログラミング系知識は下記リンクから詳細を確認してみてください!

プログラミング10ヶ月独学してみた

コーディングの方針

今回は今までボクが学習してきた知識でコーディングをします!

使う言語はTypeScriptです。

TypeScriptはJavaScriptの上位互換にあたるプログラミング言語で、JavaScriptに静的な型付けやオブジェクト指向などの概念が追加された言語です。

ペンタ

細かい説明は今回省きます。

詳細が気になる人は下記リンクからボクがいつも参考にしているサイトに飛べるのでご活用ください。

参考サイト

公式ホームページ

そして今回はフレームワークにVue.jsを選択しました。

フレームワークを無理して使う必要はありませんが、出来る限り気軽にコーディングしたかったので使っています。

vueの方は解説記事で少し触れるのでVuejs+TypeScriptで開発を考えてる人の参考になれば幸いです。

完成したソースコード

完成したオセロは下のボタンからお楽しみいただけます。

これからこの記事を参考に作成する人は一度あそんでみてください。

オセロで遊んでみる

またgithubにも完成したコードをアップしているのでgitをお使いの方は下のリンクからどうぞ。

githubでソースコードを確認する

シリーズ紹介

環境構築編

パート2〜ディレクトリの最適化〜

パート3〜オセロの構造を定義する〜

最低限必要な開発環境

  • パソコン(スペックは問わず)
  • nodejs
  • npm(ノードパッケージマネージャー)
  • VScode(テキストエディタ)

パソコン以外はコードを書くためのソフトウェアのようなものなのでパソコンにインストール作業をします。

ペンタ

パソコンさえあれば大丈夫!