markdown(マークダウン)記法でよく使うもの一覧
忘備録としてマークダウンでよく使う記法を残しておきます。
リスト
-を先頭につけて半角スペースを空ける。
- リスト
コード
```で囲む。両端は半角スペース空ける。
ソースコード
取り消し線
~~で囲む。両端は半角スペースは空けない。
取り消し線
見出し
#を先頭につけて半角スペースを空ける。##というように、連続してつけると、小見出しになる。#の数が多いほど小さい見出しになる。
# 見出し1
## 見出し2
### 見出し3
リンク
[テキスト](url)リンクにしたいテキストを大括弧で囲む。URL部分は丸括弧で囲む。
注釈
注釈を入れたいテキストの後に[^(数値)]をつける。注釈の内容の前に[^(数値)] :をつける。
注釈を入れる文[^1]
[^1]: 注釈内容
vue-cliにtailwind CSSを導入する
概要
vue-cliで作成しているプロジェクトにtailwind CSSを導入したのでその時のメモ
前提
- vue-cliでプロジェクト作成ができていること
手順
1. tailwindcssのインストール
npm install -D tailwindcss postcss autoprefixer でtailwindcssのインストールを行います。
2. tailwind.config.jsを作成
tailwind.config.jsを作成します。npx tailwindcss init のコマンドを入力してください。作成したファイルの中身を以下のように編集してください。
- tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
extend: {},
},
plugins: [],
}
3. postcss.config.jsを作成
postcss.config.jsを作成します。こちらはプロジェクトルートディレクトリに作成してください。作成したファイルの中身を以下のように編集してください。
- postcss.config.js
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
]
}
4. tailwind.cssを作成
tailwind.cssを作成します。ディレクトリは今回はsrc/assets/ に css用のディレクトリを追加してその配下にファイルを設置します。
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
5. 読み込みの設定
最後に読み込みの設定を行います。import '@/assets/css/style.css';を適用したいファイルに設置してください。例としてApp.vueに設置してみます。
- App.vue
(省略) ....... <style> @import '/assets/css/common/tailwind.scss' </style>
これで読み込んだファイル配下でtailwind CSSが利用できるようになります。(今回はApp.vueで適用したので、vueファイル全体に適用)
参考
https://devsakaso.com/vue-js-tailwindcss-installation/
https://cly7796.net/blog/javascript/use-tailwind-css-with-vue-cli/
セマンティックHTMLをわかりやすく考える
セマンティックHTMLを理解する
セマンティックとは？
セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。とは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。
セマンティック・ウェブ ウェブページの意味を扱うことを可能とする標準やツール群の開発によってワールド・ワイド・ウェブ[1]の利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。
つまり、HTMLの構造に意味を持たせるということになります。
なぜ必要？
セマンティックHTMLの概要は、なんとなく掴めたでしょうか。 でも、なぜその必要性がいまいちピンときませんよね？
この箇所については他サイトで詳しく解説している記事が多くありますが、、、
ポイントは一つ
グーグルのクローラーにwebページを正しく理解してもらう
これです。
もちろんコンテンツの内容自体も、質が高いものの方が評価されやすいですが、いくら内容が良くてもGoogleが正しく評価しないと意味がないですよね。 そういった意味でもweb制作、あるいはweb開発においてもセマンティックの考えは重要であるといえます。
セマンティックで重要なタグのうちよく使うもの
ここからはセマンティックコーディングでよく使う具体的なタグを紹介します。
< header >（ヘッダー）タグ
まずはhtmlに必要なheaderタグです。headerタグ内にはtitleをはじめmetaディスクリプションやスタイルシートの読み込みなど、ページの基本的なことを書いておきます。
< footer >（フッター）タグ
HTMLの下部につけることが多いです。footerタグには、フッターのナビゲーションやコピーライトなど、ユーザーに対するサイト情報を記載していることが多いです。
< section >（セクション）タグ
セクションというと定義がかなり曖昧ですが、意味的なひとまとまりに対してつけます。sectionタグの要素は見出しがつけれるまとまりだと捉えるとわかりやすいかもしれません。
< article >（アーティクル）タグ
articleはその名の通り記事の部分につけるタグです。独立して完結している要素という言われ方をよくしますが、ブログの1記事につき一つのarticleをつける感じです。
< aside >（アサイド）タグ
補足情報のセクションに使用します。書籍でいうところの、コラムみたいな位置づけでしょうか。
< h > タグ
見出しに使われます。適切に利用することで、SEO対策に効果の高いタグになります。基本的にh1→h2→h3といくにつれて、大見出し→小見出しになっていきます。
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。
SEO スターター ガイドスターター ガイド – Search Console ヘルプ
Google先生もおっしゃっている通り、1トピックにつき、その概要を簡潔に説明するような意味のある見出しをつけることが大切なようです。
さいごに
HTMLは何かと軽視されがちですが、極めようとすればかなり奥が深いですし、SEOに直結する部分でもあります。セマンティックHTMLを使いこなして、さらにワンランク上のフロントエンド開発者を目指しましょう。
Vue.jsでaxiosを利用したAjax通信をゆる〜く解説
お題
hogehoge.com/api/v1/organisms
というURLを叩いたときに
[{"Name": "犬", "Category": "哺乳類"}, {"Name": "マグロ", "Category": "魚類"}, {"Name": "タカ", "Category": "鳥類"}]
という配列を返すapiを利用するとします。
このapiにVue.jsを使ってアクセスし、情報を取得してみましょう！
完成コード
<template> // templateは今回割愛 </template> <script> import axios from "axios"; export default { name: "Sample", created() { axios.get('hogehoge.com/api/v1/organisms') .then(response => { console.log(response.data); }); .catch(error => { console.log(error) }); }, }; </script> <style> // styleは今回割愛 </style>
開発
$ npm install axios --save
② scriptの中に
import axios from "axios";の記述をしましょう。③ createdの中にてaxiosでのGET通信を呼び出します。
created() { axios.get('hogehoge.com/api/v1/organisms') .then(response => { console.log(response.data); }); .catch(error => { console.log(error) }); }, },
- ④ ブラウザをリロードしてdevツールのコンソールを確認すると、、
Array(3)のようにapi通信を行なって配列が取得できていることがわかると思います。
createdとmountedではどちらに書く方がいい？
createdはDOM要素(divのタグなど)を生成する前に実行されます。 一方、mountedはDOM要素が生成された後に実行されます。
つまり、DOM要素にアクセスしなければいけない場合は、mountedに書く方が好ましいです。
今回は、DOM要素に絡むことがないので、createdを使って処理していますね。
createdの処理にすると、DOMを構築する処理に並行して通信を行えるので 扱うデータ量やコンポーネントが多く大きくなると、パフォーマンスに影響するので注意です。
参考
Vue.jsでライブラリをインポートしたときにエラー
概要
vue.jsでライブラリを利用しようと、npm install パッケージ名 のコマンドを叩いたところ
npm ERR! Cannot read property 'match' of undefined
となり、エラー。
原因
利用していたパッケージ管理ツールは、yarnであったにも関わらずnpmでインストールしていたのが問題。
対処法
❶ npm installによってpackage.jsonに追加された行を削除。
npm uninstall パッケージ名
でもよい。
❷
yarn add パッケージ名
でyarnで入れ直し。
考え
パッケージ管理ツールは、プロジェクト、サービス毎に何を使うかを統一させておいた方が良い。
↓vue-cliでnot foundのエラーが出た場合はこちら https://k-enter.hatenablog.com/entry/2021/04/04/203449
参考
dockerとは？ゆるーく解説していくよ
dockerとは
物理マシンのOSを共通に使いながら、その上にコンテナというアプリごとの環境を作り上げることのできるツールです。 各アプリごとの環境は、各サーバーごとに一つの環境を作らなければなりませんんでしたが、dockerを使えば一つのOSで複数の分断された仮想の環境を作り上げることができるわけですね。
どんな時に使う
アプリを作るときなど、開発環境を整える際に利用します。 近年のweb系企業などの多くが利用しています。
メリット
・pcなど個々人の異なる開発環境でも、同じ環境を構築しやすい。 ・作ったコンテナを元にそのままクラウドサーバーなどにのせやすい。 ・OSを共通で利用しているため、軽量である。
デメリット
・dockerの利用に必要な知識も多いので、その勉強をしなければいけない。 ・インフラやネットワーク周りの知識が一部必要になる。
