Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the all-in-one-seo-pack domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yuki/argontown/wordpress/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wpforms-lite domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yuki/argontown/wordpress/wp-includes/functions.php on line 6114

Notice: 関数 _load_textdomain_just_in_time が誤って呼び出されました。cocoon ドメインの翻訳の読み込みが早すぎました。これは通常、プラグインまたはテーマの一部のコードが早すぎるタイミングで実行されていることを示しています。翻訳は init アクション以降で読み込む必要があります。 詳しくは WordPress のデバッグをご覧ください。 (このメッセージはバージョン 6.7.0 で追加されました) in /home/yuki/argontown/wordpress/wp-includes/functions.php on line 6114
Web超入門 - Argon Town Blog

Web超入門

今回はこんな人のための初心者向けの記事です。

  • Webサイトを作ってみたいけど、そもそも何が何だかわからない
  • プログラミングの経験はあるけどWebは全くわからない
今回のポイント
  • Web制作はざっくり2つに分けられる:“フロントエンド”と“バックエンド”
  • とりあえず何か作ってみたい人は“フロントエンド”を始めてみよう
  • Webサイト3点セット:サーバー + ドメイン + プログラム

Web制作はざっくり2つに分けられる

Web制作は大きく以下の2つにわけることができます。

フロントエンド

テキストやボタン、画像や動画など、ユーザーが直接操作する部分のコンテンツや見た目、動きなどをつくるのがフロントエンドです。

また、フロントエンドの特徴として、Webブラウザ上で動くコードです。Webブラウザで動くということは、ユーザーのPCやスマホの中で様々な処理が行われます。これには一長一短あります。

メリット…同時に沢山の人が処理しても、それぞれのPCやスマホの中の出来事なので、他の人に影響しない。

デメリット…人によって、マシンや端末が古かったり、様々なブラウザを使っていたりするので、全てで間違いなく動くようにするのが大変(古い機種だと全く動かなかったりします)。一度ユーザーの端末に全てのデータをダウンロードするので、場合によってはセキュリティ面の問題がある。

フロントエンドの開発言語

フロントエンドは、HTML, CSS, Javascript の3つを組み合わせて開発します。基本的にはこの3つのみです。フロントエンドを調べていくと、jQuery, React, Vue, Angular, Bootstrap…などなど他にも色々な名前がでてきますが、これらは全て最初の3つを補助するものと思っておいてとりあえずOKです。

バックエンド

バックエンドは、ウェブアプリケーションの裏方的な役割です。データベースへのアクセスやデータの処理、セキュリティなど、ウェブアプリケーションの基盤となる機能を担当します。ウェブサイトで行う処理が複雑になったり、規模が大きくなるほど、その役割や重要性が増すことが多いです。ユーザーアカウントを管理したりやネットショッピングサイトなどを作るには必須となります。

簡単なサイトはバックエンドなしでも運用することは可能です。

フロントエンドがユーザーそれぞれのマシンで動作するのに対して、バックエンドは基本的にウェブサーバー上で動作します。

メリット…ユーザーの端末や環境に関係なく処理を実行することができる。ユーザーからは見えないサーバー上で処理するため、セキュリティが高い。

デメリット…全てのユーザーの処理をサーバー側で行うので、他のユーザーの処理が他のユーザーに影響したりすることも。特にユーザー数が多かったり重い処理をする場合には対策が必要。

バックエンドの開発言語

バックエンドはサーバー上で動けば何でも動くのですが、特によくWebで使われているものは、PHP, Java, Python、Ruby、Node.jsなどです。また、データベースでは、MySQL、PostgreSQL、MongoDBなどがメジャーです。

何から始めればよい??

とりあえず何でもよいからWebをはじめてみたい!というひとにはフロントエンドから始めてみるのが個人的にはおすすめです。

理由は、

  • 動かすための環境構築が簡単。ブラウザさえあれば動く。
  • プログラムがWebサイトとして表示される = 結果が目に見えやすいので楽しい。
  • HTML+CSS+Javascript と使う言語が決まっているので、情報が豊富で検索しやすい。(多すぎることも..?)

具体的な書き方などはまた別でまとめようと思います。

サイトの公開に必要なもの

いざ、プログラムを書いたら、サイトの公開に何が必要かもあらかじめ知っておきましょう。基本的には、コード + サーバー + ドメイン の3点セットです。

コード

書いたプログラムです。これがなければ始まりません。

サーバー

書いたコードを置いておく場所です。このサーバーに世界中からアクセスされます。 (コードがフロントエンドだけのサイトでも、サイトを公開する際にはサーバーは必要です)

ドメイン

ざっくり言うと、いわゆるURLです。よくサーバーと混合されて考えられがちですが、サーバーとドメインは別物で、契約も別になることが多いです。サーバーが家だとすると、ドメインは住所みたいなもので、それぞれ借りる必要があります。Webは広大なので、家だけ借りても住所がないと誰も辿り着けない..となってしまいます。

以上、今回はかなりざっくりの説明でしたが、またそれぞれについて、詳しく書いていこうと思います。