世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
【JavaScript】グラデーションで隠して「もっと見る」で開閉するコンテンツ
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでもっと見るのコンテンツをグラデーションで隠して表示する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの もっと見るをクリックすると、グラデーションで隠れているコンテンツを開閉して表示します。下記に動作確認用のデモを用意しましたので、ボタンをクリックして開閉する動きを確かめてみてください。 See the Pen 7474 by ryohei (@intotheprogram) on CodePen. 本記事では、開閉するコンテンツをテーマにしているため、開いた後に閉じる動作を組み込んでいます。開くだけで良い場合は、もっと見るボタンをクリックした後にボタンの要素自体をremoveなどで削除するなどしてご利用ください。 HTMLでレイアウトを作成する HTMLでレイアウトから作成し
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
JavaScriptで全角⇔半角の変換をサンプルコード付き解説！
JavaScriptで全角⇔半角の変換をサンプルコード付き解説！フォームで入力された文字列が全角や半角がバラバラに入力されてしまうとデータの後処理が大変です。入力された文字列を全角に変換したり、半角に変換したりして統一することができたら便利です。この記事ではJavaScriptで全角⇔半角の変換方法を解説していきます。
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
WordPressでポップアップを表示(プラグイン無しで実装) | タルト株式会社
WordPressでプラグインを使わずにポップアップを表示させる方法を紹介 この記事では「WordPressのプラグインを使わずに画像バナーなどのポップアップ表示する方法」を解説します。 バナーだけでなく独自で書いたHTMLや好きなタイミングでポップアップを表示する方法まで紹介しますのでお楽しみに！ ポップアップのサンプルデモ 完成するポップアップはどんな動きになるのか？実際に見てみた方が早いので下記のボタンを押してポップアップのデモを見てみてください (※画像は引き延ばしてるのでちょっと粗いです) このような機能がプログラムの知識なしで、コピペで実装できます。 実装にはプラグインではなくショートコードを使いますので、使う場所はいつもの投稿ページなどの記事編集画面です。 プラグインを使わずにショートコードで実装する利点 WordPressに機能を追加するというとすぐにプラグインに頼りがちで
こわくない関数型プログラミング
関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。
Markerクリックでモーダルを実装する、マーカーはRailsから。 - Qiita
2016年3月末の情報です。更新されても知りません。また、Rails5のβ版が出ているようですが、Rails4でやってます。 Railsのデータベースから、GoogleMapにマーカーを落とす。 マーカークリックでモーダルウィンドウを開く。 モーダルの中に、情報を表示する。 カスタマイズが難しかったので、gmaps4railsは使わない。 準備 APIKEY GoogleDevelopersへ登録し、APIKEYを入手する。生成されたスクリプトとAPIKEYをHTML文に貼り付ける。開発環境でアセットを行っていなかったからかはわかりませんが、application.html.erbにスクリプトのURLを貼り付けた場合、更新でしか地図が表示されなくなりました。これ要注意! Bootstrap vendor/assets配下にそれぞれ格納する。読み込みはapp/assets配下のそれぞれのap
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
バックエンドエンジニアが Next.js でモダンなフロントエンド開発を始めるにあたり学習したこと
2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく、GraphQL の周辺ツールやテストについても学習しました。 これまで 当時、Web 系の受託開発会社にて主に Ruby on Rails でバックエンドの開発をしていました。TypeScript, React は学生の頃から趣味で書いていました。 テストは、Rails での開発なら RSpec や Capybara で書いていましたが、JS ではほぼやったことがありませんでした。GraphQL は全くの未経験でした。 やったこと React チュートリア
JavaScriptでURLパラメーターを取得し配列に格納しておく - Qiita
備忘録 JavaScriptでURLパラメーターを取得し配列に格納しておく記述。 JSライブラリ依存せずに使用。 記述 var arg = new Object; var pair=location.search.substring(1).split('&'); for(var i=0;pair[i];i++) { var kv = pair[i].split('='); arg[kv[0]]=kv[1]; } //変数argはオブジェクトですよ var arg = new Object; // 変数pairにURLの?の後ろを&で区切ったものを配列にして代入 var pair=location.search.substring(1).split('&'); // location.search.substring(1)は、URLから最初の1文字 (?記号) を除いた文字列を取得する //
銀行コード、銀行名など金融機関情報の検索・自動入力API
[ポイント] ▼入力欄データから部分一致検索を行なう。 ▼検索キーは半角数字、半角ローマ字（最大6文字）、ひらがな（最大6文字）、漢字名称。 ▼全桁入力もしくはガイダンス画面の行選択で確定し、各欄に結果を自動入力します。 ※支店情報は銀行が決まってから動作する。 ※入力欄右端の「×」クリックでデータ削除。 ▼使い方はjavascriptファイルを1行追加。 ▼特記事項としてid名を合わせること。 （bank_code、bank_name、branch_code、branch_name） ▼標準で最大3箇所に設置できます。 [データの更新について] ▼無料版は、当方が気付いた時に手動で行います。 ▼有償版は、下記データソースの更新に合わせて自動で行います。 ▼金融機関情報のデータソースは、角谷様のページ データを利用させて頂いております。 ▲ページの先頭へ ◎BankAutob.js の利用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - knadh/autocomp.js: A super tiny Javascript autocomplete / autosuggestions library. Zero dependencies, ~800 bytes min+gzip.
JavaScriptでconsole.logを使用してませんか？
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
