2015.07.21

“非”エンジニアのあなたも5分で出来る! “コピペだけ”プログラミングのはじめかた

非エンジニアでも5分でつくれるTODOアプリ

非エンジニアのそこのあなた、JavaScriptを使って、簡単なアプリケーション開発にチャレンジしてみませんか?

最近、よく非エンジニアの友人から、「プログラミング勉強してみたいんやけどー。」「ホームページ作りたいんやけどー。」「結婚したいんやけどー。」などと、相談を受けることが多くなりました。

しかし、単純なホームページを作るだけ、とレクチャーをはじめても、意外とつまづくのは、プログラミングの本質的なテクニックの部分ではなく、

  • プログラムってどこに保存するの…?
  • っていうかどんなソフトが必要なの…?
  • っていうか、普通のPCでつくれるものなの…?

といった、

  1. プログラムを書く
  2. 動作を確認する

というたったふたつのサイクルを、回すための手順であることに気づきました。

そこで今回は逆に、一切プログラムについて説明せず、ただただコピペで動くアプリケーションを作る、ということにフォーカスした記事を書いてみました。

本当にコピペだけでアプリケーションが作成できます。ぜひ一度、試してみてください。

STEP1. 必要なファイルの作成と保存

アプリケーションの開発に最低限必要なのは、テキストエディタのみです。テキストエディタを使用し、アプリケーションに必要なファイルを作成、保存していきます。

Windowsの場合

Windowsに標準で付属している「メモ帳」が使用できます。

注意

Windowsでアプリケーションの開発に必要なファイルを生成するには、ファイル名の拡張子を表示する必要があります。

拡張子を表示する手順はこちらの記事を参照してください

  1. デスクトップ上で右クリックし、コンテキストメニューから 「新規作成」→「フォルダ」を選択します。

    デスクトップ上で右クリックし、コンテキストメニューから
    「新規作成」→「フォルダ」を選択します。フォルダ名は「todo」とします。

  2. デスクトップ上で右クリックし、コンテキストメニューから 「新規作成」→「テキストファイル」を選択します。

    作成したtodoフォルダで右クリックし、コンテキストメニューから
    「新規作成」→「テキストファイル」を選択します。

  3. 新しいファイルが作成されますので、ファイル名を変更します。ファイル名はindex.htmlとします。

    新しいファイルが作成されますので、ファイル名を変更します。ファイル名はindex.htmlとします。

  4. ファイルを選択して右クリックし、コンテキストメニューから 「プログラムから開く」→「メモ帳」を選択します。

    ファイルを選択して右クリックし、コンテキストメニューから
    「プログラムから開く」→「メモ帳」を選択します。

  5. テキストを入力し、保存します。

    テキストファイルに「Hello!」と入力し、再度、「名前を付けて保存」します。

  6. 文字コードを変更する

    メニューから「ファイル」→「名前を付けて保存」をクリックし、文字コードを「UTF-8」に変更して、「保存」をクリックします。

  7. ファイルを選択して右クリックし、コンテキストメニューから 「プログラムから開く」→「(お好きなブラウザ)」を選択します。

    ファイルを選択して右クリックし、コンテキストメニューから「プログラムから開く」→「(お好きなブラウザ)」を選択します。

  8. テキストファイルをブラウザで開く

    テキストファイルに記入した内容が、ブラウザにも表示されます。

Macの場合

Macでは、デフォルトのテキストエディタが搭載されていないため、お好きなテキストエディタをインストールして使用します。

このセクションでは、miを使用した操作方法をご紹介します。
miのインストールはこちら

  1. todo-application-challenge-mac-1

    デスクトップで右クリックし、表示されたコンテキストメニューから「新規フォルダ」を選択します。フォルダ名は「todo」とします。

  2. todo-application-challenge-mac-2

    miを起動します。文字コードを「UTF-8」に変更し、新規テキストに「hello」と入力します。

  3. todo-application-challenge-mac-4

    ファイルをtodoフォルダに、名前「index.html」で保存します。

  4. todo-application-challenge-mac-3

    保存したファイルをFinderで選択し、右クリックします。コンテキストメニューから「このアプリケーションで開く」をクリックし、お好きなブラウザを選択します。

STEP2. アプリケーションを開発する

