SEOに強いTypeScript入門記事がミスリードを招いていて絶望しかけた - Qiita
「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeScriptとJavaScriptの違い「TypeScriptではクラスの作成ができる」 侍エンジニア - 「TypeScriptでは、JavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行うとき、JavaScriptではコ
新言語『TypoScript』を作った - Qiita
この記事は、クソアプリAdvent Calendar2021の20日目(ホノルル時間)の記事であると同時に、GMOペパボエンジニア Advent Calendar 2021の21日目(日本時間)の記事でもあります。 みなさん、TypeScript使ってますか？TypeScriptはJavaScriptの世界に秩序をもたらす素晴らしい言語ですね。 しかし世界には光の秩序だけでなく闇の混沌も必要です。 という訳で、JavaScriptに闇の混沌をもたらす新言語を作ってみました。 その名も『TypoScript』です。 TypoScript is 何 TypoScriptとは何か。まずはこちらのコードをご覧ください。 function fizz_buzz(count) { for (var i = 1; i <= caunt; i++) { if (i % 3 === 0 && i % 5 ==
モールス信号でツイートしたかった - Qiita
この記事はクソアプリ Advent Calendar 2021の15日目の記事です。 モールス信号ってかっこいいですよね？ 「あーモールス信号でツイートしたいなー」 と思ったときに便利なアプリを作りました！ 作ったもの ■morse-tweet 今回作ったのは ・ひらがななどをモールス信号に変換して ・モールス信号をツイートできる アプリです！シンプル！ ちょっとはずかしいこともモールス信号なら すぐわからないのがいいですね(*´ω｀*) モールス信号をつぶやきたくなったときに ぜひ使ってみてください(*´ω｀*)!! 使った技術 今回はこんな感じの構成で作ってます！ フロントエンド ... Nuxt.js/TypeScript/Tailwind CSS デプロイ ... Firebase Hosting データ変換 ... SSSAPI 基本はよく使ってるNuxt＋Firebaseの構成
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
githubで最もやべー関数を発掘する - Qiita
はじめに 先日、職場で「自分が 改修したor 書いちゃった いちばんやべー関数」ネタで盛り上がりました。 みんないろいろ話してくれましたが、やっぱり僕の書いた「コマンドパターンのメインループ関数(1500行)」の圧勝でした。 なんであんなコード書いたんだろ。 そこで、今日は僕の傷ついたプライド癒すべくgithubから「世界でいちばんやべー関数」を発掘します。 つまり、「俺が書いた関数よりやべー関数に会いに行く」 結論 マジでやべー関数は次の2つ 「opencvリポジトリのcv::agast_cornerScore<AgastFeatureDetector::AGAST_7_12s>関数」(複雑度1868) 「SuiteCRMリポジトリのOpenTag関数」(複雑度1509) 言語毎の傾向に着目すると... javascriptにはやべー関数が多い python/java/swift/rub
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
「通知止まらんwww」を体験できるアプリを作った - Qiita
クソアプリ2 Advent Calendar 2018 の1日目の記事です。 今年も始まりましたアドベントカレンダー！ クソアプリの人気が年々上昇しているようで、今年からカレンダーが2つに増えたそうです！ クソアプリ ／ クソアプリ2 はじめに 突然ですが皆さん、SNSでよさげな投稿をしたのに全然いいねされなかった、という経験はありませんか？ 「これは面白い」「たくさんいいねされるに違いない」とウキウキしながら投稿したのに、思ったより反応が貰えなかった・・・ 悲しいことに、このような出来事は今日も世界中で起こり続け、毎日たくさんの人々を苦しめています。 『SNSで辛い思いをする人を1人でも減らしたい・・・』 僕はそう思い立ち、アプリで世界を救うことを決意しました。 作ったもの ちょwww通知止まらんwwwwwww あなたの投稿にたくさんの人が「いいね」したかのように、大量の通知が表示される
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
いいこと言ってそうな名言を集めたサイトを作った「プログラミングはセックスのようなもの。ひとつのミスに人生を捧げてサポートしなければならない」
英語でよくある、いいこと言ってそうに見えるけどなんかプッとくる名言みたいなのが好きで集めていた。職場での息抜きにそういう一文をslackに貼り付けるのはよくやっていて、面白いからまとめてウェブサイトにした。 エンジニアの名言メーゲン https://www.meigen.ga/ バックグラウンドにきれいな景色の写真を入れて無駄に「いいこと言ってそう」な雰囲気にした。 名言は人気順ということでツイート数順に上から並べている。もし気に入ったのがあって、ツイッターで共有していただければ順位が上がりますよ、と。 無料だから.gaでドメインを取った。「名言. ガー」とでも覚えてください。 https://www.meigen.ga/ ボタンひとつで英語版に切り替わるので英語の勉強にもどうぞ。（学習効果の保証は一切無し） ほんとただの趣味でしかないんだけど、集めているのでもし面白いのをご存知でしたらサ
なぜビンゴゲームで同じ数字を書いてはいけないのか
先日、結婚式の二次会に招待していただきました。新郎・新婦ともに大学時代からの友人です。 歓談中にビンゴゲームが開催されました。私はビンゴゲームに完全に勝利にしたにも関わらず、景品をもらうことができませんでした。 あまりに理不尽な経験だったので、泣き寝入りしてたまるものかと思い、Qiita に初投稿してみようと思います。 ビンゴゲームとは ビンゴはビンゴですよね。「ビンゴ！」って叫ぶやつです。 今回のビンゴゲームは $3 \times 3 = 9$ マスのカードを利用しました。縦・横・ナナメに一直線に 3 マス穴を開ければ「ビンゴ！」になります。 実は、各参加者には白紙のビンゴカードが配られ、各テーブルにはビンゴゲームのルールが書かれた紙が配られていました。下記がその内容です。 真ん中のマスに "free" と書いてください。（i.e. 真ん中のマスはゲーム開始時に穴を開けて良い） それ以外
SEO対策をサーバーサイドレンダリングせずにやっていく - Qiita
2019/05/08 追記 【大ニュース】 なんとGoogleBotのJSレンダリングエンジンがChrome74相当になって、ES6に対応するようです...！ ここで書かれた内容の多くはすでに古くなっているかもしれません...！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html もう時は2018年の後半となり、React・Vue・AngularといったモダンJavaScriptフレームワークは開発現場でよく見かける存在となりました。 一方で、依然としてこれらを利用して開発をする場合には「Googlebotがそれらをレンダリングできない可能性がある」という問題がついてまわります。 そのため、サーバーサイド側で前もってJavaScriptをレンダリングしておく、サーバーサイドレンダリングという技
ガチャプログラムの実装（中級者向け） - Qiita
ガチャの実装はおそらくあなたが思っている以上に難しい。 本稿では、最終的に以下の機能をもつガチャを作る。最初は簡単なものを作り、徐々に難しくしていく。言語は JavaScript。ES6もバリバリ使うので初心者には難しいかも。 - ピックアップ対応: 特定のキャラをあたりやすくさせる - 10連特典対応: 10連の場合には、★4 一体以上を保証 - 天井対応: 99 回連続で★5 がでてない場合、★5 を保証 - メンテが容易 - コードの変更が一切不要 - 設定ミスしにくい設計 1. 超基本 基本からはじめよう。1% で大当たり, 10% で当たり、 89% ではずれのガチャはこんな感じで実装できる。乱数はガチャ関数の外に出して純粋性を保つことで、テストをしやすくするのが重要: function gacha(rval) { if (rval < 0.01) return { id: '大
いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った - Qiita
日本を代表するすばらしい俳優であり, ブルータルウェブレイアウトの先駆者である阿部寛氏と彼のウェブサイト制作者への敬意をこめて. 成果物 左が通常のWikipedia、右がこの拡張機能でAbehiroshize（アベヒロシャイズ）したページ. Githubレポジトリ 技術仕様 DOM操作 基本的にjQueryでDOM操作しまくっているだけである. 左ナビゲーション判定 ナビゲーションの判定について、 $('nav') や $('#menu') などをもとに判定して左側に表示しようと思っていたが、意外と世の中のサイトはマークアップが適当なものが多く、うまくいかなかったので <ul>だったらナビゲーションにする という強硬手段に出た. ただし、<main>タグ内にあるそれは除く. $('ul').each(function() { if ($(this).closest('main').len
うわっ…私のtrello、丸見え…？（簡易チェックツール付き） - Qiita
ググると出てくる誰かのボード みんな大好きタスク管理ツールのTrello。 先日、Trelloの利用規約を調べようと思って「trello 利用規約」でググったら、公式の利用規約ページよりも誰かの公開ボードがヒットしました・・・ 公開ボードになっていると検索エンジンにインデックスされるようで、「trello ○○」でググると色々なボードがヒットします。 恐ろしいググラビリティの高さです。 ※悪用を推奨しているつもりではないですが、本当に簡単に色々ヒットしてしまいます。 非公開に設定しよう ボードが公開設定になっていると、検索エンジンにインデックスされてしまいます。 皆さん、必要が無い限りはボードを非公開にしましょう。 以下のように、簡単に非公開に出来ます。 公開ボードがないかチェックしよう 参加しているボードが沢山ある場合、ボードをひとつずつ開いて調べるのは大変なので、簡易チェックツールを作
SPAを導入する際に必要だったSEO対策についての話 -SSR? Prerendering?- - Qiita
これはDMM.com #2 Advent Calendar 2017の４日目の記事です。 カレンダーのURLはこちら DMM.com #1 Advent Calendar 2017 DMM.com #2 Advent Calendar 2017 ども！おはこんばんちは！ 動画配信サービスでWebエンジニアをしている、17新卒の小芝です！ 動画配信サービスに配属されてからは、 フロントエンドの改修やログ収集システムの構築など、 幅広くやらせていただいています！ この記事では、 SPAにおけるSEO対策がなぜ必要なのか？ 対策するにはどんな候補が存在するのか？ どういう基準で、どんな選択を行ったのか？ についてまとめてみました！ 5/24 追記 JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp SEOのためのSSRはやらなく
[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita
Glitchとは GlitchはNode.jsのアプリを公開するためのサービスです。 Node.jsでウェブアプリを公開しようとすると、サーバーの設定したりドメインを取得したり…とても複雑です。 Glitchは、あなたの創造性を試すことだけに集中できます。 Glitchは、あの有名なプロジェクト管理ツールのTrelloをつくったFogCreekSoftware社によって開発が進められています！ アプリを公開するためだけでなく、オンラインのEditorなどもついていい感じです。 使ってみる これまでAWSやさくらインターネットなどを使っていましたが、Glitchはずば抜けて簡単です。 まずはGlitchにアクセスします。 新しいプロジェクトの作成1 右上の①[Sign in]ボタンからログインします。 FacebookかGitHubが選べますが、後々GitHubからソースコードを取得すること
![[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a6f54dbfed613279dcdfaa6714de0a80cb6008b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMCVFNyU4NCVBMSVFNiU5NiU5OSVFMyU4MSVBNyVFNyVCMCVBMSVFNSU4RCU5OCVFMyU4MSVBQiVFMyU4MiVBNiVFMyU4MiVBNyVFMyU4MyU5NiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNSU4NSVBQyVFOSU5NiU4QiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MyVFMyU4MiVCOSVFMyU4MCU4Q0dsaXRjaCVFMyU4MCU4RCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFRiVCQyU4MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTc1NTNiOTRkMjc3NGQ1ZjYxYjU2M2E0YjU5YzE0MjI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b25lZGFjbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTcyNTA4MTU2YmMwZTVmNzQ5ZThkZmYxY2I3OTJiODE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D03b4202c0a5228dc571f35b021dbd12c)
Jade / pug を使ってjsonからページ大量生成 - Qiita
EJS を使って json からページを生成するノウハウは見当たるのですが、 意外と Jade / pug で同じことをしようとすると手こずってしまったのでメモ。 やりたいことは、 1. １つのテンプレートをベースに使う 2. json に生成したいページの情報をまとめる 3. (1)と(2) から静的 HTML を量産する です。 実装 gulp-jade を使っています。 [ { "no": 1, "title": "北海道旅行", "text": "札幌、小樽、旭川のツアーはこちら" }, { "no": 2, "title": "東北旅行", "text": "青森、秋田、岩手のツアーはこちら" }, { "no": 3, "title": "関東旅行", "text": "群馬、栃木、茨城のツアーはこちら" } ] /*******************************
マンションのLAN内のゲートウェイが中間者攻撃してくるお話 - Qiita
来歴 私は去年、とある賃貸マンションへ入居した。 インターネットは無料で利用可能、壁の端子にLANケーブルを挿すだけ。 ただ、この物件のインターネット回線がおかしい。1日に1回くらい、Webサイトを閲覧しようとしたときに、マンションの管理会社のホームページへリダイレクトされる現象が起きる。 イメージとしてはこんな感じ。 東京の天気が表示されるべきなのに、入居者用Webページのログイン画面へリダイレクトされる。 腹が立ったので今年の5月くらいに現象を調べ、原因がわかったことで満足していたが、重い腰を上げて結果を以下の記事にして公開する。改めてGoogle先生に聞いたら、同じことで悩んでいる人がいた。 自動リダイレクトの回避方法について。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10165027165 なお、後述の図には
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
