今さら聞けないHTML　2021年08月23日

JavaScriptで役立つFetchAPIテンプレ（WebDevTips#3）

こんにちは，ココア（@cocoa_folio）です．
これまでは主にpythonに触れてきましたが，最近Javascriptを勉強し始めたので，Webエンジニアを目指す方々へのtipsとして記事を書いていきたいと思います．

前回の記事はこちら▼

https://qiita.com/cocoa_folio/items/666d331d52aa9669d358

#本日のゴール
今回はFetchAPIを使って簡単なブラウザアプリを作ってみようと思います！


#APIとは

FetchAPIの前に，APIについて知らない方もいるのでは？
そこでGoogleで「API とは」と調べてみると…

#####APIとは
>APIとは、「Application Programming Inte

【HTML&CSS】Bootstrapのmarginとpaddingまとめ

#対象者

* bootstrapでマージンとパディングを使いたい方
* 簡単に行や文字の間に空白を空けたい方

#目的

* bootstrapを使用して,marginとpaddingをview上で設定する

#実際の手順と実例
###1.前提

bootstrapの使用例はこちら

https://qiita.com/nao0725/items/e9beb9b4f20db83c4086

###2.marginかpaddingかを設定

bootstrapを導入するとHTMLの各要素のクラスに「m」や「p」と数字を組み合わせて幅を調整できます。

* m : margin
* p : padding

例

“`

クラスを指定するとマージンがつきます

クラスを指定するとパディングがつきます

“`

###3.上下左右を設定する

| 上下左右の指定　| 内容 |
|:-:|:-:|
| t | top |
| b | bottom |
| l | left |
|

align-itemsについて

# はじめに
本記事では、HTMLの初めの方に学習する`Flexbox`について記述します。
HTMLをほぼ１ヶ月ぶりに学習しているため、リハビリがてらです。

# Flexboxとは
親要素に、`display:flex;`
を記述すると子要素が横並びになります。
もともと縦並びだったものが横並びに変わったということです。

その子要素たちの並び順や要素同士の幅は、
詳細に決めることができ、その方法を、`Flexbox`といいます。

## justify-contentプロパティ
主軸方向,x軸（初期値は水平方向）の配置を決めることができます。
*justify…整える、揃えるという意味。
過去に投稿している記事を参照ください。

https://qiita.com/mkato1013/items/24b7341355c1346c60ea

## align-itemsプロパティ
交差軸方向,y軸(初期値は垂直方向)の配置の詳細を決めることができます。
*align…物を一直線に合わせる、一直線に並べるという意味で使うそうです。

以下は、
`justify-content

HTMLで和文と欧文の間にスペース（アキ）を自動で挿入する

和文と欧文が混じった文章において、読みやすさのため少し文字間のスペース（アキ）を入れたいときがあります。LaTeXなど組版に特化した環境ではそのような機能がサポートされていますが、HTMLでは今のところ標準ではサポートされていません。ただし、半角スペースを直接入力すると

– 入れるか入れないかの一貫性をとりにくい
– 幅の調整がしにくい

といった問題があります。そこでJSとCSSで自動的に挿入されるようにします。

以下のコードは中国語向けのこちらを参考にしています。

https://github.com/mastermay/text-autospace.js

“`typescript:main.ts
import * as findAndReplaceDOMText from ‘findandreplacedomtext’;

enum Space {
Quarter = ‘quarter’,
Half = ‘half’
}

class TextAutospace {

static readonly ELEMENT_NODE = 1;

quarter

駆け出しプログラマ向け、実務で使える「変更容易性」ってなに？

# 前置き
こちらの記事は筆者が備忘録的にまとめたものです。
せっかく来てくれた読者の皆様にとっても役に立つように意識して書いてみましたので、
是非最後まで読んでみてください。では、Let us begin!

# 変更容易性(EoC: Ease of Changing | Modifiability)
へんこうよういせい とは

これは特に辞書など引っ張ってくる必要もなさそうですね。
意味は、変更のしやすさ になります。変更のしやすさと一口に言っても、

– 変更を加える際に必要な変更箇所の数
– 変更を加える際の他の実装への影響度
– 変更に要する時間

等々いろいろあるかと思います。

# 変更容易性をコードに適用した例

## 適用前（変更容易性 改善前のコード）
まずは変更容易性があまりないコードを見てみましょう。（下の問題点から見ると早いです）
タスクの進捗ステータスに応じた処理を実行する関数があるとしましょう。

“`javascript:javascript
// task は以下ステータス(status) のどれかを持つことにします。（以下 3つのみ です）
//

HTMLとCSS全く知らないがJetpack Compose for Webでポートフォリオサイトつくった

# はじめに
私は、普段Jetpack ComposeをAndroidアプリ開発で趣味程度に触ってきました。

最近stableになったAndroidのJetpack Composeですが、今年5月にJetpack Compose for Webの[Technology Preview](https://blog.jetbrains.com/kotlin/2021/05/technology-preview-jetpack-compose-for-web/)が公開されました。

私の体感ではあるのですが、触ってHello worldなどしている記事は何件か見つけたのですが、何か作って公開して解説などしてる記事などは見かけなかったので今回触ってみようとなったのがきっかけです。

タイトルにある通り、私は今までiOSをほんのちょっとやったことがあって普段はAndroidアプリ開発とFlutterを使ったモバイルアプリ開発をしているので、HTMLやCSSを始めReactなどのWebフロントを開発する技術にとても疎いです。

なので、「あっているのかわからんがとりあえず動いたからこれでいこう」

jQueryチートシート

# はじめに
最近jQuery関連について学習したので**チートシート**を作成しました！
よく使うものを中心に、使い方や記述のポイントを簡単にまとめたのでご活用ください。

## 目次
[1.予約状態](#1-予約状態)
[2.セレクタの指定方法](#2-セレクタの指定方法)
[3.Family Treeの探索](#3-Family Treeの探索)
[4.よく使うメソッド一覧](#4-よく使うメソッド一覧)
[5.その他のメソッド](#5-その他のメソッド)
[６.each()](#5-each())
[６.イベント処理](#5-イベント処理)
[６.非同期通信: $.ajax()](#5-非同期通信: $.ajax())

## 予約状態（HTMLを先に読み込む処理）

“`php:index.html
!DOCTYPE