プログラミング初心者へおすすめするweb実験サービス4選

プログラミング初心者におすすめする実験サービス4サイトを紹介します。プログラミング実務未経験のヒロヤンが、今年の1月から実際に現場で働き始めて先輩エンジニアから教えてもらい感激し、有効に活用をしているwebサイトになります。

ちなみに今回の内容にマッチする人は下記悩みを持つ人になります。

悩み
・テストサイトで.htmlファイルにimgタグ画像を1行で生成できないの?

・html,cssの実験サイトないの?

・html,css,JavaScript(jQuery)の実験サイトないの?

・正規表現の実験サイトないの?

placehold.jp

テストサイト(HTML)を作成しているときに、いちいち画像を用意したり、パスを通したりするのは大変ではないでしょうか?

そんな時に役立つのがこのplacehold.jpです。

<img src=”http://placehold.jp/AAA/ff0/150x150x.png?text=hoge” alt=””>

htmlで上記imgタグを記入するだけで画像が生成されます。

基本形 http://placehold.jp/150×150.png

ちなみにタグを読めばなんとなく意味は理解できるかと思いますが念のため説明します。

基本形からオプションをつけるには下記を参考ください。

http://placehold.jp/【背景色】#なしの16進数記入/【文字色】#なしの16進数記入/ width(px) x height(px).png?text=imgタグ内に記入したい文字”

jsbin

html,cssの実験したくて簡単に利用できるのがこの「jsbin」です。

https://jsbin.com/?html,output

例えば下記のようなに、htmlとcssを組み合わせて図形みたいなものを描画したいとか、こんな感じで使用をすることができます。

しかも自動更新なので、書いた内容がすぐにOutputとして反映されるので非常に優れものです。

jsfiddle

html,css,JavaScript(jQuery)の実験したくて簡単に利用できるのがこの「jsfiddle」です。

https://jsfiddle.net/

jQueryを使用するために、

  • CDNを設置
  • jQueryファイルを保存

は必要ありません。

regular expression

エンジニアなら現場に入ると必ず向き合うこと必須になります。正規表現です。

https://regex101.com/

こんな感じで、正規表現にマッチする書き方をマッピングしてくれます。

まとめ

エンジニアに就職してから先輩エンジニアに教えてもらった非常に便利なサイトです。

ぜひ活用ください。

問題略式サイト名URL
htmlファイルにimgタグ画像生成placeholdhttp://placehold.jp/
html,css実験サイトjsbinhttps://jsbin.com/?html,css,output
html,css,javascript実験サイトjsfiddlehttps://jsfiddle.net/
正規表現実験サイト regular expressionhttps://regex101.com/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です