Webサービスの勉強の仕方！経験によって違うやり方！


Silicon Valley Super Ware

2020年4月29日


Webサービスの勉強の仕方！経験によって違うやり方！

Webサービスを作るのに最初はある程度勉強は必要です。これを最小限にするのが、 早くWebサービスでビジネスを軌道に乗せる秘訣です！
勉強のやり方や何をやったら良いかはよく受ける質問の中でも沢山あります。
今日の話は、どうやって何を勉強するかについて書いてみました。

経験によって方針は大きく違います！

理由は簡単で「プログラムの基本」を勉強するのか、 「プログラミング言語」を勉強するのかでやる事は大きく違います。

HTML・CSSはプログラミングとは少し違う！

すでに勉強されている方はお気づきだと思いますが、HTML/CSSはWebページを記述するための 「表現」方法です。HTMLはどの表示「部品」を使うか、CSSはそれをどう並べてどのように 「装飾」するかを書くもので、一言で言えば、表現の手段です。
一方でJavaScriptは、プログラミング言語で何をどう処理するかを書いた物。 一言で言えば処理の処理の手順書です。
HTML・CSSの勉強で必要な事は
  • どんな部品があるか？
  • レイアウトの基本
  • 装飾のやり方
これらを身に着ける事です。全部を知っている必要はなく、まずは良く使う物を覚える 事から始めれば十分です。

効率的なやり方は、好きなWebページを２～３選んで見てみる！

そうして、そこで使われている「部品」や「表現方法」を見て覚える位から始めれば 効率よく勉強できます。あとは、新しいい「やり方」と出会ったときにその都度勉強する という方法で十分です。
まずは、「真似（＝模写）」をやりながら基本的な構成や書き方を覚えるのが重要です。

経験によってアプローチが変わるJavaScriptの勉強

プログラミングを勉強する上で、よく何が良いのかが話題になります。 実はこれは人によって違いますなので、参考にするのは あなたに近い人がどういうやり方で勉強しているかです。
プログラミングの勉強の基本は２つのエリアに分かれます。

プログラミングの基本的な枠組み

プログラミン言語の詳細

プログラミングの基本的な枠組みは一度勉強してしまえば、 基本は同じです。なので何回も勉強する必要はなくなります。 しかし、初めてプログラミングを勉強する場合はここから始める 必要があります。もう少し細かく分けると
  • ループや条件分岐
  • 基本的なデータの方やデータ構造（整数、文字列などや、配列、リストなど）
  • オブジェクト指向の概念（classの概念）

初めての場合、これらを目標のプログラミング言語で一つ一つ学ぶ必要があります

ところが、他のプログラミング言語の経験者の場合、これは効率の悪いやり方です。

プログラムの基本的な枠組みは同じだからです！

経験者は「あまり勉強しなくてよい！」

経験者の場合は、殆どの場合勉強の必要はありません！
プログラムの基本的な構造は殆ど似ていて、どう記述するかが 違うだけです。要は書き方の問題です。

手っ取り早いのが実際にプログラムを書きながらどう描くかを調べれば良い！

何回か、実際にプログラムを作ると要領がわかってくるので、 勉強というより、その言語で書いてみる事が一番の近道です。

お勧めは、30分から1時間程度の簡単なチュートリアルのビデオを見る事です

そこで、「こんな感じ！」というのを理解して、細かいところはその都度 調べるという方法が効率的です。

Webサービス特有のやり方！

デスクトップアプリやスマホのアプリと違うのが、UI（ユーザーインターフェース）の 作り方がちょっと独特です。

基本はHTMLとCSSで作る

他の言語の場合、UIを作るには基本的にUIの為のライブラリが用意されていて それらをプログラミングから呼び出して作るというやり方が殆どです。
この辺が慣れないとちょっと違和感があるところですが、慣れてしまうと かえって便利な面があります。 ところが、HTML/CSSは元々は別の「表現手段」です。 それが、JavaScriptのコードに入ってくるととても見づらくなります。

この辺りが「フレームワーク」が発達した理由です

フレームワークは、このHTML・CSSの画面のデザインと プログラミングをある程度分離する事で、全体のプログラムを 見やすく管理するのに役立っています。
前回まで書いてきたように、フレームワークは効率化の「カギ」なので プログラミング言語に合わせてある程度「慣れる」必要があります。 要は使い方を覚える事が必要です。

まとめると！

やる事は
  • プログラムの基本的な構成、データ構造を勉強（経験者はスキップ）
  • HTML/CSSの基本（UI -- 画面のデザインに必須）
  • 実践は作りながら調べて「作り方のコツ」を習得
  • フレームワークの使い方をマスターして効率アップ
簡単なWebサービスは真剣に勉強すれば、初めての方でも４～６週間で 作る事ができます。まずは、簡単で良いのでWebサービスを作るのが とても重要です。
初めてでよくわからないという方は、シリコンバレースーパーウエアが よい題材を提案して最短でWebサービスの制作から収益までを 指導します！
シリコンバレースーパーウエアでは、Webサービスの作り方だけではなく、作ったWebサービスを利用した ビジネスの展開までを身に着ける事が可能です。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。



Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む