サーバーを立ててWEBサービスを作ろう!

簡単でも無いけど難しくはない?

 最近はスマホの普及や、デジタル端末の一般化によってアプリを作ってみたい人や、プログラミングをやってみたいという人が爆発的に増えているみたいですが、実際に自分の知り合いなどでもそんな情勢をきっかけとして開発を始めたという人がかなりの数いらっしゃいます。

 しかし、実際にできるようになった人ややり始めた人がどのくらいいるかと問われると答えに窮することもかなりあるという実情になってもいます。そんな最初に躓いてしまう原因には幾つかありますが、その最もなものには、プログラミングが難しいものだと思い込んでいるという典型的なものと、また実際に作ろうとしているものが非常にハードルの高い難しいものだという事があるかと思います。また、更に、結局何をやったらいいのかよくわからなかったという人も中にはいらっしゃいます。

 ここではそんな最初で躓かないために何をやるべきか、何を学べばいいのか、どうやって学べばいいのかという情報を紹介していきます。是非何かを作る際の参考にして頂ければと思います。

HTMLはほぼ必須

 さてまず初めに必要なのはHTMLという物で、こちらは、Webサービスをつくる上で書かせない言語になっています。今見ているページもほとんどすべてがHTMLで書かれており、これが出来なければWEBアプリを作るのは中々難しい難題になってしまうかと思います。

 と言っても、例えば「箇条書きにしたいときはこれ」「見出しにしたいときはこれ」「タイトルはこうやって書く」と殆ど書いてある事を覚えるだけでマスターできますし、実際に様々な物を参考にしながらやれば、全く難しくはありません。

 もし、それでも難しいと思うのであればドットインストールといった動画付き講座で学んでみたり、また、「Progate | プログラミングの入門なら基礎から学べるProgate」といったようなゲーム方式で学べるサイトなどが非常にオススメです。

見た目つくり上げるCSS

 HTMLを学んだら次はざっとCSSに目を通しておくのが良いかと思います。しかし、ほとんどの人がこのCSSをガッツリやり込もうとして挫折してしまうのではないでしょうか? その原因の一つに、書き方は大体わかるんだけど、デザインセンスが無いという物があり、これだけは一朝一夕には解決出来る問題ではありません。そこでCSSを大まかに学習したら、このCSSの部分はBootstrapなどのCSSフレームワークなどを利用して作ってしまうのが非常にオススメです。ある程度色などが変えられる知識や、若干幅を調節したり文字の大きさをいじる程度の知識があれば、十分にこれらは使いこなすことが出来るでしょう。これを使えば、カッコイイ見た目を自分で作れなくてもある程度のアイディアとプログラミングの知識と、HTMLを用意できれば、直にWEBアプリやウェブサービスをつくり上げることが出来ます。Bootstrapに関してはドットインストールに別途講座があるのでそれを学んでみるのもいいかもしれませんね。

PHPというサーバースクリプトを学ぼう

 そこまでできたら今度はPHPというサーバースクリプトを勉強しましょう。勿論WEBアプリであれば、JavaScriptなども選択肢の一つに入るかもしれませんし、実際にHTML5とJavascriptでWebアプリを作っているところもかなり多くあります。しかし、PHP自体がWebサービスのためにつくられた言語であるという側面が強いため、初級者でも学びやすく、開発しやすい言語として知られているため、まずはPHPから入る事をオススメ致します。

 さて、ちなみに今まで学んだことと、このPHPの何が違うかというと、

 といった様々な処理をしてくれる仕組みを作り上げることができるようになっているのです。HTMLとCSSだけではきれいなチラシを作ることしか出来ませんが、これを学ぶことにより、お問い合わせフォームをつけたり、掲示板をつけたりと様々な処理する機能をつけ足せるようになるわけです。

 これに関しても前述したprogateやドットインストールから入ってみるのがいいかと思います。

結局のところHTML、CSS、PHPができればOK

 というわけで、結局のところ、HTMLとCSSがちょこっと、そしてPHPができればウェブアプリはさくっと作ることが出来るようになるという訳です。しかし、どう勉強すればいいのか、コツや導入するといいものに関してまだまだ悩みはつきないかもしれません。そこで、もう少し突っ込んだところに関しても説明していきます。