開発する、動作確認する、の基本サイクル

Webアプリケーションは、HTMLというルールに従って記述された文字列を、ChromeやInternet Explorerといったブラウザで読み取ることで動作します。

つまり、先ほど作成したHTMLファイルを、テキストエディタで開けばHTML文字列を編集できブラウザで開けば作成したHTML文字列に基づき画面を表示することができます

お知らせ

作成するファイルの名前は何でも構いませんが、次のルールを満たすようにします :

          • 拡張子(ファイル名のドット(.)より後ろ)は.htmlとします。(例 : index.html)
          • ファイル名は、半角英数字とハイフン(-)、アンダースコア(_)のみを使用します。

これまでに使用したウィンドウを閉じていなければ、いまあなたのPC上では、

          • テキストエディタで開かれた(テキストファイルとしての)index.htmlファイル
          • ブラウザで開かれた(Webページとしての)index.htmlファイル

のふたつが開いている状態になっていると思います。

テキストエディタで、再びindex.htmlファイルを編集し、保存します。

todo-application-challenge-7

その後、ブラウザのリロード(更新)ボタンをクリックしましょう。または、Windowsの場合 F5キー、Macの場合 コマンド(リンゴマーク) + R キーを押すことで、リロードできます。

todo-application-challenge-8

変更内容が反映されましたか?

このように、

      1. テキストエディタでindex.htmlファイルを編集し、保存する
      2. ブラウザでindex.htmlをリロード(更新)する

という流れで、アプリケーションの開発と動作確認のサイクルを繰り返すことができます。

TODOアプリの開発する

それでは、いよいよTODOアプリを開発します。

単純に、TODOを追加し、完了したらチェックボックスを入れ、不要になったら完了済みのTODOをアーカイブ(削除)するという単純なアプリケーションです。

何も考えずに、以下のURLに記載されたソースコードをすべて選択し、テキストエディタで開いたindex.htmlに貼り付けてください。

https://bitbucket.org/snippets/tapitinc/KAAe6/revisions/86ac47b182babd64058fef9f3a7ebad80cfd6637

お知らせ

「You are viewing an old version of this snippet. View the current version.」と表示されますが、問題ありません。

todo-application-challenge-9

あとは、ブラウザで開いたindex.htmlで開くだけです。

いかがでしょう?期待された通りに動きましたか?

STEP3. 機能を追加してみる

まずは、動くことを作ることが最も重要

Webアプリケーションの多くは、非常に多様な技術が複合的に組み合わされて実装されています。

ここまでは、テキストファイルにソースコードをペースト(貼り付けた)だけですが、この1つのファイルにかかれたソースコードを正しく理解し、ページの体裁を整えていくためには、

      1. HTML
      2. CSS
      3. JavaScript
      4. AngularJS

と、4つの技術を学ぶ必要があります。

しかし、これらをひとつずつ習得し、その成果としてひとつのプロダクトを作り上げるにはとても長い時間が必要となります。

一方で、ある技術領域を俯瞰し、その概要を素早くつかむには、既存のプロダクトをベースに、自分が実現したい機能を追加するための差分となる要素だけを学んでいくほうが、効果的なケースもあります。

TODOの削除機能を追加する

この記事では、プログラムの内容の詳細にはあえて触れず、TODOリストのうちのひとつを削除する機能をこのアプリケーションに追加してみようと思います。

https://bitbucket.org/snippets/tapitinc/KAAe6/revisions/43789d43dc4e5faa62978808c77f8b8eef720dff

追加された箇所は、

の2箇所です。

52行目は、クリックした際にdelete処理を呼び出すリンクです。 = ng-click="todoList.delete(todo)"

このとき、処理名todoList.deleteの後ろの () のなかに todo を入れることで、関数に対して、このリンクが所属しているTODOの内容を引き継ぎ、処理をさせることができます。

delete処理内では、一度、TODOリストをリセットし、引き渡されたTODOと合致するもの以外を再度リストに登録しなおすことで、削除処理を実現しています。

(応用編) 学びながらオリジナルの機能を開発してみよう

いかがでしょうか?

さらに詳細な興味を持った方は、ぜひほかのチュートリアル(例となるアプリケーション)にもチャレンジしてみてください。