元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【YAML入門】ハッシュのマージ

ハッシュデータを別のデータに統合する方法を見ていきます。共通する部分を切り出してマージします。ハッシュのマージには、アンカーとエイリアスを利用します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしていま…

【YAML入門】アンカーとエイリアス

同じ値が複数回登場する場合に、「アンカー(&)」と「エイリアス(*)」を使います。アンカーは変数のようなもので、値に名前を付けます。値に変更があっても、アンカー部分の値を変更するだけで良くなるので便利です。なお、この記事はドットインストールとい…

【YAML入門】改行を含むデータの扱い

データの中に改行を含める場合、その扱いをどのようにするのかで記法が微妙に変わります。また、改行をスペースに変換できますが、最後の改行をどのように扱うでこちらも微妙に記法が変わります。なお、この記事はドットインストールというプログラミング学…

【YAML入門】複雑なデータ

「ハッシュの中身が配列」である場合と「配列の中身がハッシュ」である場合の書き方を見ていきます。言葉で説明するよりもコードを見た方が早いと思います。こちらもブロックスタイルとフロースタイルの2つの記述ができます。なお、この記事はドットインスト…

【YAML入門】マッピング(ハッシュ)

データをハッシュで表す場合の書き方を見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 作成するファイル マッピング(ハッシュ)の記法 フロースタイル 入れ子構造 まとめ 参考サイト 作成する…

【YAML入門】シーケンス(配列)

データを配列で表す場合の書き方を見ていきます。記述する際にいくつか注意点があるので、そちらに気を付けて書いていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 作成するファイル シーケンス(…

2021年の反省と2022年の目標

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

【YAML入門】スカラー

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

【YAML入門】YAML記法を試す

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

【mustache】mustacheの記事まとめ

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

【mustache入門:JS版】データを別ファイル(JSONP)にして読み込む

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

【mustache入門:JS版】コードの整理

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

【mustache入門:JS版】mustacheの導入

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

【mustache入門:Ruby版】テンプレートファイルの部品化(partials)

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

【mustache入門:Ruby版】複雑なデータ(セクション)

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

【mustache入門:Ruby版】真偽値(セクション)

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

【mustache入門:Ruby版】区切り記号の変更

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

【mustache入門:Ruby版】HTMLタグの埋め込み

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

【mustache入門:Ruby版】データの埋め込み

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

【mustache入門:Ruby版】mustacheの導入

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

Vue.jsを勉強し始めたら収拾がつかなくなりそうになった話

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

【TVアニメ】ゴジラS.P<シンギュラポイント>で出てくるハッシュ関数(MD5)について

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

【Windows】環境変数について調べました

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

【サーブレット/JSPの入門書】「基礎からのサーブレット/JSP 新版」の感想

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

【SVG】setInterval()を使ったアニメーション

SVG

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

【SVG】アニメーションの開始と終了の制御

SVG

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

【SVG】イベントリスナによるイベント処理

SVG

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

【SVG】テキスト要素の生成と追加

SVG

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

【SVG】要素の追加と削除

SVG

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

【SVG】特定の要素の取得

SVG

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