對初學者而言，學習日文並不是一件簡單的事，日文書寫表現方式由假名與漢字組成，假名又分為平假名和片假名，每個都有對應的發音。由於日文的複雜性，初學者接觸不久就遭遇許多困難，有許多相似的字母，容易寫錯、混淆；在發音上，有些是中文和英文沒有的發音。尤其日文字母數量比中文、英文還多，初學者花費大量時間背誦卻無法牢記，或是只會看但不會念，平假名、片假名不能互相對應，這些挫折常是讓初學者放棄的原因。

針對日文初學者遇到的困難，本論文設計並實作一個學習基礎日文的環境，該環境模仿學齡前兒童學習語言的過程，讓初學者更快速的認識假名及其發音，並能認識最基本的單字。所用的方法是模仿提供嬰兒、幼兒的學習環境，並且加速模仿語言過程。回想小孩從嬰兒期開始，在聽覺的灌輸下，認識生活中單純的疊字，接者進入幼兒期，學習簡單的單字，再來發展到學齡前期，從單字延伸出簡單的會話，在這一連串學習過程中，初學者不僅對單字、會話有基本認識，同時對日文的基礎－五十音也有基本了解。另外本環境將五十音與生活周遭結合，初學者藉由外觀形狀聯想的方式將五十音與生活緊密連結，進而加強對五十音的認知。同時透過增加不同類型影片幫助學習成效，例如加入卡拉OK、五十音之歌等等，除此之外還加入自我測驗功能，初學者透過測驗可以快速了解學習的成果，逐漸增加對學習日文的信心。

For beginners, it’s difficult to learn Japanese. Japanese writing system uses a combination of kanji and kana, kana itself consists of a pair of hiragana and katakana. Due to the complexity of Japanese, beginners meet problems immediately when they start to learn. They’re confused with similar characters and pronunciations. The number of Japanese characters are many more than Chinese and English. Beginners take a lot of time but can’t memorize characters, or recognize hiragana and katakana. Beginners often give up because of frustration.

In this thesis, we design and implement a Japanese learning system, which imitates children’s learning language process, and speed up learning process, beginners can learn kana, pronunciation and basic words faster. Start with infancy, who is surrounded by acoustic environment, and learn some single words easily. After that in toddle stage, they will learn basic words. Proceed to the preschool stage, they learn from word to conversation. With learning process, beginners not only have basic skill in words and conversations, but also memories the basic of Japanese, gojuon. In addition, the platform combine with around life, beginners can improve knowledge of gojuon with image associated, meanwhile add more types of video to learn Japanese efficiently. This system add karaoke, songs and so on. The system also include examinations, so that beginner can analyze the result of learning. And inspire confidence.

目錄
第一章 緒論	1
1.1 研究背景	1
1.2 研究目的	2
1.3 論文架構	4
第二章 相關技術與研究	5
2.1 日文的文字結構	5
2.1.1 日文發音種類	6
2.1.2 漢字的音讀與訓讀	6
2.1.3 中文與日文書寫標音差異	7
2.2 日文學習平台-Duolingo	8
2.3 學日文遇到的困難	12
2.4 幼兒發展劃分	13
2.5 幼兒語言發展	14
2.6 圖像與學習	15
2.7 技術簡介	16
2.7.1 HTML5	16
2.7.2 CSS3	18
2.7.3 JavaScript	19
2.7.4 Bootstrap 4	19
第三章 系統功能需求與架構	20
3.1 系統功能需求	20
第四章 系統設計與實作	23
4.1 系統設計	23
4.1.1 會員模組	26
4.1.2 學習介面模組	26
4.1.3 測驗模組	27
4.2 系統開發環境與工具	28
4.3 系統實作	34
4.3.1 Facebook會員模組	35
4.3.2 學習介面模組	40
4.3.3 測驗模組	50
第五章 結論與未來展望	51
參考文獻	52
附錄一 英文論文	54

