jquery 文字を書き出してみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

文字を書き出してみよう

jQuery|2018年10月31日

2018年10月31日
  • このエントリーをはてなブックマークに追加

今日は、HTMLの指定の場所に、文字を書き出してみましょう。
流れとしては以下のようなものです。

  1. 該当のidやclassを見つける
  2. 該当のidやclassのついた要素内に、文字を書き出す

基本的にjQueryは「idやclassを見つけて処理をほどこす」という流れになります。
今回でjQueryの基本動作に慣れていきましょう。

では、ミッションに入っていきます。

ミッションの内容

下記のファイルを再現してみましょう。
ボタンを押すと、要素内のテキストが書き換えられます。

一度、ソースコードの解説に目を通し、作ってみましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。

ソースコードの解説

jQueryは「いつ」「どこに」「なにをするか」が基本です。
文字を挿入する場合も同じです。

  1. 「いつ」クリックしたら
  2. 「どこに」.textareaに
  3. 「なにをするか」テキストが追加されました。と表示

このような流れで処理を進めます。
具体的には、下記のようにすれば、実現できます。

<button class="clickArea">クリック</button>
     
<div class="textarea">こちらのテキストが書き換えられます。</div>
     
<script>
    //クリックした時に、、
    $(".clickArea").click(function(){
        //.textareaのテキストを「テキストが書き換えられました。」に上書きする。
        $(".textarea").text('テキストが書き換えられました。');
    });
</script>

これで.clickAreaをクリックすると、.textarea内のテキストが書き換えられるようになりました。

  1. クリックした時に
  2. クラスtextareaに対して
  3. テキストが追加されました。を上書きする。

このようにjQueryの書き方は、単純なパターン化がされています。
例えば、上記のソースコードであれば、.textarea内が全て書き換えられます。

ただ「上書き」ではなく「追加」したい場合もありますよね。
その場合は下記のようになります。

<script>
    //クリックした時に、、
    $(".clickArea").click(function(){
        //.textareaに「テキストが追記されました。」を追加する。
        $(".textarea").append('テキストが追記されました。');
    });
</script>

何が違うのか、おわかりになるでしょうか。
.textが.appendに変わっただけです。

  • クリックした時に
  • クラスtextareaに対して
  • テキストが追加されました。と追記する。

1箇所変えるだけで、機能も大きく変わります。
ぜひ、書き換えて試してみてください。

このようにシンプルな書き方でアクションを起こすことができます。
手軽に色々な処理を加えられるのも、jQueryの魅力の1つです。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら