プログラマー初心者にとって、環境構築はとてもしんどい。
要するに手っ取り早く、コードが書けて実行できたら…なんて思っちゃいますよね。
それができるのがVanilla『Javascript』
Vanilla『Javascript』とは追加ライブラリやフレームワークすらも一切使わない、ピュアでシンプルな『Javascript』という意味です。だから用意するものもいたってシンプル。
メモ帳さえあればOK。
htmlとJavascriptが書かれたメモ帳を、○○.htmlで保存して、ブラウザで実行すれば動きますよ!(^^)!
というわけで、実際にやってみましょう！
日本語を抽出するJavascript
う～ん。何をつくりましょう…
入力されたテキストから、特定のテキストだけを抽出して出力するプログラム、というのはいかがでしょうか。
たとえば、入力されたテキストから、日本語と特定の記号「、」とか「。」だけを抽出するプログラムって需要ありますかね…(゜.゜)
つまり、日本語の文章に使われる文字と記号だけを抽出するプログラムです。…なんか需要なさそう…(*_*)
とりあえず実際に、それっぽいものをつくってみました。
どうでしょうか？できてますか？
下記はコードになります。
HTMLとJavascript
<html>
<head>
<title>文章から記号と日本語を抽出</title>
</head>
<body>
<input type="text" id="inputText" placeholder="文章を入力してください">
<button onclick="outputOnlyJapanese()">抽出</button>
<div id="output"></div>
<script>
function outputOnlyJapanese() {
// 入力フォームからテキストを取得 Vanilla『Javascript』
var inputText = document.getElementById('inputText').value;
// 日本語と記号を抽出するための正規表現
var sentence = inputText.match(/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uff00-\uff9f]+/g);
// 結果表示の下準備
var outputDiv = document.getElementById('output');
// 結果をクリア
outputDiv.innerHTML = '';
var outputText = document.createElement('p');
// 日本語と記号を抽出するためのループ処理
if (sentence) {
sentence.forEach(function(item) {
outputText.textContent += item;
});
outputDiv.appendChild(outputText);
} else {
var noticeMessage = document.createElement('p');
noticeMessage.textContent = '抽出されたテキストはありません';
outputDiv.appendChild(noticeMessage);
}
}
</script>
</body>
</html>
上記をメモ帳にコピペして、○○.htmlみたいな名前で保存してください。
実行するときは、そのファイルをブラウザで開けば動きます。
それはそうと、コードは思ったよりも長くないですよね。
さすがJavascript(^o^)
要するに正規表現を使って、入力された文章から日本語を抽出して出力してるんですね。Javascriptの文法については、探せば情報がたくさんあるので、ここでは割愛いたします。
とにもかくにも、つくってみることが一番の勉強法ですね(^J^)
なんでも良いと思うので、まずは何かつくってみましょう！
