JavaScript で日本語の変換確定とその他のリターンを識別する方法
HTML のテキストフィールドやテキストエリアで、日本語の変換を確定させるためのリターンキー（エンターキー）入力とその他のリターンキー入力とを JavaScript で識別する方法についてです。 早速結論ですが、イベント compositionstart と compositionend を使えば OK です。 イベント compositionstart は変換処理がスタートしたときに発火します。 compositionend は変換処理が終了すなわち変換が確定したときに発火します。 なので、変換中であるかどうかを表すフラグを持っておいて、フラグが立っているときにリターンキーが入力されたら変換確定、立っていないときに入力されたらそれ以外、という風に見分けることが可能です。 Vue.js での処理イメージ: <input type="text" @keydown.enter="submit"
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
zxの紹介 〜 さよならシェルスクリプト そして伝説へ｜Offers Tech Blog
はじめに こんにちは!! プロダクト開発人材の複業転職プラットフォーム Offers を運営する株式会社 overflow 普通のバックエンドエンジニアの takkun7171 でございます。 最近は Apex もやってますが、筋トレにハマっています。可変式ダンベル買ったんですけど、これはいいモノですね。齢 40 のオッサンだけど、ちゃんと鍛えれば筋肉育つんだから！！w zxとは 簡単に言うと、JavaScript でシェルスクリプトがお手軽に書けます。 zx は Node の child_process のラッパーで、$で囲んで shell コマンドを簡単に実行できるので、 zxを使いこなせれば、シェルスクリプトとおさらばできます。 紹介記事はネット上にちらほらあるのですが、便利さの割に周りで使ってる人もいないので今回 zx について書いてみました。 なお zx は Google の O
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法 - Qiita
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。 サマリー The HEY stack: - Vanilla Ruby on Rails on the backend, running on edge - Stimulus, Turbolink
「たかがJavaScript」のその先 #TECHPLAY
フロントエンドと自分のキャリア形成について。このスキルツリーとセットで見るといいかもです。 https://whimsical.com/oPYtoDPyho6uWK1gDmD9e
ハブろぐ - havelog.ayumusato.com
事業会社のWeb/IT開発系マネージャーとしてのプレイスタイルまたは取扱説明書 Posted: 2024-03-05 Updated: 2024-03-05 #マネジメント 開発生産性の可視化サービスから何を見いだして何ができるのか、あるいはすべきで無いこと Posted: 2024-02-05 Updated: 2024-02-07
JavaScript でスロットマシーンを作ってみました
3. 内容[スタート]ボタンを押すと、7つの選択肢が回転を始めます。[ストップ]ボタンを押すと止まります。下にあるスライダーで、回転するスピードを変えることができます。実際には 7つの div 要素が用意してあり、それらが回転しているように見せかけています。Canvas は使っていません。4. ソースコードlaboradian/slot-machine-sample0015. 参考情報特にありません。
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
ページ内リンクが飛べないのはjquerymobileのせいだった！ページ内ジャンプできる修正方法
jquerymobile(ジェイクエリモバイル)を利用している場合は、ページ内リンク（ページ内ジャンプ、ページ内アンカー）が効かないようです。 jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、 ページ内アンカーするときには「＃」が無効化されてしまうようです。 みなさんがいろいろ対応するためのjavaスクリプトを作成してくれているんですが、複数のページ内リンクにも対応しているスクリプトがこちらでした。 １、リンクにイベント用のクラス名をつける リンク用のaタグに、class=”anchor”という名前をつけました。 名前付け用のaタグはいつも通りnameやidに名前をつけます。 <a href="#aaa" class="anchor">アンカー１</a>｜ <a href="#bbb"
jQuery.floatTheadでスクロールしても常にテーブルヘッダを表示する - くらげになりたい。
テーブルの列が多くなると、スクロールしてもテーブルヘッダが見えなくなってしまう。。。 テーブルヘッダの固定して、スクロールしても常に表示されるようにした際の、備忘録。 便利なjQueryプラグイン(jQuery.floatThead)があったので、それを使ってみた 使い方 使い方はこんな感じ <html> <head> ・・・ <!-- Include Floaing Table Header --> <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.5/jquery.floatThead.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $table = $('table'); $table.fl
Bootstrap Datepicker
Setting 導入方法は、 プラグインをこのサイトからダウンロードしてください。https://github.com/uxsolutions/bootstrap-datepicker プラグインのオプション設定方法は、このページで確認できます。オンラインデモ セッティング方法 セッティング方法は、簡単。jquery、bootstrap、font-awesome、Bootstrap Datepickerのプラグインを読み込ませましょう。日本語化する場合は、bootstrap-datepicker.ja.min.jsを直接読み込ませます。 <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript" language="javascript"></script> <script src=".
[JavaScript] sleep(setTimeout) を Promise化する | DevelopersIO
はじめに おばんです、ダイエットが捗らない田中です。 さて、今回は sleep と Promise についてちょっとしたTipsをまとめます。 sleep は非同期処理を擬似的に作り出す時などに有用で、 Promise で扱いたいシーンがたまにあるので紹介します。 setTimeout JavaScriptには処理を一時停止させる sleep 関数が存在しません。処理を一時停止させたり、待ちを発生させたい場合は setTimeout 関数を利用して実現する方法があります。 const printHoge = () => { console.log('Hoge') } setTimeout(printHoge, 5000) // Hoge <- 5秒後にコンソールに出力される sleep(setTimeout) を Promise化する 連続した非同期処理を書くときによく使う言語機能として
![[JavaScript] sleep(setTimeout) を Promise化する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c530ac8058349624341e83c42577b3ded88f3e6/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fnodejs.png)
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMIT License。オープンソース。商用利用可能。 今現在(2015年8月15日)の最新版は 1.4.4。 JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを実現します。 これま
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【vue.js】mounted で props の値にアクセスできない
GitHub - 30-seconds/30-seconds-of-code: Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
CodeSandbox: Instant Cloud-Based IDE
Gallery