圖目錄
圖2 - 1 平假名對應羅馬拼音	6
圖2 - 2 平假名與片假名及漢字	7
圖2 - 3 Duolingo官方網站	8
圖2 - 4 Duolingo階段課程	9
圖2 - 5 Duolingo課程內容1	9
圖2 - 6 Duolingo課程內容2	10
圖2 - 7 Duolingo課程內容3	10
圖2 - 8 Duolingo課程內容4	11
圖2 - 9 五十音圖ne	12
圖2 - 10 五十音圖nu	12
圖2 - 11 五十音圖chi	12
圖2 - 12 五十音圖sa	12
圖2 - 13 HTML4網頁架構圖	17
圖2 - 14 HTML5 網頁架構圖	18
圖3 - 1 系統功能架構圖	22
圖4 - 1 介面規劃	24
圖4 - 2 系統架構圖	25
圖4 - 3 vscode	28
圖4 - 4 vs code 擴充套件	29
圖4 - 5 git官方網站	30
圖4 - 6 git 處理狀態圖	31
圖4 - 7 TortoiseGit圖形介面	32
圖4 - 8 以TortoiseGit來做檔案比較	33
圖4 - 9 主要介面圖	34
圖4 - 10 Oauth授權	35
圖4 - 11 Facebook申請我的應用程式	36
圖4 - 12 Facebook申請我的應用程式2	37
圖4 - 13 Facebook申請我的應用程式3	37
圖4 - 14 Facebook主控版頁面	38
圖4 - 15 Facebook權限設定	38
圖4 - 16 登入Facebook	39
圖4 - 17 輸入資訊登入Facebook	39
圖4 - 18 左側導覽	40
圖4 - 19 嬰兒期介面圖	41
圖4 - 20 嬰兒期	42
圖4 - 21 切換只顯示平假名	42
圖4 - 22 類似單字	43
圖4 - 23 類似單字2	44
圖4 - 24 會話內容	45
圖4 - 25 看影片學日文	46
圖4 - 26 會話介紹圖	47
圖4 - 27 五十音介紹圖	48
圖4 - 28看圖學五十音	49
圖4 - 29單字測驗圖	50

表目錄
表2 - 1 心理發展理論的八個階段	13
表2 - 2 HTML的發展	16

[1]	林玉涵, “英語學習App輔助高職英語教學之研究,” 國立臺北科技大學技術及職業教育研究所碩士論文, 2017.
[2]	蘇志良, “用圖像提升日語學習效果教材之研究-----以平假名和片假名為主-----,” 國立高雄第一科技大學應用日語所碩士論文, 2006.
[3]	蕭和典, “Image-Story 聯想多媒體教學法對高職生平假名學習成效影響之研究,” 中正大學教育學研究所學位論文, 2015.
[4]	宋美慧, “教會課後照顧對國小單親兒童生活適應之影響,” 靜宜大學青少年兒童福利研究所碩士論文, 2007.
[5]	陳淑琴, “幼兒語言發展與語言獲得理論探討,” 幼兒教育年刊, no. 12, pp. 93-111. 2000.
[6]	蔡啟達, 圖解教學原理與設計, 台北：五南出版社, 2012.
[7]	吉松由美、山田玲奈, 我的第一本日語50音, 台北：山田社, 2010.
[8]	和風語文雜誌編著, 日本語知識百科, 台北：大新書局, 1990.
[9]	鍾鎮城、王萸芳、胡依嘉、曾金金、齊婉先、鄭琇仁, 第二語言習得與教學, 台北：新學林, 2015.
[10]	R. C. Atkinson, “Mnemotechnics in second-language learning,” Am. Psychol., vol. 30, (8), pp. 821, 1975.
[11]	Erikson's stages of psychosocial development, https://en.wikipedia.org/wiki/Erikson%27s_stages_of_psychosocial_development
[12]	艾瑞克森(Erikson)的心理社會發展理論, https://blog.xuite.net/kc6191/study/15177869
[13]	HTML5, https://zh.wikipedia.org/wiki/HTML5
[14]	CSS3, https://en.wikipedia.org/wiki/Cascading_Style_Sheets
[15]	JavaScript, https://en.wikipedia.org/wiki/JavaScript
[16]	Bootstrap, https://zh.wikipedia.org/wiki/Bootstrap 
[17]	高級中等學校第二外語教育推動計畫, http://www.2ndflcenter.tw
[18]	Visual Studio Code, https://code.visualstudio.com/
[19]	Git, https://git-scm.com/book/zh-tw
[20]	洪錦魁, HTML5+CSS3王者歸來, 台北：深石數位, 2017.
[21]	A Preview of HTML 5, https://alistapart.com/article/previewofhtml5
[22]	SB Admin, https://startbootstrap.com/template-overviews/sb-admin/
[23]	Oauth2-Gihub/Google+/Facebook登入實戰-使用NodeJS, http://sj82516-blog.logdown.com/posts/776734/oauth2-gihub-google-facebook-log-in-actual-combat
[24]	Duolingo, https://en.wikipedia.org/wiki/Duolingo
[25]	Sharecodepoint, https://www.sharecodepoint.com/2016/10/make-an-online-quizzes-template-and-system-for-your-website-and-application-using-html-css-and-javascript.html 
[26]	交通部觀光局行政資訊網, https://stat.taiwan.net.tw/
[27]	irasutoya, https://www.irasutoya.com/
[28]	illustrain, https://illustrain.com/ 
[29]	TortoiseGit, https://tortoisegit.org/ 
[30]	戸田須恵子, “乳児の言語獲得と発達に関する研究,” 釧路論集：北海道教育大学釧路校研究紀要, no. 37, pp. 101-108, 2005.