勉強するコツ

わからなくても書く

 最初のうちは何を言っているのか、どうやっていけばいいのか全くわけがわからないかと思いますが、とりあえず手を動かして試行錯誤してみましょう。またうまい人のソースを見本にして書いてみるというのも非常にいいかと思います。

ググる

 わからないことにぶちあたったらGoogleでわからないワードを検索しましょう。

 この世でわからないことの殆どはググることによって解決出来ます。どうしてもググるキーワードがわからない出てこないという時は知恵袋や、プログラミング専門の質問掲示板などでどうググれば出るのか質問してみましょう。

上手い人のコードを読む

 コードを読むのもwebプログラミングのいい勉強になります。特にレベルの高い人のコードを読むと非常に勉強になることが多いので、書き方などを真似してみたりするのもいいでしょう。ちなみにGitHubやcodepenなどのサイトでソースを見ることをオススメします。codepenは実際にどう動くのかも見れて面白いです。

導入するといいもの

開発環境

まずは開発環境を整えましょう。

開発環境とは、自分の書いたプログラムをローカル(自分のパソコン)でのみ動作させる環境です。

これがなければ、実際に動くかどうかを確認するのは非常に手間がかかる作業となってしまいます。

またローカル開発環境と導入したほうがいいものは以下の通りです。

 まずはこれらをインストールすることから始めましょう。特にPHPを学習する際にはXAMPPがあった方が何かと便利ですので導入してみましょう。

XAMPP

 これはPHPなどといったサーバーサイドスクリプトをローカル環境でテストするのに必要になるもので、例えばindex.phpといったファイルなどであれば、ブラウザでその挙動を通常のままでは確認できません。しかしこのXamppを導入するとApacheやMysql、そしてPhpmyadminなどが利用できるようになるため、ローカルで実際の挙動を確認することが出来るようになります。是非導入してみるといいでしょう。

テキストエディタ

 なんといってもいいテキストエディタを選ぶことが、今後の開発速度につながります。ですので、最初の最初で使うエディタを間違えてはいけません。勿論Winの標準のメモ帳でも開発自体は可能ですが、あまりにもしょぼすぎますので、様々なエディタを使って検討してみるというのが必要になるかと思います。ちなみに自分自身が開発で愛用しているのはSublimeTextです。

Emacs

世の中の優れたプログラマーの多くは Emacs を使っていると言われています。むしろ、ソースが綺麗に書ける超一流のプログラマーのほとんどはEmacsを使っているといっても過言ではないでしょう。(それかVi) プログラマーになりたいのであれば、 テキストエディターには Emacs を選ぶべきだと主張する人も多く、非常に人気なエディタの一つです。

SublimeText

 恋に落ちるエディタと呼ばれているほど非常に人気が高いエディタで僕も恋に落ちました。一般的に開発ですとVimやEmacs、またCodaなどが有名ではあるのですが、非常に美味しいのはカラースキームの22種類がデフォルトで搭載されていることと、カスタマイズが一切不要なので、初心者でも導入に迷わないという利点があり、更にクロスプラットフォーム対応で、更にパッケージ機能によってさらに快適に拡張していけるなど、まさに自分色に染められる恋人としてふさわしいテキストエディタになっています。オススメです。

Atom

 ブラウザ上で動くエディタの中で化け物級の性能を持っている上に非常に軽いのがこのエディタです。最近のアップデートでUIが以上にかっこ良くなった上に、拡張のしがいがある素晴らしいエディタになっています。SublimeTextと上手く恋人になれなかった場合はこちらを使ってみるのがいいかと思います。

サクラエディタ

 これも非常に優秀なテキストエディタで使いやすいものではあるのですが、PHPのプログラミングにサクラエディタを使用する場合、プログラミングがしやすいように、PHPのコマンドやキーワードが強調表示される設定を追加しなくてはいけません。ただ、検索すればこのやり方などは出てきますので、自分のプログラミングするものに合わせてこの色替えの設定をしておくことが必要となるでしょう。