プログラムの勉強をすることにしました

このサイトは雑多な記事が置いてあるのですが、元々はブログの作成法などを載せたいな、と思っていました。しかし、WordPressテンプレート(このサイトはsimplicity)が優秀なため、HTMLの基礎すら学んでいませんでした。

しかし、ゲーム「世界樹の迷宮5」をプレイしている時にふと、「スキルシミュレータを自分で作ってみたい」と思いました。しかし、スキルシミュレータの作り方を載せているサイトは全然見つかりませんでした。

そこで、最終目標を「世界樹の迷宮5スキルシミュレータを作る」として、1から勉強しようと思います。

スポンサーリンク

web制作経験0でもスキルシミュレータは作れる?

今回、目標にするサイトがあります。それがこれです。

SQ5 Skill Simulator

…正直この時点で無理なんじゃないかと思い始めました。このプログラムはJavaScriptを利用しているので、JavaScriptの勉強もしないといけないですね。

HTMLとは何か

wikiより引用です。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。

…つまり、ウェブ上の文書を記述するための文法のようなものでしょうか。

このページもHTMLで書かれているのですが、私はプラグイン「TinyMCE Advanced」を使っているため、HTMLの命令文をほとんど使用していません。まずはそこから始めたいと思います。

CSSって何?

またwikiより引用です

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

HTMLで書かれた要素を飾るための仕様がCSSということでしょうか。

JavaScriptってなんなのよ

なんと世の中には「Java」と「JavaScript」があり、両者は違うものらしいです。両者の違いを説明しているページがありました。

https://divide-et-impera.org/archives/1597

目標ページがJavaScriptを使用しているようなので、JavaScriptの勉強をするようになるのでしょう。

コードを書く練習を出来るサイト

CodePenでコードの練習をしよう

HTMLは書いたらweb上で確認するという作業が必要になります。その面倒を解決してくれるサイトが「CodePen」です。

CodePenはweb上でプログラミングが出来るサイトです。コードを書いた結果が即座に反映されるため、練習には最適だと思います。

codepen例

このように書いたコードが白背景にすぐ反映されます。一々ブラウザで確認する必要がないですし、間違えていれば変化しませんから練習にはもってこいだと思いますよ。

とりあえず世界樹の迷宮の新作が発売するまでにはスキルシミュレータを作れるようになっていたいです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

コメント

  1. Kagar より:

    こんにちは。「SQ5 Skill Simulator」の作者です。アクセスログから貴ブログを見つけました。

    私の作ったシミュレータではjQueryというライブラリを用いています(他にも使っていますが、他はUIを良くするのが目的です)。なので、そちらの使い方も調べてみると良いかと思います。
    あとは…私のスクリプトは、CoffeeScriptという言語で書いてJavaScriptにコンパイルしたものを公開しています。なので、人間にはかなり読みづらいかと思います。CoffeeScriptにも興味を持たれたようでしたら、application.jsをapplication.coffeeに書き換えてアクセスしてみてください。data.jsも同様です。
    素人が趣味と勢いで作ったものなので、かなり非効率なことをやっている面もありますが、勉強の役に立てば幸いです。

    また見にこさせていただきますね。