プログラミング初学者が1ヶ月間の自作Webアプリ開発で感じたこと

こんにちは。

プログラミング歴4ヶ月半の初学者が2020年3月~4月の約1ヶ月間でPHPというプログラミング言語でオリジナルWebアプリVisualish – 画像で覚える新感覚英語アプリを開発したので、その開発にあたり動機や感想、困難だったことなどを綴っていきたいと思います。

今回の記事では、Webアプリ開発の技術的なことではなく、プログラミング学習4ヶ月の初学者がWebアプリ開発にあたっての動機や疑問、苦労話、心情の変化、これからの展望などについて書いています。

実際の技術的な話は、↓↓の記事で綴っています。

[nlink url=”https://japanese-engineer.org/web-application-development-outline”]

Contents

『Visualish-画像で覚える新感覚英語アプリ』ってどんなアプリ?

『Visualish-画像で覚える新感覚英語アプリ』は、その名の通り、英単語を画像で覚えるためのアプリです。英単語と画像やイメージを結びつけることで、①脳に定着しやすくする英単語がスッと聞こえる・スッと出てくるようになります。

遊び方は簡単で、英単語に合った画像を選ぶと結果ページで「正解」または、「不正解」が表示され、その英単語と複数の画像やイメージを結びつけて記憶するといった楽しみながら英単語を覚える学習アプリになっています。

現在(2020年4月9日)、計90単語の弱小英語アプリですが、毎週単語・カテゴリを追加していく予定なので楽しみにしていてください。

↓↓デモはこちら

普通に、どんな画像が出てくるのか分からないのでワクワク楽しみながら覚えられますよね!! 

→って作った張本人ながら思います。笑

Webアプリ開発~なぜ開発しようと思ったのか

なぜ、今回オリジナルWebアプリを開発しようと思ったのか?それは、結論から言うと、

「中学から大学まで約8年間、英語を日本語で勉強しても話せなかった」

「日本語を挟んで勉強をしても意味がないと感じた」

「何度も同じ単語を調べる自分がいた」

「単語は聞こえるのに理解が追いつかなかった」

「単語が口から出てこなかった」

からです。今まで、英語を勉強した方は上記のような悩みを抱えたことがあるのではないかと思います。

ある日、Youtubeを聞いていると、あるYoutuberが英語を話せる人は、英語をイメージとして捉えていると言っているのを聞いて、上記の悩みが溶けていくような感覚になりました。今まで、

英語→日本語変換→(イメージ)→理解

していましたが、

英語→(イメージ)→理解 

することが大切なんだと、その時気付きました。そこで、そのYoutuberが英単語を覚える時、Google画像検索を使って単語を調べると良いという勉強法を紹介していて、実際にそれまで何回も辞書を引いたが覚えられない単語だった”symposium”(討論会)という単語をGoogle画像検索で検索すると、その単語を表す画像が大量に出てきて、今まで覚えられなかった”symposium”が直感的に、「あ、これがsymposiumなんだ」と。

それ以来、symposiumという単語の意味を調べることはなくなりました。

こんな感じで、単語と画像をセットで覚えると長期的に記憶に残るということを知り、プログラミングで自分が英語の勉強において使いたいツールを作ろうと思ったのがきっかけでオリジナルWebアプリ開発に着手しました。

元々は、記憶力が良くなくて覚えた・調べた英単語をすぐ忘れていました。そこで、上記のように分からない英単語をGoogle画像検索で検索したら劇的に定着率が上がりました。

「じゃあ、Google画像検索でいいじゃん」となるかと思いますが、Google画像検索にも問題がありました。

例えば、”queen”という単語を調べた時、「女王」が表示されてくれば良いですが、イギリス出身のロックバンドが表示されるといった、調べたい意味の単語が出てこなかったり、他にも、抽象的なものを表す単語だったり、副詞や熟語が出てこないといった問題がありました。

そこで、サービス構想段階では、Google画像検索に代わる英単語辞書アプリを作ろうと思っていましたが、ユーザの意図にあった単語の画像を表示させるのが激ムズそうだった(多分、機械学習とか必要)のと、「そもそもその画像があるのか?」、「どうやって拾ってくるのか?」などといった課題がありました。そこで、プロサーの生みの親であるむらっしゅさんに相談したところ、既にある画像からランダムに抽出して表示するクイズ形式だと上記の課題を解決できるということと、また、楽しく勉強できるというスタンスを狙うべきとのアドバイスを頂いたので、英単語辞書アプリではなく、クイズ形式でのWebアプリを開発することにしました。

また他の動機としては、実は就活の年なのですが、ポートフォリオを作ろうかなという思いや、以前から漠然としたオリジナルWebアプリ開発への羨望があったので、開発しようと思った次第です。

Webアプリ開発~開発を始める前の疑問

Webアプリ開発において、最初のサービス構想を終え、いざ開発を始めようとしたとき正直Webアプリ開発の右も左も分からない状況でした。笑

ここでは、「4ヶ月プログラミング学習をしてWebアプリ開発をするまで」をありのまま見せたいので、参考のために、開発を始める前の疑問をざっと挙げたいと思います。結構漠然としている疑問もありますが、それほど分からない状態でした。

結構恥ずかしかったりしますが、全て本物の疑問です笑。メモっていました。「こんなのも分からないのか」って感じですが、逆にこの1ヶ月で身をもって勉強したことを強調しときます。

  • そもそも何から始めるのか?
  • どうやって開発するのか
  • ローカル環境はどうやって用意するのか?なぜ必要なのか?何が必要なのか?
  • 一般的には、サーバーは本番用とテスト用を用意するらしいが2つってどういうこと?2つ契約するということなのか?ドメインも2つ用意するのか?
  • DBは、本番用とテスト用2つ用意するのか?
  • エックスサーバーってどうやって入るのか?サーバーのフォルダ構成ってどうなっているのか?コマンドでサーバーに入れるのか?
  • 使用する画像は著作権どうなっているのか?
  • レンタルサーバーでセキュリティは大丈夫なのか?

偉そうに聞こえますが、いずれも今見返せばたった1ヶ月前ですが懐かしい気持ちになります。そんな疑問を抱えていたなぁと。ただ、この後も何か進めるたびに疑問の嵐でした。

Webアプリ開発~困難だったこと・精神的にキツかったこと

困難だったこと

今回のWebアプリ開発において、幾度となく壁にぶつかりました。

例えば、↓こんな感じです。

  • MacデフォルトでインストールされているApacheの設定
  • テーブル設計
  • ローカル環境でのimgフォルダのパーミッションについて
  • Google Cloud Platformで、APIを使用するまでの環境構築
  • 正規表現
  • デザイン部分(CSS)
  • sshでのサーバー接続と、scpでのソースコードのアップロード

精神的にキツかったこと

ローカル環境の構築

最初は、まずローカル環境の構築で引っかかりました。MySQLとphpMyAdmin、Apache、phpの環境を構築するのに時間が結構かかりました。また、Google Cloud Platformで、APIを使用するまでの環境構築も結構きつくて、何時間も進まない時もありました。このようにプログラミング以外の面で、躓くのが結構キツかったです。

テーブル設計

また、今回、DBを用意してテーブル設計をしたのですが、これが結構難しくて、どんな機能か(これからどのように機能を拡張していくか)はっきり定まっていない中で、テーブル設計をして、技術的に合っているか分からないテーブルに、データを入れ、合っているか分からないテーブルに合わせたプログラムを書くのも結構精神的に辛かったです。

最低限な機能を開発して公開しようと思っていたので、最低限なテーブル機能をもっていて、さらに、後に機能拡張をしようと思った時に柔軟にテーブル機能を追加できるような設計をするのがかなり難しいところだなぁと思いました。ある程度、慣れる必要があるのだなぁとも思いました。

結局、1ヶ月のうち前半である程度機能を作った後、テーブルの再設計をしました。最初のテーブル設計でも時間をかけて設計しましたが、その後も再設計する時に時間がかかりました。なので、

まだ初学者のうちは、何かやろうとするとき、未来のことまで深く考えず「問題にぶつかる」→「解決」をくり返した方が上達は早いような気がします。

CSS

レスポンシブにするのが結構キツかったです。デベロッパーツールを開いて、ブラウザを収縮させつつ、デザインを整えていく(今、整っているかは分かりませんがww)時に、モバイルファーストとか、PCファーストの考え方をあらかた記述した後で知ったので、そこでもダブルワークが発生して、ストレスでした笑

Webアプリ開発~開発時間

2020年3月~4月の約1ヶ月間で、オリジナルWebアプリ「Visualish – 画像で覚える新感覚英語アプリ」開発に約112時間かかりました。

よくこの時間でできたな。いや、やっぱり意外とかかったなーという感じです。最初は、「自分が本当にオリジナルWebアプリを開発できるのか?」という気持ちだったので、よくできたなと思いつつ、前半2週間でほぼ形になっていたのにも関わらず後半で意外と時間かかったなという感じです。

プログラミングの処理部分というより環境構築だったり、CSSの見た目の部分、テーブルの再設計、リファクタリングに時間がかかりました。

Webアプリ開発~『Visualish』の新機能(予定)、課題、今後の展望

『Visualish』の新機能(予定)

今は、必要最低限の、「問題」と「答え」しか実装していません。それは、なぜならまだ、フレームワークを勉強していないからということになります。

今回、生phpで実装したのですが、これから実装していくであろう「ログイン機能」などは、フレームワークを使った方が圧倒的に早く実装できるはずです。

生phpでも実装できるとは思うのですが、作業効率とフレームワークを勉強することによる実力upを考えた結果、一旦必要最低限な機能まで開発し、公開するといった結論に至りました。

なので、これからの目先の目標としては、プロサー課題のフレームワークをある程度まで進めたあと、もう一度、Visualishをリファクタリングして、さらに新機能を追加していく予定です。

新機能としては、↓を考えています。

  1. twitterログイン機能
  2. ランキング機能
  3. 英訳をつける
  4. 例文表示する機能
  5. ブックマーク機能
  6. 画像(イメージ)から英単語を選ぶ形式の問題
  7. 画像から音声を選ぶ形式の問題

他に何かご意見やアドバイスがあれば、ぜひtwitterでのDMやコメント欄に書いて頂けたら嬉しいです。

『Visualish』の課題

現在、登録した英単語のカテゴリーとしては、「food」、「fruit」「animal」、「nature」があるのですが、これらは、ビジュアライズしやすく、クイズの問題としてはより適切なカテゴリです。

しかし、本当は日常で使う単語や熟語、名詞だけでなく動詞や形容詞なども追加・登録して、英語を勉強していきたいなと思っていて、そうなると画像の選別が難しいなというか、例えば「absolutely」などの単体画像ってあるのかとかいった問題があります。単体の画像はないと思うので、画像やイラストを組み合わせたストーリーでイメージさせたい感じですね、、、

なので、これからフレームワークを勉強しつつ、このような問題についてもじっくり解決策を考えていきたいなと思います。

『Visualish』の今後の展望

僕は、今回のWebアプリ開発中に、「どんな外国語でも半年でマスターしてしまう方法」という動画を見ました。

How to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversity

僕にとってはかなり衝撃的で、2016年にカナダにワーホリいく前に見たかったなぁと思いました。そこで言われていたのは、「外国語を半年でマスターするための5つの原則」と「7つの実践方法」でした。

意訳して少し紹介します。

「5つの原則」

  • 自分に関わること。目標に関わること。生命に関わること。
  • コミュニケーションの道具として使うこと
  • 伝達内容を前もって理解しておくこと。予測すること
  • 口周りの筋肉を使うこと
  • 心理状態が大事

「7つの実践方法」

  • たくさん聞く
  • 言葉より先に意味を知る
  • 単語を組み合わせる
  • 頻繁に使われる部分を覚える
  • 安心できる環境を手に入れる
  • 顔の筋肉の動かし方を学ぶ
  • イメージや感覚で覚える

この中でも特に気になったのはいくつかあって、まずはこちら。

「5つの原則 -自分に関わること。目標に関わること。生命に関わること。」

英語を勉強する時にひたすら興味のない分野の単語を勉強した経験があると思いますが、そうではなく、自分の興味のある分野や自分の夢や目標に関わるような英語を勉強した方が良いということですね!! 実際に留学に行った時なんかは、正直話せないと命に関わるので、その危機感が英語の習得を早めているんだろうなと思いました。

そして、

「5つの原則 -心理状態が大事」

やはり、楽しくリラックスした状態をいかに作ることができるかが、言語の習得速度を高める要因になりそうです!

また、他にも

「7つの実践方法 – 単語を組み合わせる」とか「7つの実践方法 – 顔の筋肉の動かし方を学ぶ」、「7つの実践方法 – イメージや感覚で覚える」は、日本で馴染みがあまりないもので、なるほどなぁと思いました。

なので、これからの『Visualish』の展望として、↑の法則を取り入れていきたいなと思っていて、例えば、単語のカテゴリを増やすことで、ユーザ一人一人の興味にあった分野の勉強ができると思います。

また、BGMなどの音楽を流すことで、α波やθ波などの脳波を出して学習効率が上げられるのではないかと考えています。

そして、アプリ内で単語を組み合わせられるような機会を提供したり、画面右上に、その発音をする時の顔の筋肉の動かし方動画なんかあれば、それを見ながら発音して〜フィードバックを受けて〜みたいな形で、より良い英語学習アプリになるのではないかと考えています。

他にも、現在の『Visualish』では、聴覚と視覚しか使っていないですが、他にも人間の五感は、触覚、嗅覚、味覚があって、それをいかに感じさせられるかも焦点かなと思っています。

なので、将来的にはVRなどと組み合わせていければ面白いなと考えています。

まだ、『Visualish』の対象のユーザ層が定まっていないですが、このアプリを通して、日本人の老若男女の英語学習の手助けができれば良いなぁと思います。

Webアプリ開発を一旦終えて

自分の課題が浮き彫りに!!

今回のWebアプリ開発を通して、自分の成長するべき課題が浮き彫りになりました。

それは、プログラミング能力とテーブル設計とvimとgitとLinuxです。はい、全部です。ww

プログラミングに関しては、基礎的な書き方はある程度かけるのですが、それに慣れてしまわずより良い(可読性が良い・保守性が良い)書き方に挑戦していくべきだなぁと感じました。

また、テーブル設計はある程度数をこなさないといけないのかなとも思いますが、一つ一つのデータ型などを考え、将来的にどのような機能拡張があり得るかをじっくり考える癖をつける必要があるなと感じました。

vimに関しては、いまだに「H」「J」「K」「L」で上下左右に移動したり、文字の修正などの作業が遅いので、癖を無くし、より速いvimerになれるように頑張りたいです。また、コメントアウトショートカットキーや、閉じタグ補完や、カッコの閉じ忘れ発見などあれば良いなと思っていたので、その機能を追加しつつ、普通のエディタと同じまたは、それ以上に高性能なエディタとして使っていけるようにしたいと思います。

Linuxに関しては、環境構築の際に必要になってくるので、開発のスタートダッシュをきれるかはLinuxを扱えるかどうかにかかってくるのだなと感じました。どこかのタイミングでしっかり復習・知識の習得を行っていきたいと思います。

1ヶ月で開発してみた感想

今回は、約1ヶ月ではじめての自作Webアプリ開発をしましたが、最初は本当に作れるのかとても不安でした。ただ、「こんなアプリがあれば良いな」「作ってみたいな」という一心で、開発に着手しました。右も左も分からない状態で、最初の数日は、机に向かうのも腰が重かったです。

その後も何度も「もう辞めようかな」とか「誰が使うんだろう」とか諦めかけました

しかし、twitterで皆さんの頑張りを見る中で、勇気が湧いてきて僕の背中を押してくれました。

そのような浮き沈みを繰り返しながら、ひたすらググり続け、自分のアイディアが少しずつ形になっていくのは、とても楽しく感動的なものでした。

いざ、形が出来てきて一旦twitterで概要を公開すると、たくさんの方々から温かいメッセージをいただきました。

それが本当に嬉しく、本当に作って良かった、今まで頑張ってきて良かったなと思いました。

大したアプリを開発していないのに偉そうなことを言ってすみませんが、この1ヶ月で得られたことはとても大きかったです。本当に1ヶ月前の自分を褒めたいです。正直、Webアプリ開発を始める前も、始めた直後も莫大なエネルギーを使ったと思います。もう一度やれと言われたら、今は少し休憩したい気分ですww

何かをしたいときや作りたいときは、エネルギーが大事です。

そのエネルギーを一気に放出してあげれば、どんな坂でも駆け上がることができるのではないかと思います。

以上、最後まで読んでいただきありがとうございました。

コメント

  1. […] プログラミング初学者が1ヶ月間の自作Webアプリ開発で感じたこと こんにちは。 プログラミング歴4ヶ月半の初学者が2020年3月~4月の約1ヶ月間でPHPというプログラミング言語でオリジナ […]