Webアプリケーションをつくろう！開発未経験の新人が挑戦した話

勉強会

こんにちは、弥生の松坂です。この記事は「Misoca+弥生 Advent Calendar 2019」の14日目の記事になります。

タイトルにもある通りプログラミング未経験で、今年の4月に弥生へ入社しました。そんな私がWebアプリケーション開発の研修を通し、学んだことを書いていきたいと思います。

どんなアプリケーションをつくったの？

以下の機能を備えた社員情報管理システムを実装しました！

  • 一覧表示
  • 新規追加、編集、削除
  • 検索
  • CSVファイル出力 

Webアプリケーションの処理の流れを知ろう！

■使用した言語

  • HTML：Webページ(画面)の文章構造や画像などを定義する
  • CSS：Webページ(画面)の色・サイズ・レイアウトなどを指定する
  • JavaScript：Webページ(画面)に動きを与える
  • Java(Servlet)：サーバ上でWebページ(画面)の動的な生成やデータの処理を行う
  • SQL：データベースの操作や定義をする 

■データの流れ

説明だけだとイメージがつかみにくいので、下の図を見てください。緑の矢印がリクエスト、青の矢印がレスポンスを示しています。

f:id:ym_AdventC:20191211115518p:plain

実装してみた

要件定義書を読み設計書に書き起こす際、正直初心者にWebアプリケーションなんてつくれるの！？と思いながら研修を受けていました。

■当時の私の気持ち

  • 各言語の定義や関係性がピンと来ない
  • 使用する言語が多く、一つの言語を扱うのにも一苦労
  • 調べ方や質問の仕方が分からない(どこが理解不足なのか把握できていない)
  • エラーが発生したら一大事…どこをどう修正すればいいの？

記載されている単語が分からないため、「初心者向け」と書かれている記事ですら理解できませんでした(泣)

 ■ここで苦労した！動的に生成したボタンへのクリックが効かない…

実装していく中でつまずいたところはたくさんありました。その中でも1番最初にぶつかった壁が、動的に生成した編集ボタンにクリックイベントが効かないことでした。

◇「静的」・「動的」とは？
  • 静的ページ：Webページ内のコンテンツが一切変化しない
  • 動的ページ：Webページ内のコンテンツが変化する

つまり、元々あるものか、アクセスするたびに生成されるのか、という感じです。
そもそも「静的」・「動的」なんて概念のない私にその謎が解けるはずもなく、プログラミング経験のある同期や先輩に助けてもらいました。

◇「click」と「on click」のちがい

私が最初に書いていたソースコードは「click」を使用していました。

$(document).ready(function() {
 $(“#edit-button”). click (function(){
   //行いたい処理
 });
});

これだと動的に生成したボタンをクリックできません。ということで、「on click」に変更してみると…「クリックできた！」

$(document).ready(function() {
 $(document).on("click", "#edit-button", function() {
   //行いたい処理
 });
});

このとき、「静的な」要素には「click」を、「動的な」要素には「on click」をという認識で解決してしまったのです。後から「「on click」を使っても、クリックできない」という言葉を聞いた私は、またまた混乱してしまいました(笑)

実は、onを呼び出すときに奇跡的にdocumentを使っていたのですが、以下のように書いてしまうとクリックできません。

$(document).ready(function() {
 $(“#edit-button”).on("click", function() {
   //行いたい処理
 });
});

HTMLを読み込んだ時に、動的に生成したボタンのidがまだ存在しないかららしいです…。documentを使えばHTMLの全ての要素が対象になるのでクリックできました。

プログラミングを通して学んだこと

プログラミング未経験ながらWebアプリケーションをつくってみて、成長したなと思えるところがあります。

■始めたばかりの頃は...

  • 一度に全てを理解しようとしたり、全体を捉えようとしたりする
  • つまずいたとき手を動かさず、ソースコードを眺めているだけ
  • 質問する際に指示語が多く、説明が抽象的である
  • 分からないのに、1人で解決しようとする
  • 1つの方法しか考えない

■成長したこと

  • 文書や図で書き出すことで関係性が見え、考えを整理できる
  • 実装したい処理に対して、まずは小さく分割し段階を踏んで考える
  • とにかく手を動かしてソースコードを書いてみる
  • 時間で区切って、分からなければ質問する
    (指示語はなるべく減らし具体的に話すことで、自分の理解も整理できる)
  • 解決方法をいくつか探す

なんとかWebアプリケーションをつくることができましたが、まだまだ課題はあります。

■今後やってみたいこと

  • ユーザー目線に立ちUI・UXを考える
  • クラス・メソッド・定数など機能の役割を考え、管理や修正がしやすいソースコードを心がける
  • 例外処理で問題を検知し、対処できるようにする

最後に

初心者の私でもWebアプリケーションを作りきることができました。
この記事で1番お伝えしたかったことは、分からなくても間違っていても良いのでアウトプットすること。分からないなりにソースコードを書いたり、自分の理解を口に出したりすると、意外な発見があったりします。
今後は配属されたテスト自動化チームで、新たなアプリケーション開発に挑戦してきたいと思います。

明日、「Misoca+弥生 Advent Calendar 2019」の15日目の記事はykinoshittaさんです！