年末ということで、今年の勉強について反省します。今年1年を振り返り、来年の勉強に活かしたいです。来年勉強したいことも併せて挙げます。 2021年に勉強したこと 勉強とブログの反省 2022年の目標 大人になってからの勉強で思うこと 2021年に勉強したこと …

YAMLでのスカラーとは値のことです。まずは、YAMLで扱える値の型を見ていきます。合わせてコメントの書き方も見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 YAMLが扱えるデータ構造 スカラ…

今回は、YAMLの記法について勉強しました。 YAML(Ain’t Markup Language)とは、構造化されたデータを表現するデータ形式の一つです。設定ファイルやデータ保存などに利用されるそうです。なお、この記事はドットインストールというプログラミング学習サービ…

当ブログで紹介したmustacheの記事を一覧にまとめました。 そもそもmustacheに出会ったのは、Vue.jsの勉強時でした。知らないことでしたので、これを機に勉強しました。 mustacheの記事まとめ mustache入門:Ruby版 mustache入門:JavaScript版 参考サイト mus…

レンダー部分でデータを指定しているところがあります。そこを外部ファイルとして読み込むように変更します。ここでは、データをJSONPファイルとして用意します。 作成するファイル JSONPでデータを読み込む まとめ 参考サイト 作成するファイル HTMLファイ…

前回は、公式サイトのサンプルコードをそのまま利用してmustacheの動作確認をしました。今回は、気になる部分のコードを整理していきたいと思います。 作成するファイル テンプレートをJavaScriptに記述するように変更する 変更前 変更後 まとめ 作成するフ…

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、JavaScriptでmustacheを勉強します。 公式サイト…

テンプレートファイルの中身が多くなるとコードの見通しが悪くなります。そこでテンプレートの一部分を部品化して、別ファイルに切り出す方法を見ていきます。 作成するファイル テンプレートの部品化 部品化の確認 まとめ 参考サイト 作成するファイル デー…

データがある限り一覧表示する方法を見ていきます。 作成するファイル 複雑なデータの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレートファイルを以下のよ…

セクションという塊を作り、真偽値の値によって表示を出し分けます。 作成するファイル 真偽値による表示の確認 真偽値に応じてテンプレートの表示を切り替える 真偽値による表示の切り替えの確認 まとめ 参考サイト 作成するファイル データファイル:data.y…

区切り記号を{{}}から他のものに変更する方法を見ていきます。 作成するファイル 区切り記号の変更 区切り記号変更の確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレー…

テンプレートにHTMLタグを埋め込む方法を見ていきます。少し注意が必要なので、そちらも合わせて書きます。 作成するファイル HTMLタグの埋め込み HTMLタグの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイ…

mustacheの基本的な記述を見ていきます。まず、データファイルとテンプレートファイルを用意します。データファイルにデータを、テンプレートファイルにテンプレートを記述します。mustacheコマンドでデータがテンプレートに埋め込まれることを確認します。 …

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、Rubyのmustacheパッケージを使って勉強します。 …

プログラミングを通して、新たな概念や仕組みをどんどん吸収していこうと思い勉強を続けています。最近、Vue.jsの勉強を始めたのですが、そこでMustache構文というものを知りました。ついでにMustacheも調べたのですが、そこからさらに他の取り組んだことの…

ゴジラS.Pでハッシュ関数の話が出てきます。ハッシュは、基本情報技術者試験で出題されることもあるので、一応触れておこうと思います。 ゴジラS.P<シンギュラポイント>とは ハッシュ関数とは 暗号とハッシュの違い ハッシュの利用例 作中のハッシュ関数につ…

はじめに、この記事は専門家でも何でもない一般人が書いています。そのことを理解した上で読んでいただければと思います。表面的にしか調べられていないかもしれませんが、現段階で分かったことを書きました。より深い内容を知るには、書籍やブログなどで調…

Javaの基本を勉強したあとに何に取り組んだら良いのか悩んでいるのでしたら、Webアプリケーションに挑戦してみるのも良いかもしれません。本書は、JavaによるWebアプリケーション構築について書かれています。 本の紹介 本書のターゲット 学んだこと サーブ…

setInterval()を使ったアニメーションをご紹介します。一定間隔でアニメーションさせたいときに使います。時間を表示する例を見ていきます。 setInterval()の設定 デモ setInterval()の解除 デモ まとめ setInterval()の設定 setInterval(関数, 時間間隔); …

アニメーションの開始と終了の制御について書きます。アニメーションの開始と終了をクリックで操作する例を見ていきます。また、アニメーションイベント属性にスクリプトを設定する方法をご紹介します。 アニメーションの開始と終了 デモ アニメーションイベ…

イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メ…

テキスト要素の生成と追加について書きます。具体的な書き方は、サンプルコードを確認してください。 テキストオブジェクトの生成 デモ まとめ テキストオブジェクトの生成 document.createTextNode("テキスト"); テキストオブジェクトの追加の流れは以下の…

要素の追加と削除について書きます。サンプルとして、円の追加と削除の例を見ていきます。具体的な書き方は、サンプルコードを確認してください。 要素オブジェクトの生成と追加 デモ 要素の削除 デモ 補足:CDATAセクション まとめ 要素オブジェクトの生成と…

getElementByIdメソッドを使って、特定の要素を取得する方法を見ていきます。id属性を頼りに特定の要素を取得します。イベントが発生していない要素に対して、処理を設定することができます。 特定の要素の取得 まとめ 特定の要素の取得 要素のid属性に属性…

テキストオブジェクトの取得、テキストの取得・設定についてご紹介します。テキストオブジェクトを取得した後、テキストを操作していきます。予め設定してあるテキストをイベントを介して変更してみます。詳細は、サンプルコードをご確認ください。 テキスト…

動きのあるページを作るには、jQueryを使うと良いです。JavaScriptという選択肢もありますが、jQueryの方がハードルが低いです。そこで、私が読んだjQueryの本をご紹介します。 本の要約 学んだこと 基本の記述 セレクタの種類 イベント/ajax/アニメーション…

イベントを介した属性値の取得・設定について書いています。それぞれ関数・メソッドに処理を記述します。記述は、サンプルコードを確認してください。 属性値の取得 属性値の設定 まとめ 属性値の取得 getAttributeNSメソッドを使い属性値を取得する。第一引…

イベントオブジェクトは、発生したイベントオブジェクトの情報を持っています。その情報を処理に利用することができます。ここでは、マウスポインタの座標を取得してコンソールに表示してみます。 イベントオブジェクト マウスポインタの座標の取得 要素オブ…

イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。 イベントとは イベント属性 イベントハンドラ まとめ イ…

ブログを開設してから1年経つので、振り返りました。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログ開設の理由 ブログ開設時のルール 苦労していること 記事にまとめる作業 インプット対象探し 裏テーマ ブログを数値で振り返る 課題・後…