勉強会こんにちは、弥生の松坂です。2019」の14日目の記事になります。タイトルにもある通りプログラミング未経験で、今年の4月に弥生へ入社しました。そんな私がWebアプリケーション開発の研修を通し、学んだことを書いていきたいと思います。CSVファイル出力Webアプリケーションの処理の流れを知ろう!■使用した言語HTML:Webページ(画面)の文章構造や画像などを定義するCSS:Webページ(画面)の色・サイズ・レイアウトなどを指定するJavaScript:Webページ(画面)に動きを与えるJava(Servlet):サーバ上でWebページ(画面)の動的な生成やデータの処理を行うSQL:データベースの操作や定義をする■データの流れ説明だけだとイメージがつかみにくいので、下の図を見てください。緑の矢印がリクエスト、青の矢印がレスポンスを示しています。実装してみた要件定義書を読み設計書に書き起こす際、正直初心者にWebアプリケーションなんてつくれるの!?と思いながら研修を受けていました。調べ方や質問の仕方が分からない(どこが理解不足なのか把握できていない)エラーが発生したら一大事...どこをどう修正すればいいの?記載されている単語が分からないため、「初心者向け」と書かれている記事ですら理解できませんでした(泣)■ここで苦労した!動的に生成したボタンへのクリックが効かない...実装していく中でつまずいたところはたくさんありました。?静的ページ:Webページ内のコンテンツが一切変化しない動的ページ:Webページ内のコンテンツが変化するつまり、元々あるものか、アクセスするたびに生成されるのか、という感じです。なんて概念のない私にその謎が解けるはずもなく、プログラミング経験のある同期や先輩に助けてもらいました。click」のちがい私が最初に書いていたソースコードは「click」を使用していました。});});これだと動的に生成したボタンをクリックできません。click」をという認識で解決してしまったのです。click」を使っても、クリックできない」という言葉を聞いた私は、またまた混乱してしまいました(笑)実は、onを呼び出すときに奇跡的にdocumentを使っていたのですが、以下のように書いてしまうとクリックできません。});});HTMLを読み込んだ時に、動的に生成したボタンのidがまだ存在しないかららしいです...。documentを使えばHTMLの全ての要素が対象になるのでクリックできました。プログラミングを通して学んだことプログラミング未経験ながらWebアプリケーションをつくってみて、成長したなと思えるところがあります。■始めたばかりの頃は...一度に全てを理解しようとしたり、全体を捉えようとしたりするつまずいたとき手を動かさず、ソースコードを眺めているだけ質問する際に指示語が多く、説明が抽象的である分からないのに、1人で解決しようとする1つの方法しか考えない■成長したこと文書や図で書き出すことで関係性が見え、考えを整理できる実装したい処理に対して、まずは小さく分割し段階を踏んで考えるとにかく手を動かしてソースコードを書いてみる時間で区切って、分からなければ質問する(指示語はなるべく減らし具体的に話すことで、自分の理解も整理できる)解決方法をいくつか探すなんとかWebアプリケーションをつくることができましたが、まだまだ課題はあります。■今後やってみたいことユーザー目線に立ちUI・UXを考えるクラス・メソッド・定数など機能の役割を考え、管理や修正がしやすいソースコードを心がける例外処理で問題を検知し、対処できるようにする最後に初心者の私でもWebアプリケーションを作りきることができました。この記事で1番お伝えしたかったことは、分からなくても間違っていても良いのでアウトプットすること。分からないなりにソースコードを書いたり、自分の理解を口に出したりすると、意外な発見があったりします。今後は配属されたテスト自動化チームで、新たなアプリケーション開発に挑戦してきたいと思います。07:00Webアプリケーションをつくろう!開発未経験の新人が挑戦した話Tweet関連記事2019-12-22Electronアプリの画面側をWebに配置するこんにちは。