はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても

この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で

前書き 5か月ほど前にQiitaに登録し、それから登下校中や休憩時間など、空いた時間は基本Qiitaを見るようになりました。 ストックした記事が106、LGTMした記事が12ページ分にもなり、記事の整理もかねて、特に好きな記事や理解が深まった記事などを振り返りつつまとめようと思います。 無言で記事を掲載しております。迷惑だったら申し訳ありません。 が、随時更新予定です。 追記(2022/10/18) Twitterにておすすめの記事を紹介していただきました！ 今後もそういった機会があることを信じて、ほかの方にオススメされた記事を紹介する枠を設けます。 誰に向けて Qiita触りたての人 プログラミング始めたての人 自分自身 最初に見ておくべき記事 最初の頃は数学と同じように変数を決めていたため、aやbとしていたが、この記事を見て驚愕した（笑） リーダブルコードを読むきっかけとなった記事。

まだ検証足りないけど、マジで想像通りのブツなら魂震えるかもしれん…。 Announcing D1: our first SQL database Cloudflare D1 = Edge SQLite Cloudflare D1 は Cloudflare Worker で、つまり CDN Network 上で sqlite が動きます。これだけなら普通の sqlite ホスティングなんですが、もちろん Cloudflare が出すからにはそれだけではなく、CDN Edge 上に Read Replica がバラ撒かれた sqlite になります。ヤバくないですか？ 僕はヤバいと思いました。 このヤバさを知るために、Cloudflare が開発した基盤についていくつか抑えておく必要があります。 Durable Objects は CDN 上の Actor モデルを構築できます。この Acto

「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h

There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.

最近TypeScriptが好きで勉強していっている。しかしなかなか型定義周りが手に馴染まず、少し複雑な型定義を読んだり、自分でユーティリティ型を定義したりすることが難しかった。 そこで型を手に馴染ませるために色々学習をしてみたので、やっていることをメモしておく。 まずざっとTypeScriptの型概要を学ぶ まずTypeScriptでの型を簡単に学ぶには以下の2つの資料がわかりやすかった。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita ひたすら型演習をする 資料を読むだけでは全く手に馴染まないと思ったので、その後ひたすら型演習をしている。 まずは TypeScriptの型演習 - Qiita 。これは先程の型初級、型入門の記事を書いた人が演習問題を作っているため同じ流れで学習でき、さらに解説編も充実しているので、手を動かしながら学ぶのに最適であ

この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図

セガは6月25日、対戦アクションパズルゲーム「ぷよぷよ」のソースコードを使ったプログラミング教材「ぷよぷよプログラミング」を、26日から無料で提供すると発表した。 ぷよぷよプログラミングは、Webシステムの開発を手掛けるアシアル（東京都文京区）のプログラミング学習ツール「Monaca Education」上で使える教材。インターネット環境があればOSの種類に関係なくWebブラウザから操作できる。 利用者は、HTML5やJavaScriptで書かれたソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ。「ぷよ」を左右に移動させたり、消したりできる他、ぷよの色や数を変更できる。 関連記事 セガ、手のひらに収まる携帯ゲーム機「ゲームギアミクロ」発売決定　「ガセですか？」「セガです」 セガは6月3日、小型携帯ゲーム機「ゲームギアミクロ」を発売すると発表した。セガグループの里

Babelのコマンドラインと、Browserifyを使って、ES2015/ES2016/ES2017のJavaScriptが大体全部が、IE11でも動くようにして動作確認を行いました。 requireを1箇所つかうだけなので、Browserify じゃなくて WebPack でもいいと思うので、お得意な方はそちらで使ってください。 対象 Windows環境ですが、たぶん Macでも使えます。 ES2015/ES2016/ES2017 を Chrome と Firefox で動作確認する 2018/02/27現在の Win版Chrome と Firefox では、Babel変換しなくても全部動いてます。その動作確認を次のファイルによって行います。 index.htmlをブラウザで開くと、エラーもなく[test finish]とメッセージが表示されれば、動作確認完了です。 IE11では当然エラ

はじめに ES2017にもなると、動かないブラウザもちらほら(IEとか)出てくるので、Babelで変換(コンパイル あるいは トランスパイル)してから動かすのが通常ですが、 npm インストールとか、webpackとか、環境つくりが少しめんどくさいです。npmスクリプトでやるのかとか、gulpか、とか、browser-syncに受け渡すにはどうするべきか、とか、とか、少しじゃなくて、だいぶめんどくさいですね。 どうせ数年もしたら、また違うパッケージャーとかタスクランナーとかが流行って、前のが廃れて使わなくなるんでしょう？ ならば、環境構築なんて無視してしまいましょう。 しかし、Babel変換は使いたい。 ということで、環境構築無しにBabel変換します。 HTMLだけで、babel変換します。 環境を整えなくても、CDN、つまりScriptタグにBabelをリンクすることで、Babelの機